深入浅出WPF 第二部分(25)-优快云博客

本文介绍了WPF中ItemsControl的PanelTemplate使用方法，通过示例展示了如何自定义ListBox和ListView的布局。同时，深入探讨了DataTemplate与ControlTemplate的区别及应用场景，包括样式设置和数据绑定技巧。

11.3.2 ItemsControl的PanelTemplate

ItemsControl具有一个名为ItemsPanel的属性，它的数据类型为ItemsPanelTemplate，ItemsPanelTemplate也是一种控件Template，它的作用是让程序员有机会控制ItemsControl的条目容器。

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <ListBox Width="100" Height="100">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel Orientation="Vertical" Background="Green"/> 
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.Items>
                <sys:String>月光宝盒</sys:String>
                <sys:String>大话西游</sys:String>
                <sys:String>梦幻西游</sys:String>
                <sys:String>天外飞仙</sys:String>
                <sys:String>薄弱薄弱米</sys:String>
            </ListBox.Items>
        </ListBox>
    </Grid>
</Window>

<Window x:Class="FirstWpfApplication.MainWindow"
        x:ClassModifier="public"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:data="clr-namespace:System.Windows.Data;assembly=PresentationFramework"
        Title="资源" Height="1000" Width="800">
    <ListView x:Name="listView1">
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal">   
                </StackPanel>
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>            
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid HorizontalAlignment="Center" VerticalAlignment="Bottom">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="200"/>
                        <RowDefinition Height="13"/>
                    </Grid.RowDefinitions>
                    <Grid Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Bottom">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="13"/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>
                        <Rectangle Grid.Row="1" Height="{Binding Path=Value}" Fill="Green" Width="50" Stroke="Green" VerticalAlignment="Bottom"></Rectangle>
                        <TextBlock Grid.Row="0" Text="{Binding Path=Value}" VerticalAlignment="Bottom" HorizontalAlignment="Center"/>
                    </Grid>
                    <TextBlock Grid.Row="2" Margin="5,0" Text="{Binding Path=Year}" VerticalAlignment="Bottom" HorizontalAlignment="Center"/>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Window>

效果图：

Blend自动生成的ControlTemplate与Style结合的代码：

	<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="{x:Type TextBox}">
						<Themes:ListBoxChrome x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderFocused="{TemplateBinding IsKeyboardFocusWithin}" SnapsToDevicePixels="true">
							<ScrollViewer x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
						</Themes:ListBoxChrome>
						<ControlTemplate.Triggers>
							<Trigger Property="IsEnabled" Value="false">
								<Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
								<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
							</Trigger>
						</ControlTemplate.Triggers>
					</ControlTemplate>
				</Setter.Value>
			</Setter>

11.4 Datatemplate与ControlTemplate的关系与应用

11.4.1 DataTemplate与ControlTemplate的关系

决定控件外观的是ControlTemplate，决定数据外观的是DataTemplate，它们正是Control类的Template和ContentTemplate两个属性的值。

11.4.2 DataTemplate与ControlTemplate的应用

为Template设置其应用目标有两种方法，一种是逐个设置控件的Template/ContentTemplate/ItemsTemplate/CellTemplate，不想应用Template的控件不设置；另一种是整体应用，即把Template应用在某个类型的控件或数据上。

把ControlTemplate应用在所有目标上需要借助Style来实现，但Style不能标记x:Key。

    <Window.Resources>
        <Style TargetType="{x:Type TextBox}">
            <Setter Property="BorderBrush" Value="Black"/>
            <Setter Property="Margin" Value="5"/>
            <Setter Property="Height" Value="25"/>
        </Style>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="5"/>
            <RowDefinition Height="50"/>
            <RowDefinition Height="5"/>
            <RowDefinition Height="50"/>
        </Grid.RowDefinitions>
        <TextBox Text="月光宝盒" Width="100" Grid.Row="0"/>
        <TextBox Text="大话西游" Width="100" Grid.Row="2"/>
        <TextBox Text="No Style" Width="100" Grid.Row="4" Style="{x:Null}"/>
    </Grid>

Style没有x:Key标记，默认为应用到所有由x:Type指定的控件上，如果不想应用则需要把控件的Style标记为{x:Null}。

把DataTemplate应用在某个数据类型上的方法是设置DataTemplate的DataType属性，并且DataTemplate作为资源时也不能带有x:Key标记。

<Window x:Class="FirstWpfApplication.MainWindow"
        x:ClassModifier="public"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:data="clr-namespace:System.Windows.Data;assembly=PresentationFramework"
        xmlns:objs="clr-namespace:FirstWpfApplication.Objects"
        xmlns:col="clr-namespace:System.Collections;assembly=mscorlib"
        Title="资源" Height="1000" Width="800">
    
    <Window.Resources>
        <!--Point out the target type-->
        <DataTemplate DataType="{x:Type objs:Price}">
            <Grid HorizontalAlignment="Center" VerticalAlignment="Bottom">
                <Grid.RowDefinitions>
                    <RowDefinition Height="200"/>
                    <RowDefinition Height="13"/>
                </Grid.RowDefinitions>
                <Grid Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Bottom">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="13"/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <Rectangle Grid.Row="1" Height="{Binding Path=Value}" Fill="Green" Width="50" Stroke="Green" VerticalAlignment="Bottom"></Rectangle>
                    <TextBlock Grid.Row="0" Text="{Binding Path=Value}" VerticalAlignment="Bottom" HorizontalAlignment="Center"/>
                </Grid>
                <TextBlock Grid.Row="2" Margin="5,0" Text="{Binding Path=Year}" VerticalAlignment="Bottom" HorizontalAlignment="Center"/>
            </Grid>
        </DataTemplate>
        
        <!--数据源-->
        <col:ArrayList x:Key="ds">
            <objs:Price Year="2001" Value="100"/>
            <objs:Price Year="2002" Value="32"/>
            <objs:Price Year="2003" Value="135"/>
            <objs:Price Year="2004" Value="76"/>
            <objs:Price Year="2005" Value="99"/>
            <objs:Price Year="2006" Value="122"/>
            <objs:Price Year="2007" Value="55"/>
            <objs:Price Year="2008" Value="67"/>
        </col:ArrayList>
    </Window.Resources>
    
    <ListView x:Name="listView1" ItemsSource="{StaticResource ResourceKey=ds}">
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal">   
                </StackPanel>
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>            
    </ListView>
</Window>