自定义数据项的布局

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控件的项布局,如下图所示。

自定义数据项的布局

自定义数据项的布局

 

 

上一篇:仿QQ对话列表滑动删除与置顶的原理及实现


下一篇:android解决fragment嵌套ListView显示不全问题