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

【问题标题】：How to create a ListBox that looks like the Windows Live Tiles?如何创建一个看起来像 Windows Live Tiles 的 ListBox？
【发布时间】：2011-10-27 07:12:49
【问题描述】：

我想创建一个类似于Windows Live Tiles 的ListBox。

这是我的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 更改为Windows Live Tiles？
2 个 Items 彼此相邻，2 个 Rows，然后 1 个 Item，ColumnSpan 为 2，依此类推。

我只想在上面提到的布局中。

我将如何实现这一目标？

图片仅供参考。我希望可能的布局类似于前 3 行。

【问题讨论】：

标签： wpf xaml listbox datatemplate listboxitem

【解决方案1】：

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

【讨论】：

【解决方案2】：

我可能会使用 WrapPanel。为 ListBox 提供一个 ItemsPanelTemplate，其中包含 WrapPanel：

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

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

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

如果您真的想这样做，而项目不必知道它们将出现在列表中的什么位置，我认为您将不得不退出 ListBox 并自己编写更多的逻辑。您也许可以让 ItemsControl 表现得像这样，但我认为您更有可能需要更进一步并做一个完整的自定义控件，具体取决于您实际需要多大的灵活性。

但从您的问题来看，我认为您可能只需重新模板化 ListBox 就可以了。

【讨论】：