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

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

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

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

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

点击模板1的效果：

点击模板2的效果：

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

一、部署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才配置好。

<ListView HorizontalAlignment="Left" Height="395" x:Name="list"
                 ItemsSource="{Binding Source={StaticResource listSource}}"  
                 ItemTemplate="{StaticResource dataTemplate2}" Margin="216,212,0,0" VerticalAlignment="Top" Width="576">
            <!--<ListView.ItemTemplate>
                <DataTemplate>
                    <TextBlock Foreground="White" Text="{Binding stuName}"/>
                </DataTemplate>
            </ListView.ItemTemplate>-->
        </ListView>
        <Button Content="模板1" x:Name="btn_Model1" FontSize="40" HorizontalAlignment="Left" Margin="1006,304,0,0" VerticalAlignment="Top" Width="149" Height="72" Click="btn_Model1_Click"/>
        <Button Content="模板2" x:Name="btn_Model2" FontSize="40" HorizontalAlignment="Left" Margin="1006,457,0,0" VerticalAlignment="Top" Width="149" Height="71" Click="btn_Model2_Click"/>

三、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" />
        <!--DataTemplate1-->
        <DataTemplate x:Key="dataTemplate1">
            <TextBlock Foreground="White" Text="{Binding stuName}"/>
        </DataTemplate>
        <!--DataTemplate2-->
        <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显示模板的操作就完成了。