WPF 基础入门 （模板）

本章讲述：WPF中的模板

    WPF 模板大概划分为三大类：ControlTemplate（控件模板）、DataTemplate（数据模板）、ItemsPanelTemplate（数据面板模板）

1、 ControlTemplate（控件模板）

    如果控件的样式不能满足，可自定义控件模板来设计样式和控件的行为。

<Window.Resources>
	<ControlTemplate x:Key="roundBtnTemplte">
		<Grid>
			<Ellipse Name="roundBtn" Width="100" Height="100" Fill="AliceBlue">
			</Ellipse>
			<ContentPresenter Content="{TemplateBinding Button.Content}" VerticalAlignment="Center">
			</ContentPresenter>
		</Grid>
		<ControlTemplate.Triggers>
			<Trigger Property="IsMouseOver" Value="true">
				<Setter TargetName="roundBtn" Property="Fill" Value="Yellow">
				</Setter>
			</Trigger>
		</ControlTemplate.Triggers>
	</ControlTemplate>
</Window.Resources>
<Grid>
	<Button Padding="5" Margin="5" Content="Round Button" Template="{StaticResource  roundBtnTemplte}"></Button>
</Grid>

2、DataTemplate（数据模板）

    数据模板主要定义数据控件的数据显示或行为。示例：TreeView控件中绑定数据模板NavDataTem；当IsMouseOver数据发生变化时，控制文本的背景色和字体的大小。

<!--创建数据模板-->
<HierarchicalDataTemplate  x:Key="NavDataTem" ItemsSource="{Binding Children}">
	<Border Name="myborder" BorderBrush="AliceBlue" BorderThickness="2" Margin="3">
		<StackPanel Orientation="Horizontal" Margin="0,3">
			<CheckBox IsChecked="{Binding IsChecked}" Content=""/>
			<Image Source="{Binding Icon}" Width="16" Height="16"></Image>
			<TextBlock Name="txtOne" Margin="5" FontWeight="Bold" Text="{Binding ItemName}" ></TextBlock>
			<TextBlock Name="txtTwo"  Margin="5" Text="{Binding ItemProperty}" ></TextBlock>
		</StackPanel>
	</Border>
	<HierarchicalDataTemplate.Triggers>
		<Trigger SourceName="myborder" Property="IsMouseOver" Value="True">
			<Setter TargetName="txtOne" Property="Background" Value="LightGray"></Setter>
			<Setter TargetName="txtTwo" Property="FontSize" Value="20"></Setter>
		</Trigger>
	</HierarchicalDataTemplate.Triggers>
</HierarchicalDataTemplate>
</Window.Resources>
<StackPanel Margin="5">
	<TreeView Name="treeTest" ScrollViewer.VerticalScrollBarVisibility="Visible"  
			ItemTemplate="{StaticResource NavDataTem}">
	</TreeView>
</StackPanel>

3、 ItemsPanelTemplate（面板模板）

    面板模板实现了数据布局。示例：使用TreeView控件，用面板模板控制TreeView中子元素的显示布局（水平居左、垂直居中）

<ItemsPanelTemplate x:Key="ItemsPanelTem">
            <StackPanel Orientation="Horizontal"
                    VerticalAlignment="Center"
                    HorizontalAlignment="Left"/>
        </ItemsPanelTemplate>

<TreeView Name="treeTest" ScrollViewer.VerticalScrollBarVisibility="Visible"  
                  ItemTemplate="{StaticResource NavDataTem}" ItemsPanel="{StaticResource ItemsPanelTem}">
 </TreeView>

**************************************************************************************************************