devbox
秋刀鱼在做梦
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

WPF 深入浅出 模板（DataTemplate 数据外衣、ControlTemplate 控件外衣、ItemsPanelTemplate 项布局

作者：秋刀鱼在做梦 | 2024-08-04 16:07:12

赞

踩

itemspaneltemplate

一、模板内函

模板就是“具有一定规格的样板”，有了模板，就可以依据它制造出很多一样的实例。

模板分为三大类：

DataTemplate 数据外衣

ControlTemplate 控件外衣

ItemsPanelTemplate 项布局（如：ListBox的item）


<Application.Resources>

<Style>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate></ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<DataTemplate></DataTemplate>

</Application.Resources>

二、DataTemplate 数据外衣（使用数据驱动）

效果：

代码：

  1.     public class Car
  2.     {
  3.         public string Automake { get; set; }
  4.         public string Name { get; set; }
  5.         public string Year { get; set; }
  6.         public string TopSpeed { get; set; }
  7.     }

  1.     //厂商名称转换成Logo图片路径
  2.     public class AutomakerTologoPathConverter:IValueConverter
  3.     {
  4.  
  5.         public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
  6.         {
  7.             string uriStr = string.Format(@"/Resources/Images/{0}.jpg", (string)value);
  8.             return new BitmapImage(new Uri(uriStr, UriKind.Relative));
  9.         }
  10.  
  11.         public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
  12.         {
  13.             throw new NotImplementedException();
  14.         }
  15.     }

窗体代码： 

  1. <Window x:Class="WpfApplication.Window15"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         xmlns:local="clr-namespace:WpfApplication"
  5.         Title="Window15" Height="400" Width="700">
  6.     
  7.     <Window.Resources>
  8.         <local:AutomakerTologoPathConverter x:Key="n2p"/>
  9.         <!--详细页外衣-->
  10.         <DataTemplate x:Key="carDetailViewTemplate">
  11.             <Border BorderBrush="Black" BorderThickness="1" CornerRadius="6">
  12.                 <StackPanel Margin="5">
  13.                     <Image Width="400" Height="250"
  14.                            Source="{Binding Automake,Converter={StaticResource n2p}}"/>
  15.                     <StackPanel Orientation="Horizontal" Margin="5,0">
  16.                         <TextBlock Text="Name:" FontWeight="Bold" FontSize="20"/>
  17.                         <TextBlock Text="{Binding Name}" FontSize="20" Margin="5,0"/>
  18.                     </StackPanel>
  19.                     <StackPanel Orientation="Horizontal" Margin="5,0">
  20.                         <TextBlock Text="Automake:" FontWeight="Bold"/>
  21.                         <TextBlock Text="{Binding Automaker}" Margin="5,0"/>
  22.                         <TextBlock Text="Year:" FontWeight="Bold" />
  23.                         <TextBlock Text="{Binding Year}" Margin="5,0"/>
  24.                         <TextBlock Text="TopSpeed:" FontWeight="Bold" />
  25.                         <TextBlock Text="{Binding TopSeed}" Margin="5,0"/>
  26.                     </StackPanel>
  27.                 </StackPanel>
  28.             </Border>
  29.         </DataTemplate>
  30.         <!--列表外衣-->
  31.        <DataTemplate x:Key="carListItemViewTemplate">
  32.             <Grid Margin="2">
  33.                 <StackPanel Orientation="Horizontal">
  34.                     <Image Source="{Binding Automake, Converter={StaticResource n2p}}" Grid.RowSpan="3" Width="64" Height="64"/>
  35.                     <StackPanel Margin="5,0">
  36.                         <TextBlock Text="{Binding Name}" FontSize="16" FontWeight="Bold"/>
  37.                         <TextBlock Text="{Binding Year}" FontSize="14"/>
  38.                     </StackPanel>
  39.                 </StackPanel>
  40.             </Grid>
  41.         </DataTemplate>
  42.     </Window.Resources>
  43.     
  44.     <!--窗体内容-->
  45.     <StackPanel Orientation="Horizontal" Margin="5">
  46.         <UserControl ContentTemplate="{StaticResource carDetailViewTemplate}"
  47.                      Content="{Binding SelectedItem,ElementName=listboxCars}"/>
  48.         
  49.         <ListBox x:Name="listboxCars" Width="180" Margin="5,0" 
  50.                  ItemTemplate="{StaticResource carListItemViewTemplate}"/>
  51.     </StackPanel>
  52. </Window>

ContentTemplate="{StaticResource carDetailViewTemplate}"   给用户控件添加外衣

ItemTemplate="{StaticResource carListItemViewTemplate}"     给ListBox每个Item项添加外衣



  1.     public partial class Window15 : Window
  2.     {
  3.         public Window15()
  4.         {
  5.             InitializeComponent();
  6.             InitialCarList();
  7.         }
  8.  
  9.         private void InitialCarList()
  10.         {
  11.             List<Car> carList = new List<Car>()
  12.             {
  13.                new Car(){Automake="4",Name="name1",Year="1999",TopSpeed="300"},
  14.                new Car(){Automake="5",Name="name2",Year="1990",TopSpeed="150"},
  15.                new Car(){Automake="4",Name="name3",Year="1991",TopSpeed="350"},
  16.                new Car(){Automake="5",Name="name4",Year="1995",TopSpeed="400"},
  17.             };
  18.             listboxCars.ItemsSource = carList;
  19.         }
  20.     }


三、ControlTemplate 控件外衣

    <Application.Resources>
        <Style x:Key="键名" BasedOn="{x:Null}" TargetType="{x:Type TextBox}">
              <!---属性简单直接value,属性复杂就Setter.Value->
                 <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
                 <Setter Property="Template">
                                    <Setter.Value>
                                                         <ControlTemplate TargetType="{x:Type TextBox}">
                                                                   外衣
                                                                  <ControlTemplate.Triggers>
                                                                        <Trigger>
                                                                           触发器
                                                                        </Trigger>
                                                                </ControlTemplate.Triggers>
                                                       </ControlTemplate>
                                     </Setter.Value>
                </Setter>
        </Style>
       <Application.Resources>


实例：输入文本框，边圆角

第一步：控件模板

  1. 	<Application.Resources>
  2. 		<LinearGradientBrush x:Key="TextBoxBorder" EndPoint="0,20" MappingMode="Absolute" StartPoint="0,0">
  3. 			<GradientStop Color="#ABADB3" Offset="0.05"/>
  4. 			<GradientStop Color="#E2E3EA" Offset="0.07"/>
  5. 			<GradientStop Color="#E3E9EF" Offset="1"/>
  6. 		</LinearGradientBrush>
  7. 		<Style x:Key="RoundCornerTextBoxStyle" BasedOn="{x:Null}" TargetType="{x:Type TextBox}">
  8. 			<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
  9. 			<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
  10. 			<Setter Property="BorderBrush" Value="{StaticResource TextBoxBorder}"/>
  11. 			<Setter Property="BorderThickness" Value="1"/>
  12. 			<Setter Property="Padding" Value="1"/>
  13. 			<Setter Property="AllowDrop" Value="true"/>
  14. 			<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
  15. 			<Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
  16. 			<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
  17. 			<Setter Property="Template">
  18. 				<Setter.Value>
  19. 					<ControlTemplate TargetType="{x:Type TextBox}">
  20.                        <Border x:Name="Bd" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="5">
  21. 						<ScrollViewer x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
  22. 					   </Border>
  23.  
  24. 						<ControlTemplate.Triggers>
  25. 							<Trigger Property="IsEnabled" Value="false">
  26. 								<Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
  27. 								<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
  28. 							</Trigger>
  29. 						</ControlTemplate.Triggers>
  30. 					</ControlTemplate>
  31. 				</Setter.Value>
  32. 			</Setter>
  33. 		</Style>
  34. 	<!-- 应该在此定义应用程序级的资源。-->
  35. 	</Application.Resources>

注意：TemplateBinding 将自己的属性关联到目标控件的某个属性上。


第二步：样式绑定模板

<TextBox Style="{DynamicResource RoundCornerTextBoxStyle}"/>


四、ItemsControl的PanelTemplate

      控制 ItemControl条目容器

        <ListBox>


            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>    条目会包装放到一个水平排列的StackPanel中
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>


            <!--条目-->
            <TextBlock Text="A"/>
            <TextBlock Text="B"/>
            <TextBlock Text="C"/>
            <TextBlock Text="D"/>


        </ListBox>



五、DataTemplate 与 ControlTemplate 的关系与应用

决定控件外观的是 ControlTemplate,  是控件                  Template 属性的值。
决定数据外观的是 DataTemplate    ,   是控件   ContentTemplate 属性的值。





       ContentPresenter(内容content，内容位置，内容模板 contentTemplate) 控件是ControlTemplate控件树的一个结点。
       DataTemplate 控件树是 ControlTemplae控件树的一颗子树。



1、所有目标样式

<Window>
  <Style TargetType="{x:Type TextBox}">
    <Setter Property="Template">
         <Setter.Value>
            <ControlTemplate TargetType="{x:Type TextBox}">
                控件模板
            </ControlTemplate>
        </Setter.Value>
    </Setter>
  </Style>

  <StackPanel>
  <TextBox/>
  <TextBox Style="{x:null}" text="不应用样式"/>
  </StackPanel>
</Window>


2、设置 DataTemplate 的 DataType 属性，可以把 DataTemplate 应用在那种数据类型上。

效果：


代码：

创建数据类型

  1.     public class Unit
  2.     {
  3.         public int Price { get; set; }
  4.         public string Year { get; set; }
  5.     }

数据类型模板、数据类型源

<Window x:Class="WpfApplication.Window17"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication"
        xmlns:c="clr-namespace:System.Collections;assembly=mscorlib"
        Title="Window17" Height="300" Width="300">
    <Window.Resources>
        <!--数据类型 （模板）-->
        <DataTemplate DataType="{x:Type local:Unit}">
            <Grid>
                <StackPanel Orientation="Horizontal">
                    <Grid>
                        <Rectangle Stroke="Yellow" Fill="Orange" Width="{Binding Price}"/>
                        <TextBlock Text="{Binding Year}"/>
                    </Grid>
                    <TextBlock Text="{Binding Price}" Margin="5,0"/>
                </StackPanel>
            </Grid>
        </DataTemplate>
        <!--数据类型 （源）-->
        <c:ArrayList x:Key="ds">
            <local:Unit Year="2001年" Price="100"/>
            <local:Unit Year="2002年" Price="150"/>
            <local:Unit Year="2003年" Price="180"/>
        </c:ArrayList>
    </Window.Resources>
    <StackPanel>
        <!--绑定数据类型源-->
        <ListBox ItemsSource="{StaticResource ds}"/>
        <ComboBox ItemsSource="{StaticResource ds}"/>
    </StackPanel>
</Window>



3、XmlDataProvider 做为数据源

<Window x:Class="WpfApplication.Window17"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication"
        xmlns:c="clr-namespace:System.Collections;assembly=mscorlib">
    <Window.Resources>
        <!--数据类型 （模板）-->
        <DataTemplate DataType="Unit">
            <Grid>
                <StackPanel Orientation="Horizontal">
                    <Grid>
                        <Rectangle Stroke="Yellow" Fill="Orange" Width="{Binding XPath=@Price}"/>
                        <TextBlock Text="{Binding XPath=@Year}"/>
                    </Grid>
                    <TextBlock Text="{Binding XPath=@Price}" Margin="5,0"/>
                </StackPanel>
            </Grid>
        </DataTemplate>
        <XmlDataProvider x:Key="ds" XPath="Units/Unit">
            <x:XData>
                <Units xmlns="">
                    <Unit Year="2001" Price="150"/>
                    <Unit Year="2002" Price="180"/>
                    <Unit Year="2003" Price="200"/>
                </Units>
            </x:XData>
        </XmlDataProvider>
        
    </Window.Resources>
    <StackPanel>
        <!--绑定数据类型源-->
        <ListBox ItemsSource="{Binding Source={StaticResource ds}}"/>
        <ComboBox ItemsSource="{Binding Source={StaticResource ds}}"/>
    </StackPanel>
</Window>


4、TreeView  显示多层级，不同类型的数据。因为数据类型不同，我们需要每种数据类型设置一种模板。

       使用层级数据模板 HierarchicalDataTemplate


xml数据

  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <Data xmlns="">
  3.   <Grade Name="一年级">
  4.     <Class Name="甲班">
  5.       <Group Name="A组"/>
  6.       <Group Name="B组"/>
  7.     </Class>
  8.   </Grade>
  9. </Data>

  1. <Window x:Class="AutomaticConfigurationAPP.Window3"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         Title="Window3" Height="300" Width="300">
  5.     <Window.Resources>
  6.         <!--Source数据源 XPath数据源路径-->
  7.         <XmlDataProvider x:Key="ds" Source="/Resources/Xml/Data.xml" XPath="Data/Grade"/>
  8.         
  9.         <!--年级模板-->
  10.         <HierarchicalDataTemplate DataType="Grade" ItemsSource="{Binding XPath=Class}">
  11.             <TextBlock Text="{Binding XPath=@Name}" />
  12.         </HierarchicalDataTemplate>
  13.  
  14.         <!--班级模板-->
  15.         <HierarchicalDataTemplate DataType="Class" ItemsSource="{Binding XPath=Group}">
  16.             <RadioButton Content="{Binding XPath=@Name}" GroupName="gn"/>
  17.         </HierarchicalDataTemplate>
  18.         <!--小组模板-->
  19.         <HierarchicalDataTemplate DataType="Group">
  20.             <CheckBox Content="{Binding XPath=@Name}"/>
  21.         </HierarchicalDataTemplate>      
  22.     </Window.Resources>
  23.     
  24.     <Grid>
  25.         <TreeView Margin="5" ItemsSource="{Binding Source={StaticResource ds}}"/>
  26.     </Grid>
  27. </Window>


5、同一种数据类型的嵌套结构。

      只设计一个 HierarchicalDataTemplate ,会自动产生迭代效果。


效果：


  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <Data xmlns="">
  3.   <Operation Name="文件" Gesture="F">
  4.     <Operation Name="新建" Gesture="N">
  5.       <Operation Name="项目" Gesture="Control + P"/>
  6.       <Operation Name="网站" Gesture="Control + W"/>
  7.     </Operation>
  8.   </Operation>
  9. </Data>


  1. <Window x:Class="AutomaticConfigurationAPP.Window4"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         Title="Window4" Height="300" Width="300">
  5.     <Window.Resources>
  6.         <!--Source数据源 XPath数据路径-->
  7.         <XmlDataProvider x:Key="ds" Source="/Resources/Xml/Data2.xml" XPath="Data/Operation"/>
  8.  
  9.         <!--数据模板-->
  10.         <HierarchicalDataTemplate DataType="Operation" ItemsSource="{Binding XPath=Operation}">
  11.             <StackPanel Orientation="Horizontal">
  12.                 <TextBlock Text="{Binding XPath=@Name}" Margin="10,0"/>
  13.                 <TextBlock Text="{Binding XPath=@Gesture}"/>
  14.             </StackPanel>          
  15.         </HierarchicalDataTemplate>
  16.         
  17.     </Window.Resources>
  18.     
  19.     <StackPanel MenuItem.Click="StackPanel_Click">
  20.         <Menu ItemsSource="{Binding Source={StaticResource ds}}"/>
  21.     </StackPanel>
  22.        
  23. </Window>


  1.         private void StackPanel_Click(object sender, RoutedEventArgs e)
  2.         {
  3.             MenuItem mi = e.OriginalSource as MenuItem;
  4.             //HierarchicalDataTemplate 作用的目标是MenuItem.Header
  5.             XmlElement xe = mi.Header as XmlElement;
  6.             MessageBox.Show(xe.Attributes["Name"].Value);
  7.  
  8.         }


六、从外部访问 Template （模板）的控件、获取它的属性值

        DataTemplate 和 ControlTemplate 两个类均派生自 FrameWorkTemplate类。这个类有个 FindName方法 供我们查询内部控件。

        ControlTemplate 对象： 访问其目标控件 Template . FindName就能拿到。

        DataTemplate 对象：     直接使用低层数据（如果想获得控件长度、宽度 Template . FindName）。


1、获得ControlTemplate 中的控件。

效果：



<Window x:Class="AutomaticConfigurationAPP.Window5"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window5" Height="300" Width="300">
    <Window.Resources>
        <ControlTemplate x:Key="cTmp">
            <StackPanel Background="Orange">
               <TextBox x:Name="textbox1" Margin="6"/>
                <TextBox x:Name="textbox2" Margin="6,0"/>
                <TextBox x:Name="textbox3" Margin="6"/>
            </StackPanel>
        </ControlTemplate>
    </Window.Resources>
    <StackPanel Background="Yellow">
        <UserControl x:Name="uc" Template="{StaticResource cTmp}" Margin="5"/>
        <Button Content="FindName" Click="Button_Click"/>
    </StackPanel>
</Window>

事件

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            //Template.FindName
            TextBox tb= uc.Template.FindName("textbox1", this.uc) as TextBox;

            tb.Text = "textbox1";
            StackPanel sp = tb.Parent as StackPanel;
            (sp.Children[1] as TextBox).Text = "textbox2";
            (sp.Children[2] as TextBox).Text = "textbox3";
        }


2、获得DataTemplate 中的控件。

     如果获得与用户界面相关的数据（比如控件的宽度、高度）ContentTemplate.FindName("")。

     如果获得与业务相关的数据，直接访问底层（WPF采用数据驱动UI逻辑）Content

效果：

  1.     public class Student
  2.     {
  3.         public int Id { get; set; }
  4.         public string Name { get; set; }
  5.         public string Skill { get; set; }
  6.         public bool HasJob { get; set; }
  7.     }

XAML

<Window x:Class="AutomaticConfigurationAPP.Window6"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:AutomaticConfigurationAPP"
        Title="Window6" Height="300" Width="300">
    <Window.Resources>
        <local:Student x:Key="stu" Id="1" Name="姓名" Skill="wpf" HasJob="True"/>
        
        <DataTemplate x:Key="stuDT">
            <Border BorderBrush="Orange" BorderThickness="2" CornerRadius="5">
                <StackPanel>
                    <TextBlock Text="{Binding Id}" Margin="5"/>
                    <TextBlock x:Name="textblockname" Text="{Binding Name}" Margin="5"/>
                    <TextBlock Text="{Binding Skill}" Margin="5"/>
                </StackPanel>
            </Border>
        </DataTemplate>
    </Window.Resources>
    <StackPanel>
        <ContentPresenter x:Name="cp" 
                          Content="{StaticResource stu}" 
                          ContentTemplate="{StaticResource stuDT}"
                          Margin="5"/>
        <!--Content="{StaticResource 内容数据源}" ContentTemplate="{StaticResource 内容模板}"-->
        <Button Content="Find" Margin="5,0" Click="Button_Click"/>
    </StackPanel>
</Window>


C#

           //内容模板查找控件
           TextBlock tb= this.cp.ContentTemplate.FindName("textblockname", this.cp) as TextBlock;
           MessageBox.Show(tb.Text);


           //直接使用底层数据
           Student stu = this.cp.Content as Student;
           MessageBox.Show(stu.Name);



实例：访问业务逻辑数据、访问界面逻辑数据

界面：



XAML


<Window x:Class="AutomaticConfigurationAPP.Window2"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:c="clr-namespace:System.Collections;assembly=mscorlib"
        xmlns:local="clr-namespace:AutomaticConfigurationAPP"
        Title="Window2" Height="300" Width="300">
    <Window.Resources>
        <c:ArrayList x:Key="stuList">
            <local:Student Id="1" Name="a" Skill="wpf" HasJob="True"/>
            <local:Student Id="2" Name="b" Skill="MVC" HasJob="True"/>
            <local:Student Id="3" Name="c" Skill="c#" HasJob="True"/>
        </c:ArrayList>
        <DataTemplate x:Key="nameDT">
            <TextBox x:Name="textboxname" Text="{Binding Name}" GotFocus="textboxname_GotFocus"/>
        </DataTemplate>
        <DataTemplate x:Key="skillDT">
            <TextBox x:Name="textboxskill" Text="{Binding Skill}"/>
        </DataTemplate>
        <DataTemplate x:Key="hasjobDT">
            <CheckBox x:Name="checkboxJob" IsChecked="{Binding HasJob}"/>
        </DataTemplate>
    </Window.Resources>
    <Grid Margin="5">
        <ListView x:Name="listviewStudent" ItemsSource="{StaticResource stuList}">
            <ListView.View>


                <!--ListView的View属性是GridView-->
                <GridView>
                    <GridViewColumn Header="ID" DisplayMemberBinding="{Binding Id}"/>
                    <!--CellTemplate是TextBox-->
                    <GridViewColumn Header="姓名" CellTemplate="{StaticResource nameDT}"/>
                    <GridViewColumn Header="技能" CellTemplate="{StaticResource skillDT}"/>
                    <GridViewColumn Header="已工作" CellTemplate="{StaticResource hasjobDT}"/>
                </GridView>
                
            </ListView.View>
        </ListView>


    </Grid>
</Window>


c#

        private void textboxname_GotFocus(object sender, RoutedEventArgs e)
        {
            //访问业务逻辑数据
            TextBox tb = e.OriginalSource as TextBox;//获得事件的源头（TextBox）
            //沿UI元素树上溯到DataTemplate的目标控件（ContentPresenter），并获取它内容，它内容一定是个Student
            ContentPresenter cp = tb.TemplatedParent as ContentPresenter;
            Student stu = cp.Content as Student;//一行
            //MessageBox.Show(stu.HasJob.ToString());
            this.listviewStudent.SelectedItem = stu;


            //访问界面逻辑数据
            //查找包含的ListViewItem
            ListViewItem lvi = this.listviewStudent.ItemContainerGenerator.ContainerFromItem(stu) as ListViewItem;
            CheckBox chb = this.FindVisualChild<CheckBox>(lvi);
            MessageBox.Show(chb.Name);


        }


        private ChildType FindVisualChild<ChildType>(DependencyObject obj)
            where ChildType:DependencyObject
        {
            //可视化对象包含的子集个数
            for (int i = 0; i < VisualTreeHelper.GetChildrenCount(obj); i++)
            {
                //返回指定父可视对象中位于指定集合索引位置的子可视对象
                DependencyObject child = VisualTreeHelper.GetChild(obj, i);
                if (child != null && child is ChildType)
                {
                    return child as ChildType;
                }
                else
                {
                    ChildType childofChild = FindVisualChild<ChildType>(child);
                    if (childofChild != null)
                        return childofChild;
                }
            }
            return null;
        }


七、Style 样式

Style样式包含两种元素：

Setter类  设置控件静态的外观。

Trigger类 设置控件行为的风格。


实例一：模板绑定Padding属性的值，并使用属性值在ContentPresenter 元素周围创建外边距。



  1.             <Button Margin="5" Padding="5" Background="Black" Template="{Binding Source={StaticResource ButtonTemplate}}">
  2.                 控件模板
  3.             </Button>

  1.     <Window.Resources>
  2.         <ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Button}">
  3.             <Border Name="borderName" 
  4.                     BorderBrush="Orange" 
  5.                     BorderThickness="3" 
  6.                     CornerRadius="2"
  7.                     Background="Red" 
  8.                     TextBlock.Foreground="White">
  9.  
  10.                 <!-- ContentPresenter 就是負責將Content屬性顯示出來 -->
  11.                 <!--模板绑定：模板从 应用模板 中获取值 Margin="{TemplateBinding Padding}"-->
  12.                 <ContentPresenter  
  13.                     RecognizesAccessKey="True" 
  14.                     Margin="{TemplateBinding Padding}">
  15.                     
  16.                 </ContentPresenter>
  17.             </Border>
  18.             <ControlTemplate.Triggers>
  19.                 <Trigger Property="IsMouseOver" Value="True">
  20.                     <Setter TargetName="borderName" Property="Background" Value="DarkRed"/>
  21.                 </Trigger>
  22.                 <Trigger Property="IsPressed" Value="True">
  23.                     <Setter TargetName="borderName" Property="Background" Value="IndianRed"/>
  24.                     <Setter TargetName="borderName" Property="BorderBrush" Value="DarkKhaki"/>
  25.                 </Trigger>
  26.             </ControlTemplate.Triggers>
  27.         </ControlTemplate>
  28.     </Window.Resources>


实例二：动画按钮

    <Window.Resources>
        <ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Button}">
            <Border BorderBrush="Orange" 
                    BorderThickness="3" 
                    CornerRadius="2"
                    Background="Red" 
                    TextBlock.Foreground="White" 
                    Name="Border">
                <Grid>
                    <Rectangle Name="FocusCue" 
                               Visibility="Hidden" 
                               Stroke="Black"
                               StrokeThickness="1" 
                               StrokeDashArray="1 2"
                               SnapsToDevicePixels="True" >
                        
                    </Rectangle>
                    <ContentPresenter RecognizesAccessKey="True"
                                 Margin="{TemplateBinding Padding}">
                        
                    </ContentPresenter>
                </Grid>
            </Border>
            <ControlTemplate.Triggers>
                <EventTrigger RoutedEvent="MouseEnter">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="Background.Color"
                                            To="Blue" Duration="0:0:1" AutoReverse="True" RepeatBehavior="Forever"></ColorAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="MouseLeave">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="Background.Color" Duration="0:0:0.5"></ColorAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <Trigger Property="IsPressed" Value="True">
                    <Setter TargetName="Border" Property="Background" Value="IndianRed" />
                    <Setter TargetName="Border" Property="BorderBrush" Value="DarkKhaki" />
                </Trigger>
                <Trigger Property="IsKeyboardFocused" Value="True">
                    <Setter TargetName="FocusCue" Property="Visibility" Value="Visible" />
                </Trigger>

            </ControlTemplate.Triggers>
        </ControlTemplate>

    </Window.Resources>


实例三：修改LIstBox样式（嵌套模板）。


步骤：

1、ItemsPresenter 外观（ListBox）

2、ContentPresenter 外观（ListBoxItem）

3、ScrollBar外观



  1. <Window x:Class="AutomaticConfigurationAPP.Window1"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         Title="Window1" Height="300" Width="300">
  5.     <Window.Resources>
  6.         <!--单色画刷-->
  7.         <SolidColorBrush x:Key="StandardBorderBrush" Color="#888" />
  8.         <SolidColorBrush x:Key="HoverBorderBrush" Color="#DDD" />
  9.         <SolidColorBrush x:Key="SelectedBackgroundBrush" Color="Gray" />
  10.         <SolidColorBrush x:Key="SelectedForegroundBrush" Color="White" />
  11.         <LinearGradientBrush x:Key="ListBoxBackgroundBrush" StartPoint="0,0" EndPoint="1,0.001">
  12.             <GradientBrush.GradientStops>
  13.                 <GradientStopCollection>
  14.                     <GradientStop Color="White" Offset="0.0" />
  15.                     <GradientStop Color="White" Offset="0.6" />
  16.                     <GradientStop Color="#DDDDDD" Offset="1.2"/>
  17.                 </GradientStopCollection>
  18.             </GradientBrush.GradientStops>
  19.         </LinearGradientBrush>
  20.  
  21.         <LinearGradientBrush x:Key="StandardBrush" StartPoint="0,0" EndPoint="0,1">
  22.             <GradientBrush.GradientStops>
  23.                 <GradientStopCollection>
  24.                     <GradientStop Color="#FFF" Offset="0.0"/>
  25.                     <GradientStop Color="#CCC" Offset="1.0"/>
  26.                 </GradientStopCollection>
  27.             </GradientBrush.GradientStops>
  28.         </LinearGradientBrush>
  29.  
  30.         <SolidColorBrush x:Key="GlyphBrush" Color="#444" />
  31.         <LinearGradientBrush x:Key="PressedBrush" StartPoint="0,0" EndPoint="0,1">
  32.             <GradientBrush.GradientStops>
  33.                 <GradientStopCollection>
  34.                     <GradientStop Color="#BBB" Offset="0.0"/>
  35.                     <GradientStop Color="#EEE" Offset="0.1"/>
  36.                     <GradientStop Color="#EEE" Offset="0.9"/>
  37.                     <GradientStop Color="#FFF" Offset="1.0"/>
  38.                 </GradientStopCollection>
  39.             </GradientBrush.GradientStops>
  40.         </LinearGradientBrush>
  41.  
  42.         <!--滚动条按钮为圆圈-->
  43.         <Style x:Key="ScrollBarLineButtonStyle" TargetType="{x:Type RepeatButton}">
  44.             <Setter Property="Focusable" Value="False"/>
  45.             <Setter Property="Template">
  46.                 <Setter.Value>
  47.                     <ControlTemplate TargetType="{x:Type RepeatButton}">
  48.                         <Grid Margin="1">
  49.                             <Ellipse Name="Border" StrokeThickness="1" Stroke="{StaticResource StandardBorderBrush}"
  50.                      Fill="{StaticResource StandardBrush}"></Ellipse>
  51.                             <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"></ContentPresenter>
  52.                         </Grid>
  53.                         <ControlTemplate.Triggers>
  54.                             <Trigger Property="IsPressed" Value="true">
  55.                                 <Setter TargetName="Border" Property="Fill" Value="{StaticResource PressedBrush}" />
  56.                             </Trigger>
  57.                         </ControlTemplate.Triggers>
  58.                     </ControlTemplate>
  59.                 </Setter.Value>
  60.             </Setter>
  61.         </Style>
  62.         <!--滚动条Thumb上的RepeatButton对象，背景为透明-->
  63.         <Style x:Key="ScrollBarPageButtonStyle" TargetType="{x:Type RepeatButton}">
  64.             <Setter Property="IsTabStop" Value="False"/>
  65.             <Setter Property="Focusable" Value="False"/>
  66.             <Setter Property="Template">
  67.                 <Setter.Value>
  68.                     <ControlTemplate TargetType="{x:Type RepeatButton}">
  69.                         <Border Background="Transparent" />
  70.                     </ControlTemplate>
  71.                 </Setter.Value>
  72.             </Setter>
  73.         </Style>
  74.         <!--滚动条Thumb形状为椭圆-->
  75.         <Style x:Key="ScrollBarThumbStyle" TargetType="{x:Type Thumb}">
  76.             <Setter Property="IsTabStop" Value="False"/>
  77.             <Setter Property="Focusable" Value="False"/>
  78.             <Setter Property="Margin" Value="1,0,1,0" />
  79.             <Setter Property="Background" Value="{StaticResource StandardBrush}" />
  80.             <Setter Property="BorderBrush" Value="{StaticResource StandardBorderBrush}" />
  81.             <Setter Property="Template">
  82.                 <Setter.Value>
  83.                     <ControlTemplate TargetType="{x:Type Thumb}">
  84.                         <Ellipse Stroke="{StaticResource StandardBorderBrush}"
  85.                      Fill="{StaticResource StandardBrush}"></Ellipse>
  86.                     </ControlTemplate>
  87.                 </Setter.Value>
  88.             </Setter>
  89.         </Style>
  90.  
  91.         <ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}">
  92.             <Grid>
  93.                 <!--滚动条包含三行网格。顶部，低部放按钮。中间Track元素-->
  94.                 <Grid.RowDefinitions>
  95.                     <RowDefinition MaxHeight="18"/>
  96.                     <RowDefinition Height="*"/>
  97.                     <RowDefinition MaxHeight="18"/>
  98.                 </Grid.RowDefinitions>
  99.  
  100.                 <RepeatButton 
  101.                     Grid.Row="0" 
  102.                     Height="18"
  103.                     Style="{StaticResource ScrollBarLineButtonStyle}"
  104.                     Command="ScrollBar.LineUpCommand" >
  105.                     <!--绘制向上箭头的Path对象（箭头使用，微语言路径）-->
  106.                     <Path
  107.                        Fill="{StaticResource GlyphBrush}"
  108.                        Data="M 0 4 L 8 4 L 4 0 Z">
  109.                     </Path>
  110.                 </RepeatButton>
  111.  
  112.                 <!--Track名称必须是PART_Track，为了使ScrollBar能成功关联到它的代码-->
  113.                 <!--ViewportSize="0" 尺度更具内容变化-->
  114.                 <Track 
  115.                     Name="PART_Track" 
  116.                     Grid.Row="1" 
  117.                     IsDirectionReversed="True" 
  118.                     ViewportSize="0">
  119.                     <!--Track封装两个RepeatButton对象和Thumb元素-->
  120.                     <Track.DecreaseRepeatButton>
  121.                         <RepeatButton Command="ScrollBar.PageUpCommand" Style="{StaticResource ScrollBarPageButtonStyle}">
  122.                         </RepeatButton>
  123.                     </Track.DecreaseRepeatButton>
  124.                     <Track.Thumb>
  125.                         <Thumb Style="{StaticResource ScrollBarThumbStyle}">
  126.                         </Thumb>
  127.                     </Track.Thumb>
  128.                     <Track.IncreaseRepeatButton>
  129.                         <RepeatButton Command="ScrollBar.PageDownCommand" Style="{StaticResource ScrollBarPageButtonStyle}">
  130.                         </RepeatButton>
  131.                     </Track.IncreaseRepeatButton>
  132.                 </Track>
  133.  
  134.                 <RepeatButton
  135.                     Grid.Row="3" 
  136.                     Height="18"
  137.                     Style="{StaticResource ScrollBarLineButtonStyle}"
  138.                     Command="ScrollBar.LineDownCommand">
  139.                     <Path              
  140.                        Fill="{StaticResource GlyphBrush}"
  141.                        Data="M 0 0 L 4 4 L 8 0 Z">
  142.                     </Path>
  143.                 </RepeatButton>
  144.  
  145.             </Grid>
  146.         </ControlTemplate>
  147.  
  148.         
  149.         <Style TargetType="{x:Type ScrollBar}">
  150.             <Setter Property="SnapsToDevicePixels" Value="True"/>
  151.             <Setter Property="OverridesDefaultStyle" Value="true"/>
  152.             <Style.Triggers>
  153.                 <!--垂直滚动条模板-->
  154.                 <Trigger Property="Orientation" Value="Vertical">
  155.                     <Setter Property="Width" Value="18"/>
  156.                     <Setter Property="Height" Value="Auto" />
  157.                     <Setter Property="Template" Value="{StaticResource VerticalScrollBar}" />
  158.                 </Trigger>
  159.             </Style.Triggers>
  160.         </Style>
  161.  
  162.         <!-- ItemsPresenter 外观-->
  163.         <Style TargetType="{x:Type ListBox}">
  164.             <Setter Property="Template">
  165.                 <Setter.Value>
  166.                     <ControlTemplate TargetType="{x:Type ListBox}">
  167.                         <!--嵌套模板-->
  168.                         <Border
  169.                             Name="border"
  170.                             Background="{StaticResource ListBoxBackgroundBrush}"
  171.                             BorderBrush="{StaticResource StandardBorderBrush}"
  172.                             BorderThickness="1" CornerRadius="3"
  173.                             >
  174.                             <!--ScrollViewer 容纳所有列表项（ItemsPresenter）-->
  175.                             <ScrollViewer Focusable="False">
  176.                                 <ItemsPresenter Margin="2"></ItemsPresenter>
  177.                             </ScrollViewer>
  178.                         </Border>
  179.                     </ControlTemplate>
  180.                 </Setter.Value>
  181.             </Setter>
  182.         </Style>
  183.         
  184.         <!-- ContentPresenter 外观-->
  185.         <Style TargetType="{x:Type ListBoxItem}">
  186.             <Setter Property="Template">
  187.                 <Setter.Value>
  188.                     <ControlTemplate TargetType="{x:Type ListBoxItem}">
  189.                         <Border
  190.                            Name="Border" 
  191.                            BorderThickness="2" 
  192.                            CornerRadius="3"
  193.                            Padding="1" 
  194.                            SnapsToDevicePixels="True">
  195.                             <ContentPresenter></ContentPresenter>
  196.                         </Border>
  197.                         <ControlTemplate.Triggers>
  198.                             <EventTrigger RoutedEvent="ListBoxItem.MouseEnter">
  199.                                 <EventTrigger.Actions>
  200.                                     <BeginStoryboard>
  201.                                         <Storyboard>
  202.                                             <DoubleAnimation 
  203.                                                 Storyboard.TargetProperty="FontSize"
  204.                                                 To="20" 
  205.                                                 Duration="0:0:1">
  206.                                             </DoubleAnimation>
  207.                                             <!--字体1秒钟=20大小-->
  208.                                         </Storyboard>
  209.                                     </BeginStoryboard>
  210.                                 </EventTrigger.Actions>
  211.                             </EventTrigger>
  212.                             <EventTrigger RoutedEvent="ListBoxItem.MouseLeave">
  213.                                 <EventTrigger.Actions>
  214.                                     <BeginStoryboard>
  215.                                         <Storyboard>
  216.                                             <DoubleAnimation 
  217.                                                 Storyboard.TargetProperty="FontSize"
  218.                                                 BeginTime="0:0:0.5" 
  219.                                                 Duration="0:0:0.2">
  220.                                                 <!--字体延迟0.5秒，0.2秒缩小-->
  221.                                             </DoubleAnimation>
  222.                                         </Storyboard>
  223.                                     </BeginStoryboard>
  224.                                 </EventTrigger.Actions>
  225.                             </EventTrigger>
  226.  
  227.                             <Trigger Property="IsMouseOver" Value="True">
  228.                                 <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource HoverBorderBrush}"/>
  229.                             </Trigger>
  230.                             <Trigger Property="IsSelected" Value="True">
  231.                                 <Setter TargetName="Border" Property="Background" Value="{StaticResource SelectedBackgroundBrush}"/>
  232.                                 <Setter TargetName="Border" Property="TextBlock.Foreground" Value="{StaticResource SelectedForegroundBrush}"/>
  233.                             </Trigger>
  234.                         </ControlTemplate.Triggers>
  235.                     </ControlTemplate>
  236.                 </Setter.Value>
  237.             </Setter>
  238.         </Style>
  239.         
  240.     </Window.Resources>
  241.     <Grid>
  242.          <ListBox Height="100">
  243.             <ListBoxItem Content="1" />
  244.             <ListBoxItem Content="2" />
  245.             <ListBoxItem Content="3" />
  246.             <ListBoxItem Content="4" />
  247.             <ListBoxItem Content="5" />
  248.             <ListBoxItem Content="6" />
  249.             <ListBoxItem Content="7" />
  250.             <ListBoxItem Content="8" />
  251.         </ListBox>
  252.     </Grid>
  253. </Window>


声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/秋刀鱼在做梦/article/detail/928556
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号