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

Question

I'm trying to create a user interface which mimics the behavior of google images in that when a tile is clicked, the image in a "row" below the row the image is on, without causing the remaining elements in the row to move.

This is as far as I've gotten. The following user control can be added to a WrapPanel, when the user clicks on the first StackPanel, the PdfViewerWrapperGrid should appear:

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

Answer 1

I ended up using a grid as suggested earlier. This is certainly a manual approach involving 2 main methods in the code-behind. Hope this helps someone else.

The first calculates the appropriate row and column position for each tile:

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

The second shows a viewer on the row below the one being clicked, like so:

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