C# 如何创建类似于谷歌图片的WPF布局

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

这就是我所能做到的。可以将以下用户控件添加到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>

---

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

第一个计算每个磁贴的适当行和列位置：

 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);
            }
        }

private void重画attachmentsgrid（）
{
foreach（附件中的变量child.Children）
{
if（儿童为PdfAttachment）
{
var childAsPdfAttachment=作为PdfAttachment的子对象；
var indexOfAttachment=PdfAttachments.IndexOf（childAsPdfAttachment）；
var tilesPerRow=（int）数学楼层（附件SOUTERGRID.ACTUALLWIDTH/112）；
var desiredRowIndex=（int）（indexOfAttachment/TileSprrow）；
desiredRowIndex+=desiredRowIndex；
var desiredColumnIndex=（int）（indexOfAttachment%TileSprrow）；
if（附件spanel.RowDefinitions.Count-1

第二个显示了一个查看器，位于正在单击的查看器下方的行上，如下所示：

 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);

var pdfViewer=新的pdfViewer（e.Images，e.ByteArray，e.DisplayName，e.AttachmentKey）；
pdfViewer.AttachmentClosed+=pdfViewer\u AttachmentClosed；
附件spanel.Children.Add（pdfViewer）；
Grid.SetColumnSpan（pdfViewer，100）；
var desiredRowIndex=Grid.GetRow（senderAsPdfAttachment）+1；
if（附件spanel.RowDefinitions.Count-1

还有……有什么问题吗？具体来说，你被卡在哪里了？当PdfViewerWrapperGrid可见时，其他项目会被推到一边或包装。我不希望其他同级项目的位置发生变化。不幸的是，你在该项目中有大量我没有的资源，因此我很难复制你的项目。解决方案如下：我想到的是使用一个简单的

网格

，然后通过展开

行定义

来设置动画height@DanielWard-是的，我现在将其实现为一个网格。缺点是，这会导致比我想要的更多的代码隐藏和更少的绑定。优点是它将完全按照预期运行。您可以实现t扩展和它的动画没有任何代码隐藏（除了转换器）：。我为

扩展器

实现了一次，但将其应用于

行定义