我想创建一个看起来像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行一样。
答案 0 :(得分:2)
一个简单的解决方案是使用WrapPanel
作为ListBox ItemsPanel
。使用DataBinding使您的商品具有正确的尺寸(正方形或矩形),并为ListBox
提供两个正方形的宽度。
答案 1 :(得分:1)
我可能会用WrapPanel来做。为ListBox提供一个带有WrapPanel的ItemsPanelTemplate:
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" />
</ItemsPanel>
</ListBox>
然后设置你的ItemTemplate,使每个项目的大小是ListBox本身宽度的一半(或者相同的宽度,对于你的示例第三行)。最简单的方法是将ListBox设置为已知宽度,然后将DataTemplate中顶级面板的宽度绑定到项目对象中的某些内容。然而,这意味着物体需要知道它们应该有多宽 - 但如果它们想要正确填充瓷砖尺寸,也许这可能被视为一种好处。
另一个选项是DataTemplateSelector,但是还需要有一种方法来确定它是应该提供宽或窄的模板,并且它实际上无法访问有关列表中的位置的信息 - 它只知道哪个要为其提供模板的项目。
如果你真的想要这样做而没有必须知道它们将在列表中出现的位置,我认为你将不得不退出ListBox并自己编写更多的逻辑。你可以将一个ItemsControl与这样的行为纠缠在一起,但我认为你更有可能需要更进一步地进行全面的自定义控制,具体取决于你实际需要的灵活性。
但从你的问题判断,我认为你可能只是重新模仿ListBox。