如何创建类似于 Google 图片的 WPF 布局答案

【问题标题】：How to create WPF layout similar to Google Images如何创建类似于 Google 图片的 WPF 布局
【发布时间】：2014-08-13 05:45:51
【问题描述】：

我正在尝试创建一个模仿谷歌图像行为的用户界面，即当单击图块时，图像位于图像所在行下方的“行”中，而不会导致行中的其余元素移动。

这是我所知道的。可以将以下用户控件添加到 WrapPanel，当用户单击第一个 StackPanel 时，应出现 PdfViewerWrapperGrid：

<UserControl x:Class="APDesktop.Controls.PdfAttachment"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:mui="http://firstfloorsoftware.com/ModernUI"
         mc:Ignorable="d" 
         d:DesignHeight="395" d:DesignWidth="503">
<Grid Background="{StaticResource WindowBackground}">
    <StackPanel  Width="100" Height="100" Margin="5" MouseUp="StackPanel_MouseUp" HorizontalAlignment="Left" VerticalAlignment="Top">
        <Border BorderBrush="{StaticResource ResourceKey=ButtonBorderPressed}" Height="100" Width="100" BorderThickness="1">
            <Grid>
                <mui:ModernButton x:Name="DeleteButton" Width="20" IconData="F1 M 26.9166,22.1667L 37.9999,33.25L 49.0832,22.1668L 53.8332,26.9168L 42.7499,38L 53.8332,49.0834L 49.0833,53.8334L 37.9999,42.75L 26.9166,53.8334L 22.1666,49.0833L 33.25,38L 22.1667,26.9167L 26.9166,22.1667 Z " Margin="39,5,5,0" HorizontalAlignment="Right" VerticalAlignment="Top" Click="DeleteButton_Click"/>
                <Grid Margin="20" Height="50" VerticalAlignment="Top">
                    <Grid.Background>
                        <VisualBrush Stretch="Uniform" Visual="{StaticResource PDFIcon}"/>
                    </Grid.Background>
                </Grid>
                <TextBlock x:Name="FileNameTextBlock" TextTrimming="CharacterEllipsis" HorizontalAlignment="Center" VerticalAlignment="Bottom" FontSize="16" Foreground="{StaticResource ResourceKey=ButtonText}" Text="{Binding DisplayName}"></TextBlock>
            </Grid>
        </Border>
    </StackPanel>
    <Grid x:Name="PdfViewerWrapperGrid" Visibility="Visible">
        <Polygon Points="55,110 35,125, 75,125" Stroke="{StaticResource ScrollBarBackground}" Fill="{StaticResource ScrollBarBackground}" />
        <StackPanel x:Name="PdfViewerOuterStackPanel" Margin="30,125,30,0" Background="{StaticResource ScrollBarBackground}">
            <Grid Margin="0,15,0,0" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.75*"/>
                    <ColumnDefinition Width="0.25*"/>
                </Grid.ColumnDefinitions>
                <TextBlock HorizontalAlignment="Center" MaxWidth="150" TextTrimming="CharacterEllipsis" Text="{Binding DisplayName}" Grid.ColumnSpan="2" FontWeight="Bold" FontSize="18"></TextBlock>
                <StackPanel Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Right">
                    <mui:ModernButton x:Name="SaveToSpecialFolderButton" ToolTip="Save to My Documents folder" IconData="F1 M 25,52L 51,52L 51,57L 25,57L 25,52 Z M 35,16L 41,16L 41,36.5L 49,27L 49,36.5L 38,49L 27,36.5L 27,27L 35,36.5L 35,16 Z " HorizontalAlignment="Right" Margin="7,0" Click="SaveToSpecialFolderButton_Click" ></mui:ModernButton>
                    <mui:ModernButton x:Name="SaveAnywhereButton" ToolTip="Save anywhere" IconData="F1 M 20.5833,20.5833L 55.4167,20.5833L 55.4167,55.4167L 45.9167,55.4167L 45.9167,44.3333L 30.0833,44.3333L 30.0833,55.4167L 20.5833,55.4167L 20.5833,20.5833 Z M 33.25,55.4167L 33.25,50.6667L 39.5833,50.6667L 39.5833,55.4167L 33.25,55.4167 Z M 26.9167,23.75L 26.9167,33.25L 49.0833,33.25L 49.0833,23.75L 26.9167,23.75 Z " HorizontalAlignment="Right" Margin="7,0" Click="SaveAnywhereButton_Click" ></mui:ModernButton>
                    <mui:ModernButton x:Name="CloseViewerButton" ToolTip="Close viewer" IconData="F1 M 26.9166,22.1667L 37.9999,33.25L 49.0832,22.1668L 53.8332,26.9168L 42.7499,38L 53.8332,49.0834L 49.0833,53.8334L 37.9999,42.75L 26.9166,53.8334L 22.1666,49.0833L 33.25,38L 22.1667,26.9167L 26.9166,22.1667 Z " HorizontalAlignment="Right" Margin="7,0" Click="CloseViewerButton_Click"></mui:ModernButton>
                </StackPanel>

            </Grid>
            <ScrollViewer Background="{StaticResource ScrollBarBackground}">
                <StackPanel x:Name="PdfViewerInnerStackPanel" Background="{StaticResource ScrollBarBackground}">
                    <!--<Image Width="25" Height="25" x:Name="MyImage"></Image>
                <Image  Width="25" Height="25"></Image>-->
                </StackPanel>
            </ScrollViewer>
        </StackPanel>
    </Grid>

</Grid>

【问题讨论】：

还有……有什么问题？具体来说，你在哪里卡住了？
当 PdfViewerWrapperGrid 可见时，其他项目被推到一边或被包裹。我不希望其他兄弟姐妹的位置发生变化。
不幸的是，您在该项目中有许多我没有的资源，因此我很难复制您的项目。想到的一个修复方法是使用简单的Grid，然后通过扩展RowDefinition 的高度来制作动画
@DanielWard - 是的，我现在将它作为一个网格来实现。不利的一面是，这比我想要的更多的代码隐藏和更少的绑定。好处是它的行为会完全符合预期。
您可以在没有任何代码隐藏（除了转换器）的情况下实现该扩展和动画：codeproject.com/Articles/248112/Templating-WPF-Expander-Control。我为Expander 实现了一次，但将其应用于RowDefinition 的概念应该相同

标签： c# wpf user-interface

【解决方案1】：

我最终使用了前面建议的网格。这当然是一种手动方法，涉及代码隐藏中的 2 个主要方法。希望这对其他人有帮助。

第一个计算每个图块的适当行和列位置：

 private void ReDrawAttachmentsGrid()
    {
        foreach (var child in AttachmentsPanel.Children)
        {
            if (child is PdfAttachment)
            {
                var childAsPdfAttachment = child as PdfAttachment;

                var indexOfAttachment = PdfAttachments.IndexOf(childAsPdfAttachment);

                var tilesPerRow = (int)Math.Floor(AttachmentsOuterGrid.ActualWidth / 112);

                var desiredRowIndex = (int)(indexOfAttachment / tilesPerRow);
                desiredRowIndex += desiredRowIndex;

                var desiredColumnIndex = (int)(indexOfAttachment % tilesPerRow);

                if (AttachmentsPanel.RowDefinitions.Count - 1 < desiredRowIndex)
                {
                    while (AttachmentsPanel.RowDefinitions.Count - 1 < desiredRowIndex)
                        AttachmentsPanel.RowDefinitions.Add(new RowDefinition());
                }

                if (AttachmentsPanel.ColumnDefinitions.Count - 1 < desiredColumnIndex)
                {
                    var column = new ColumnDefinition();
                    column.Width = new GridLength(112);
                    AttachmentsPanel.ColumnDefinitions.Add(column);
                }

                Grid.SetColumn(childAsPdfAttachment, desiredColumnIndex);
                Grid.SetRow(childAsPdfAttachment, desiredRowIndex);
            }
        }

第二个在被点击的行下方显示一个查看器，如下所示：

 var pdfViewer = new PdfViewer(e.Images, e.ByteArray, e.DisplayName, e.AttachmentKey);
            pdfViewer.AttachmentClosed += pdfViewer_AttachmentClosed;
            AttachmentsPanel.Children.Add(pdfViewer);
            Grid.SetColumnSpan(pdfViewer, 100);

            var desiredRowIndex = Grid.GetRow(senderAsPdfAttachment) + 1;

            if (AttachmentsPanel.RowDefinitions.Count - 1 < desiredRowIndex)
            {
                while (AttachmentsPanel.RowDefinitions.Count - 1 < desiredRowIndex)
                    AttachmentsPanel.RowDefinitions.Add(new RowDefinition());
            }

            Grid.SetRow(pdfViewer, desiredRowIndex);

【讨论】：