20240215 WPF练习 数据模板 以及 数据绑定（ListBox，DataGrid）

1）首先需要再XAML文件中定义你需要的一个ListBox；

2）然后为该控件设定数据模板； 

        <ListBox.ItemTemplate> 指定的是该控件的模板        

        <DataTemplate>指定的是具体的数据模板

        该模板中定义了一个 StackPanel 用于存放你需要的数据， 我这边存放了一个颜色块（Border，填充对应的颜色，如果固定颜色，则Background里面直接指定固定的颜色）和一个文本，可以根据自己的需要设定不同的内容；

        然后将添加的内容要显示的信息，例如背景色，文本等绑定到后续会生成的一个类的成员属性上（反正你要能找到就好了）

        <ListBox x:Name="list1">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Border Width="10" Height="10" Background="{Binding ColorStr}"></Border>
                        <TextBlock Margin="20,0" Text="{Binding Name}"></TextBlock>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>

        </ListBox>

3）去到业务代码的地方，创建一个你需要的类，里面包含你需要的数据（你的list需要多少个项目，你就建立多个个属性，要内容对齐）

    class Color {

        public string ColorStr { get; set; }
        public string Name { get; set; }
    }

4）然后定义一个列表，用于存储实例化后的一个个数据；

            List<Color> test = new List<Color>();
            test.Add(new Color() { ColorStr = "#9400D3", Name = "深兰花紫" });
            test.Add(new Color() { ColorStr = "#7B68EE", Name = "适中的板岩暗蓝灰色" });
            test.Add(new Color() { ColorStr = "#EE82EE", Name = "深岩暗蓝灰色" });
            test.Add(new Color() { ColorStr = "#9400D3", Name = "紫罗兰" });
            test.Add(new Color() { ColorStr = "#DB7093", Name = "苍白的紫罗兰红色" });
            test.Add(new Color() { ColorStr = "#FFB6C1", Name = "浅粉红" });
            list1.ItemsSource = test;

5）关键一点就是要关联，将XAML中定义的list1与你这边定义的test关联起来，指定数据源；

另外颜色代码可以上网搜搜即可 很多

今天第一次正式接触WPF，加油！

5）升级使用DataGrid

        <DataGrid x:Name="grid" AutoGenerateColumns="False" CanUserAddRows="False" >
            <DataGrid.Columns>
                <DataGridTextColumn Header="代码" Binding="{Binding ColorStr}"> </DataGridTextColumn>
                <DataGridTextColumn Header="颜色" Binding="{Binding Name}"/>
                <DataGridTemplateColumn Header="显示">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <Border Width="10" Height="10" Background="{Binding ColorStr}"/>
                                <TextBlock Margin="10,0" Text="{Binding Name}"/>
                            </StackPanel>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
                <DataGridTemplateColumn Header="操作" >
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <Button Content="添加" Margin="2,2,2,2" />
                                <Button Content="删除" Margin="2,2,2,2" />
                                <Button Content="编辑" Margin="2,2,2,2" />
                            </StackPanel>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>

                </DataGridTemplateColumn>
            </DataGrid.Columns>
            
        </DataGrid>

目前先到这里后面再去学习 其他数据绑定相关以及命令绑定相关