老猿WPF DataTemplate 与 DataGrid /ListBox 视图绑定数据

本例实现DataTemplate示例，数据上下文在View页面绑定， View后台无任何数据逻辑代码，全部在ViewModel中。

效果：

View

<Window
    x:Class="Wpf模板.Views.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:Wpf模板.ViewModels"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="Window1"
    Width="800"
    Height="450"
    mc:Ignorable="d">
    <Window.DataContext>
        <local:Window1VeiwModel />
    </Window.DataContext>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <TextBlock
            Grid.Column="0"
            Margin="20"
            Text="{Binding StrTemp}" />

        <ListBox
            x:Name="listB"
            Grid.Column="1"
            Margin="5"
            ItemsSource="{Binding Colors}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <StackPanel Orientation="Horizontal">
                            <Border
                                Width="10"
                                Height="10"
                                Margin="0,5,0,0"
                                Background="{Binding Color}" />
                            <TextBlock
                                Width="100"
                                Margin="10,0"
                                Text="{Binding Name}" />
                            <TextBlock Text="{Binding Temp}" />
                            <Button Margin="5,0,0,0" Content="查看" />
                        </StackPanel>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <Grid Grid.Column="0">
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <DataGrid
                x:Name="dg1"
                Grid.Row="1"
                Margin="0,10,0,0"
                AutoGenerateColumns="False" CanUserAddRows="False"
                ItemsSource="{Binding Colors}">
                <DataGrid.Columns>
                    <DataGridTextColumn Header="序号" Binding="{Binding Id}"/>
                    <DataGridTemplateColumn Header="示例">
                        <DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <Border Width="10" Height="10" Background="{Binding Color}"/>
                            </DataTemplate>
                        </DataGridTemplateColumn.CellTemplate>
                    </DataGridTemplateColumn>
                    <DataGridTextColumn Binding="{Binding Name}" Header="名称" />
                    <DataGridTextColumn Binding="{Binding Temp}" Header="备注" />
                    <DataGridTemplateColumn Width="100" Header="操作">
                        <DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <Button Margin="2,0,0,0" Content="编辑" />
                                    <Button Margin="2,0,0,0" Content="添加" />
                                    <Button Margin="2,0,0,0" Content="删除" />
                                </StackPanel>
                            </DataTemplate>
                        </DataGridTemplateColumn.CellTemplate>
                    </DataGridTemplateColumn>
                </DataGrid.Columns>

            </DataGrid>
        </Grid>


    </Grid>
</Window>

ViewModel

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Media;
using Wpf模板.JcBase;
using Wpf模板.Models;

namespace Wpf模板.ViewModels
{
    public class Window1VeiwModel:CommandAndNotityBase
    {
		private string strTemp = "测试";

		public string StrTemp
		{
			get { return strTemp; }
			set { strTemp = value; RaisePropertyChanged(); }
		}

		private List<TestColor> _color;

		public List<TestColor> Colors
		{
			get { return _color; }
			set { _color = value; RaisePropertyChanged(); }
		}

        public Window1VeiwModel()
        {
            _color = new List<TestColor>();
            _color.Add(new TestColor() {Temp = StrTemp,Id=1, Color = "Red", Name = "Red" });
            _color.Add(new TestColor() {Temp = StrTemp,Id=2,Color = "Green", Name = "Green" });
            _color.Add(new TestColor() {Temp = StrTemp,Id=3,Color = "DarkCyan", Name = "DarkCyan" });
            _color.Add(new TestColor() {Temp = StrTemp,Id=4,Color = "DarkGray", Name = "DarkGray" });
            _color.Add(new TestColor() {Temp = StrTemp,Id=5,Color = "DarkOrange", Name = "DarkOrange" });
            _color.Add(new TestColor() {Temp = StrTemp,Id=6,Color = "Blue", Name = "Blue" });
        }
    }
}

Model

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Wpf模板.Models
{
    public class TestColor
    {
        public int Id { get; set; }

        public string Color { get; set; }
        public string Name { get; set; }
        public string Temp { get; set; }
    }
}

 JcBase

本类为封装INotifyPropertyChanged,ICommand的工具类。

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;

namespace Wpf模板.JcBase
{
    public class CommandAndNotityBase:INotifyPropertyChanged,ICommand
    {
        #region Command
        /// <summary>
        /// 
        /// </summary>
        public event EventHandler? CanExecuteChanged;
        /// <summary>
        /// 是否能执行
        /// </summary>
        /// <param name="parameter"></param>
        /// <returns></returns>
        public bool CanExecute(object? parameter)
        {
            if (CanExecuteFunc == null)
                return true;
            return (bool)CanExecuteFunc();
        }
        /// <summary>
        /// 执行
        /// </summary>
        /// <param name="parameter"></param>
        public void Execute(object? parameter)
        {
            ExecuteAction("parameter");
        }
        /// <summary>
        /// 委托无返回
        /// </summary>
        public Action<object> ExecuteAction { get; set; }
        /// <summary>
        /// 委托有返回
        /// </summary>
        public Func<object> CanExecuteFunc { get; set; }
        #endregion

        #region NtityChanged
        /// <summary>
        /// 实现事件
        /// </summary>
        public event PropertyChangedEventHandler? PropertyChanged;
        /// <summary>
        /// 事件委托的方法
        /// </summary>
        /// <param name="propertyName"></param>
        public virtual void RaisePropertyChanged([CallerMemberName] string propertyName = null)
        {
            this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
        #endregion
    }
}