Google画像検索に似たWPFレイアウトを作成する方法

J-DawG

タイルがクリックされたときに、行の残りの要素を移動させることなく、画像が表示されている行の下の「行」にある画像の動作を模倣するユーザーインターフェイスを作成しようとしています。

これは私が得た限りです。次のユーザーコントロールを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>

J-DawG

以前に提案したように、グリッドを使用することになりました。これは確かに、コードビハインドの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);
            }
        }

2つ目は、次のように、クリックされているビューアの下の行にビューアを表示します。

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

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

JAVAGUIでGoogle検索スタイルに似た検索バーを作成する方法

分類Dev

アンドロイドのリンクで提供されている画像に似たレイアウトを作成する方法

分類Dev

Androidの画像に似た相対的なレイアウト形状を変更する方法

分類Dev

Playニューススタンドのレイアウトに似たものを作成する方法

分類Dev

AndroidダイヤラアプリまたはGooglePlayミュージックに似たレイアウトを作成する方法

分類Dev

WPFでレイアウトの外側に画像を描画する

分類Dev

WPFレイアウトを動的に作成する

分類Dev

トップレイアウトに画像を追加する方法

分類Dev

WPFアプリケーションレイアウトを作成するための獣の方法

分類Dev

写真アプリに似た画像ページコントロールをすばやく作成する方法

分類Dev

アドレスバーからウェブサイトを検索する方法

分類Dev

Vaadin(春)のレイアウトに画像を追加する方法

分類Dev

bash で「apt search」に似た検索を実装する方法

分類Dev

相対レイアウトでオーバーラップした画像ビューを作成する方法。

分類Dev

レイアウトを作成する方法は、Androidで次の画像のようになり、Androidレイアウトのアルファとは何ですか

分類Dev

Appear.inに似たレイアウト

分類Dev

Android:非常によく似たレイアウト/アクティビティを実装する

分類Dev

UWPでSegoeMDL2アセットに似たアイコンを作成する方法

分類Dev

/ dev / urandomに似たPythonPRNGスクリプトからDieharderにデータをパイプアウトする方法

分類Dev

/ dev / urandomに似たPythonPRNGスクリプトからDieharderにデータをパイプアウトする方法

分類Dev

湾曲したダイアログレイアウトを作成する方法

分類Dev

ディレクトリjavaで検索するたびに新しいスレッドを作成する方法

分類Dev

フレームレイアウト内に画像を設定する方法

分類Dev

cssでレイアウトを中断せずに画像を非表示にする方法

分類Dev

選択した最後にクリック可能な画像をverticalboxレイアウトで取得する方法

分類Dev

内部結合に似た2つのインデックスを検索する方法はありますか?

分類Dev

カスタマイズされたレイアウトを作成する方法

分類Dev

Google Scriptsを使用して、検索したキーワードを含むWebサイトをGoogleスプレッドシートに表示する方法

分類Dev

データフレームのリストでアイテムを検索してカウントする方法

Related 関連記事

  1. 1

    JAVAGUIでGoogle検索スタイルに似た検索バーを作成する方法

  2. 2

    アンドロイドのリンクで提供されている画像に似たレイアウトを作成する方法

  3. 3

    Androidの画像に似た相対的なレイアウト形状を変更する方法

  4. 4

    Playニューススタンドのレイアウトに似たものを作成する方法

  5. 5

    AndroidダイヤラアプリまたはGooglePlayミュージックに似たレイアウトを作成する方法

  6. 6

    WPFでレイアウトの外側に画像を描画する

  7. 7

    WPFレイアウトを動的に作成する

  8. 8

    トップレイアウトに画像を追加する方法

  9. 9

    WPFアプリケーションレイアウトを作成するための獣の方法

  10. 10

    写真アプリに似た画像ページコントロールをすばやく作成する方法

  11. 11

    アドレスバーからウェブサイトを検索する方法

  12. 12

    Vaadin(春)のレイアウトに画像を追加する方法

  13. 13

    bash で「apt search」に似た検索を実装する方法

  14. 14

    相対レイアウトでオーバーラップした画像ビューを作成する方法。

  15. 15

    レイアウトを作成する方法は、Androidで次の画像のようになり、Androidレイアウトのアルファとは何ですか

  16. 16

    Appear.inに似たレイアウト

  17. 17

    Android:非常によく似たレイアウト/アクティビティを実装する

  18. 18

    UWPでSegoeMDL2アセットに似たアイコンを作成する方法

  19. 19

    / dev / urandomに似たPythonPRNGスクリプトからDieharderにデータをパイプアウトする方法

  20. 20

    / dev / urandomに似たPythonPRNGスクリプトからDieharderにデータをパイプアウトする方法

  21. 21

    湾曲したダイアログレイアウトを作成する方法

  22. 22

    ディレクトリjavaで検索するたびに新しいスレッドを作成する方法

  23. 23

    フレームレイアウト内に画像を設定する方法

  24. 24

    cssでレイアウトを中断せずに画像を非表示にする方法

  25. 25

    選択した最後にクリック可能な画像をverticalboxレイアウトで取得する方法

  26. 26

    内部結合に似た2つのインデックスを検索する方法はありますか?

  27. 27

    カスタマイズされたレイアウトを作成する方法

  28. 28

    Google Scriptsを使用して、検索したキーワードを含むWebサイトをGoogleスプレッドシートに表示する方法

  29. 29

    データフレームのリストでアイテムを検索してカウントする方法

ホットタグ

アーカイブ