タイルがクリックされたときに、行の残りの要素を移動させることなく、画像が表示されている行の下の「行」にある画像の動作を模倣するユーザーインターフェイスを作成しようとしています。
これは私が得た限りです。次のユーザーコントロールを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>
以前に提案したように、グリッドを使用することになりました。これは確かに、コードビハインドの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]
コメントを追加