如何创建一个看起来像Windows Live Tiles的ListBox？

Question

我想创建一个看起来像ListBox的{​​{1}}。

这是我的Windows Live Tiles：

XAML

• 如何将此<ListBox Name="listBox" Grid.Row="1" Background="Transparent" BorderBrush="Transparent" BorderThickness="0" Width="Auto" Height="Auto" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ItemsSource="{Binding Path=SomeList,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch"> <ListBox.ItemTemplate> <DataTemplate > <Grid x:Name="PART_Item" Width="Auto" Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10"> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Image Name="logo" Source="{Binding Path=ImagePath}" Width="50" Height="50" Margin="0,0,10,0" Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" RenderTransformOrigin="0.5,0.5" SnapsToDevicePixels="True"> </Image> <TextBlock Grid.Row="0" Grid.Column="1" TextAlignment="Left" FontSize="12" Text="{Binding Path=SomeName}" TextTrimming="CharacterEllipsis"/> <TextBlock Grid.Row="1" Grid.Column="1" Margin="0,10,0,0" FontSize="12" TextAlignment="Left" Text="{Binding Path=SomeNo}" TextTrimming="CharacterEllipsis"/> <TextBlock Grid.Row="0" Grid.Column="2" TextAlignment="Left" FontSize="12" Text="{Binding Path=SomeDescription}" TextWrapping="Wrap"/> </Grid> </DataTemplate> </ListBox.ItemTemplate> 更改为XAML？

• 2 Windows Live Tiles彼此相邻，2 Items然后1 Rows Item为2，依此类推，应继续。

我只想进入上面提到的布局。

我将如何实现这一目标？

该图片仅供参考。我希望布局可以像前3行一样。

Answer 1

一个简单的解决方案是使用WrapPanel作为ListBox ItemsPanel。使用DataBinding使您的商品具有正确的尺寸（正方形或矩形），并为ListBox提供两个正方形的宽度。

Answer 2

我可能会用WrapPanel来做。为ListBox提供一个带有WrapPanel的ItemsPanelTemplate：

<ListBox.ItemsPanel>
    <ItemsPanelTemplate>
        <WrapPanel Orientation="Horizontal" />
    </ItemsPanel>
</ListBox>

然后设置你的ItemTemplate，使每个项目的大小是ListBox本身宽度的一半（或者相同的宽度，对于你的示例第三行）。最简单的方法是将ListBox设置为已知宽度，然后将DataTemplate中顶级面板的宽度绑定到项目对象中的某些内容。然而，这意味着物体需要知道它们应该有多宽 - 但如果它们想要正确填充瓷砖尺寸，也许这可能被视为一种好处。

另一个选项是DataTemplateSelector，但是还需要有一种方法来确定它是应该提供宽或窄的模板，并且它实际上无法访问有关列表中的位置的信息 - 它只知道哪个要为其提供模板的项目。

如果你真的想要这样做而没有必须知道它们将在列表中出现的位置，我认为你将不得不退出ListBox并自己编写更多的逻辑。你可以将一个ItemsControl与这样的行为纠缠在一起，但我认为你更有可能需要更进一步地进行全面的自定义控制，具体取决于你实际需要的灵活性。

但从你的问题判断，我认为你可能只是重新模仿ListBox。