ItemsControl控件有一个ItemsPanel属性,其作用是为集合控件中的列表项定义布局面板。通过这种方式可以改变列表项的排列方式。
下面示例将演示如何动态改变ItemsPanel属性来调整ListView控件中列表项的排列方式。
首先在页面的资源集合中声明两个ItemsPanelTemplate实例,分别使用VirtualizingStackPanel和WrapGrid两个布局控件来定义列表项的布局方式。
<Page.Resources>
<ItemsPanelTemplate x:Key="tmpLine">
<VirtualizingStackPanel/>
</ItemsPanelTemplate>
<ItemsPanelTemplate x:Key="tmpWrap">
<WrapGrid Orientation="Horizontal"/>
</ItemsPanelTemplate>
</Page.Resources>
示例应用的主页面布局如下面XAML所示:
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<ListView x:Name="lv">
<ListView.ItemTemplate>
<DataTemplate>
<Border Background="#FF189E18" Width="100" Height="100">
<TextBlock TextWrapping="Wrap" FontSize="20" Text="{Binding}"/>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Margin" Value="12"/>
</Style>
</ListView.ItemContainerStyle>
</ListView>
<StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Center">
<Button Content="直线排列" Tapped="OnLine_Tapped"/>
<Button Content="自动换行" Margin="15,0,0,0" Tapped="OnWrap_Tapped"/>
</StackPanel>
</Grid>
通过两个Button控件在运行阶段动态改变ListView控件的ItemsPanleTemplate,因此需要处理它们的Tapped事件。
private void OnLine_Tapped(object sender, TappedRoutedEventArgs e)
{
lv.ItemsPanel = Resources["tmpLine"] as ItemsPanelTemplate;
}
private void OnWrap_Tapped(object sender, TappedRoutedEventArgs e)
{
lv.ItemsPanel = Resources["tmpWrap"] as ItemsPanelTemplate;
}
Resources(资源的Key)可以返回资源集合中的对象实例,上面代码通过Resources集合来引用资源集合中的ItemsPanelTempalte实例。
在页面类的构造方法中加入以下代码,以产生示例数据项,并添加到ListView控件的Items集合中。
public MainPage()
{
this.InitializeComponent();
for (int i = 0; i < 7; i++)
{
lv.Items.Add("项 - " + i.ToString());
}
}
运行示例程序后,可以单击页面下方的按钮来切换ListView控件的项布局,如下图所示。