WPF样式、控件模板、数据模板

WPF样式

<Window.Resources>
	<!-- x:Key:表示样式的ID，TargetType：表示作用于什么控件 -->
	<Style x:Key="BaseButton" TargetType="Button">
		<Setter Property="FontSize" Value="18"></Setter>
		<Setter Property="Background" Value="Blue"></Setter>
		<Setter Property="Foreground" Value="White"></Setter>
	</Style>
	<!-- x:Key:表示样式的ID，TargetType：表示作用于什么控件 BaseOn: 表示继承的父类样式-->
	<Style x:Key="ChildButton" TargetType="Button" BasedOn="{StaticResource BaseButton}">
		<Setter Property="Height" Value="100"></Setter>
		<Setter Property="Width" Value="100"></Setter>
	</Style>
</Window.Resources>
<WrapPanel>
	<!--静态引用的方式加载样式-->
	<Button Content="hello" Style="{StaticResource ChildButton}"></Button>
</WrapPanel>

控件模板

控件模板，用于指定控件的外观

<!-- 控件模板，该方法在一个控件标签内定义模板  ---->
<Button Content="click Me" FontSize="22" Command="{Binding viewCommand}" >
	<Button.Template>
		<!-- 每个标签都有控件模板 ControlTemplate ，TargetType：作用于什么标签-->
		<ControlTemplate TargetType="{x:Type Button}">
			<!-- 控件模板内容 -->
			<Grid Margin="5">
				<Ellipse Stroke="Black" StrokeThickness="2">
					<Ellipse.Fill>
						<RadialGradientBrush Center="0.3,0.5" RadiusX="0.5" RadiusY="0.5">
							<GradientStop Color="Aqua" Offset="0.1"></GradientStop>
							<GradientStop Color="Beige" Offset="1.1"></GradientStop>
						</RadialGradientBrush>
					</Ellipse.Fill>
				</Ellipse>
				<!-- ContentPresenter：该标签用于显示Button内容 ，表示内容水平垂直居中显示 -->
				<ContentPresenter Name="conent" HorizontalAlignment="Center" VerticalAlignment="Center"></ContentPresenter>
			</Grid>
		</ControlTemplate>
	</Button.Template>
</Button>

数据模板

数据模板，指定控件内容的外观

MainWindow.xaml文件

<Window.Resources>
	<!-- 数据模板 x:Key="myTaskTemplate"：定义唯一标识 -->
	<DataTemplate x:Key="myTaskTemplate">
		<!--- 定义模板的外观 ，外面的边框 -->
		<Border Name="taskBorder" BorderBrush="NavajoWhite" BorderThickness="2" CornerRadius="5" Padding="5" Margin="5">
			<!--- 使用Grid对内容排版 -->
			<Grid>
				<!--3行2列的数据-->
				<Grid.RowDefinitions>
					<RowDefinition></RowDefinition>
					<RowDefinition></RowDefinition>
					<RowDefinition></RowDefinition>
				</Grid.RowDefinitions>
				<Grid.ColumnDefinitions>
					<ColumnDefinition></ColumnDefinition>
					<ColumnDefinition></ColumnDefinition>
				</Grid.ColumnDefinitions>
				<!-- 具体的数据 -->
				<TextBlock Grid.Row="0" Grid.Column="0" Text="TaskName"></TextBlock>
				<!-- 绑定到ListEntry类的TaskName属性 -->
				<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Path=TaskName}"></TextBlock>
				<TextBlock Grid.Row="1" Grid.Column="0" Text="Description"></TextBlock>
				<!-- 绑定到ListEntry类的Description属性 -->
				<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Path=Description}"></TextBlock>
				<TextBlock Grid.Row="2" Grid.Column="0" Text="Priority"></TextBlock>
				<!-- 绑定到ListEntry类的Priority属性 -->
				<TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Path=Priority}"></TextBlock>
			</Grid>
		</Border>
	</DataTemplate>
</Window.Resources>

<ListBox 
	Grid.Row="1" 
	Grid.Column="0" 
	<!-- 绑定List集合-->
	ItemsSource="{Binding Lists}" 
	<!-- 使用数据模板-->
	ItemTemplate="{StaticResource myTaskTemplate}">
</ListBox>

MainViewModel.cs文件

private List<ListEntry> list = new List<ListEntry>();
public List<ListEntry> Lists 
{ 
	get { return list; }
	set { this.list = value; }
}

public MainViewModel()
{
	//添加数据
	list.Add(new ListEntry("name1", "description1", "priority1"));
	list.Add(new ListEntry("name2", "description2", "priority2"));
	list.Add(new ListEntry("name3", "description3", "priority3"));
}

ListEntry数据实体类

public class ListEntry
{
	//这三个属性和MainWindow.xaml文件中绑定的属性一致
	public string TaskName { get; set; }
	public string Description { get; set; }
	public string Priority { get; set; }

	public ListEntry(string name, string description, string priority)
	{
		TaskName = name;
		Description = description;
		Priority = priority;
	}
}