win8,win8.1中怎样动态地改变listview的模板样式

待我称王封你为后i 2022-08-27 01:13 102阅读 0赞

一直感觉标题总是写的让人误解，但就是改不成我想要表达的意思，唉，肯定是当初语文表达学的很差的缘故。

这里我在此明确下这篇博客是关于什么的：

在win8,win8.1项目中，拖一个listview控件到视图中，这里Listview里面的数据采用数据绑定(前面的博客中提到怎样绑定数据到listview)，再在旁边再放置两个button按钮，

点击一个按钮listview模板里的数据是一种显示方式，点击另外一个是listview呈现的是另外一个显示方式。如下图：

点击模板1的效果：

![20140423215712234][]

点击模板2的效果：

![20140423215815984][]

下面是具体的实现步骤，这边最最最重要的是搞清楚谁绑定谁，怎么绑定的问题，因为这边最最最容易混乱(当然了，这是我个人的感觉)

一、部署StudentDataSource类的model层

(stuName,stuAge,stuImage三个属性和StudentDataHelper的一个静态方法GetStuList())

class StudentDataSource
        {
            public string stuName { get; set; }
            public int stuAge { get; set; }
            public string stuImage { get; set; }
        }
    
        class StudentDataHelper
        {
            //静态方法属于类
            public static List<StudentDataSource> GetStuList()
            {
                var list = new List<StudentDataSource>
                {
                    new StudentDataSource{ stuName = "钢铁侠", stuAge = 20, stuImage="Assets/Images/1.png" },
                    new StudentDataSource{ stuName = "蜘蛛侠", stuAge = 30, stuImage="Assets/Images/2.png" },
                    new StudentDataSource{ stuName = "蝙蝠侠", stuAge = 40, stuImage="Assets/Images/3.png"},
                    new StudentDataSource{ stuName = "绿巨人", stuAge = 50, stuImage="Assets/Images/4.png"},
                };
                return list;
            }
        }

二、listview部署和button部署：

拖一个listview控件到视图中

设置它的itemsource的来源(这里对应的是page.source的里面的CollectionViewSource的x:name属性)

设置ItemTemplate模板来源(绑定page.source中的CollectionViewSource中的DataTemplate的x:key属性)

到此为止listview才配置好。

三、page.source部署:

这边除了给CollectionViewSource设置x:name属性，给DataTemplate设置x:key属性之外

在datatemplate数据模板里面的textblock和image把它们的text和source各自绑定上StudentDataSource类里面的属性(stuName,stuAge,stuImage三个属性)

<Page.Resources>
            <CollectionViewSource x:Name="listSource" ItemsPath="stuName" />
            
            <DataTemplate x:Key="dataTemplate1">
                <TextBlock Foreground="White" Text="{Binding stuName}"/>
            </DataTemplate>
            
            <DataTemplate x:Key="dataTemplate2">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="40" />
                        <RowDefinition Height="40" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="80"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="80"/>
                    </Grid.ColumnDefinitions>
                    <Image Source="{Binding stuImage}" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2"/>
                    <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding stuName}"/>
                    <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding stuAge}"/>
                    <Button Grid.Row="0" Grid.Column="2" Content="关闭" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                </Grid>
            </DataTemplate>
        </Page.Resources>

四、最后一步再给两个按钮设置点击事件，让他们点击之后listview模板对应的改变。

同时给listview一个绑定初始数据，先呈现一个初始模板(在打开应用的时候起码要先呈现一个模板吧，要不然刚打开不就什么都没有吗)。

public MainPage()
            {
                this.InitializeComponent();
                DataBind();//绑定数据
            }
            
            private void DataBind()
            {
                var dataList = StudentDataHelper.GetStuList();
                listSource.Source = dataList;//绑定数据到CollectionViewSource上，再有listview绑定CollectionViewSource
            }
    
            private void btn_Model1_Click(object sender, RoutedEventArgs e)
            {//点击模板1按钮listview呈现dataTemplate1的形式
                var modelTemp = "dataTemplate1";
                list.ItemTemplate = this.Resources[modelTemp] as DataTemplate;
            }
    
            private void btn_Model2_Click(object sender, RoutedEventArgs e)
            {//点击模板2按钮listview呈现dataTemplate2的形式
                var modelTemp = "dataTemplate2";
                list.ItemTemplate = this.Resources[modelTemp] as DataTemplate;
            }

至此，listview绑定数据且动态绑定模板，点击按钮改变listview显示模板的操作就完成了。

[20140423215712234]: /images/20220824/53e74da9cc614cadb191968fdb60cc27.png
[20140423215815984]: /images/20220824/be1225e245d74953a4768b3c9b71bbe4.png