zoukankan      html  css  js  c++  java

  • 控件模板、数据模板、面板模板

    

    模板使用方式：首先定义模板，然后在把对应的key应用到控件对应的属性中；
    属性对应：
    控件模板，对应控件的Template；
    数据模板，对应控件的ItemTemplate属性；
    面板模板，对应控件的ItemsPanel属性。

    控件模板：如果控件的样式不能满足，可自定义控件模板来设计样式。
    数据模板：内容控件通过ContentTemplate属性支持数据模板；列表控件(即继承自ItemsControl类的控件)，通过ItemTemplate属性支持数据模板，该模板用于显示由ItemSource提供集合中的每一项。
    面板模板：ItemsPanelTemplate用于指定项的布局。 ItemsControl 类型具有一个类型为ItemsPanelTemplate 的 ItemsPanel 属性。


    一、控件模板：如果控件的样式不能满足，可自定义控件模板来设计样式。





    [csharp] view plain copy print?
    1. <Window.Resources>  
    2.     <ControlTemplate x:Key="roundBtnTemplte">  
    3.         <Grid>  
    4.             <Ellipse Name="roundBtn" Width="100" Height="100" Fill="AliceBlue">  
    5.                   
    6.             </Ellipse>  
    7.             <ContentPresenter Content="{TemplateBinding Button.Content}" VerticalAlignment="Center">  
    8.                   
    9.             </ContentPresenter>  
    10.         </Grid>  
    11.         <ControlTemplate.Triggers>  
    12.             <Trigger Property="IsMouseOver" Value="true">  
    13.                 <Setter TargetName="roundBtn" Property="Fill" Value="Yellow">  
    14.                       
    15.                 </Setter>  
    16.             </Trigger>  
    17.         </ControlTemplate.Triggers>  
    18.     </ControlTemplate>  
    19. </Window.Resources>  
    20. <Grid>  
    21.     <Grid.ColumnDefinitions>  
    22.         <ColumnDefinition Width="1*"></ColumnDefinition>  
    23.         <ColumnDefinition Width="1*"></ColumnDefinition>  
    24.     </Grid.ColumnDefinitions>  
    25.     <StackPanel Margin="10" Grid.Column="0" Orientation="Horizontal">  
    26.         <Button Padding="5" Margin="5" Content="Round Button" Template="{StaticResource   
    27.   
    28. dBtnTemplte}"></Button>  
    29.         <Button Padding="5" Margin="5">nomal button</Button>  
    30.     </StackPanel>  
    31. </Grid>  
        <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>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"></ColumnDefinition>
            <ColumnDefinition Width="1*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <StackPanel Margin="10" Grid.Column="0" Orientation="Horizontal">
            <Button Padding="5" Margin="5" Content="Round Button" Template="{StaticResource 

roundBtnTemplte}"></Button>
            <Button Padding="5" Margin="5">nomal button</Button>
        </StackPanel>
    </Grid>


    2.数据模板：内容控件通过ContentTemplate属性支持数据模板；列表控件(即继承自ItemsControl类的控件)，通过ItemTemplate属性支持数据模板，该模板用于显示由ItemSource提供集合中的每一项。

    [csharp] view plain copy print?
    1. <Window x:Class="WpfApplication1.MainWindow"  
    2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
    4.         xmlns:sys="clr-namespace:System;assembly=mscorlib"  
    5.         Title="MainWindow" Height="350" Width="525">  
    6.     <Window.Resources>  
    7.         <!--创建数据模板-->  
    8.         <HierarchicalDataTemplate  x:Key="NavDataTem" ItemsSource="{Binding Children}">  
    9.             <Border Name="myborder" BorderBrush="AliceBlue" BorderThickness="2" Margin="3">  
    10.                 <StackPanel Orientation="Horizontal" Margin="0,3">  
    11.                     <CheckBox IsChecked="{Binding IsChecked}" Content=""/>  
    12.                     <Image Source="{Binding Icon}" Width="16" Height="16"></Image>  
    13.                     <TextBlock Name="txtOne" Margin="5" FontWeight="Bold" Text="{Binding ItemName}" ></TextBlock>  
    14.                     <TextBlock Name="txtTwo"  Margin="5" Text="{Binding ItemProperty}" ></TextBlock>  
    15.                 </StackPanel>  
    16.             </Border>  
    17.             <HierarchicalDataTemplate.Triggers>  
    18.                 <Trigger SourceName="myborder" Property="IsMouseOver" Value="True">  
    19.                     <Setter TargetName="txtOne" Property="Background" Value="LightGray"></Setter>  
    20.                     <Setter TargetName="txtTwo" Property="FontSize" Value="20"></Setter>  
    21.                 </Trigger>  
    22.             </HierarchicalDataTemplate.Triggers>  
    23.         </HierarchicalDataTemplate>  
    24.          
    25.     </Window.Resources>  
    26.     <StackPanel Margin="5">  
    27.   
    28.         <TreeView Name="treeTest" ScrollViewer.VerticalScrollBarVisibility="Visible"    
    29.                   ItemTemplate="{StaticResource NavDataTem}">  
    30.   
    31.         </TreeView>  
    32.     </StackPanel>  
    33. </Window>  
    <Window x:Class="WpfApplication1.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">
    <Window.Resources>
        <!--创建数据模板-->
        <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>
</Window>

    编码部分：

    [csharp] view plain copy print?
    1. public class NavBarItem : INotifyPropertyChanged  
    2.    {  
    3.        public string ID { get { return Guid.NewGuid().ToString(); } }  
    4.        public string ItemName { get; set; }  
    5.        public string ItemProperty { get; set; }  
    6.        public List<NavBarItem> Children { get; set; }  
    7.        public NavBarItem()  
    8.        {  
    9.            Children = new List<NavBarItem>();  
    10.        }  
    11.   
    12.        public event PropertyChangedEventHandler PropertyChanged;  
    13.        public void OnPropertyChanged(PropertyChangedEventArgs e)  
    14.        {  
    15.            if (PropertyChanged != null)  
    16.                PropertyChanged(this, e);  
    17.        }  
    18.   
    19.    }  
    20.    /// <summary>  
    21.    /// Interaction logic for MainWindow.xaml  
    22.    /// </summary>  
    23.    public partial class MainWindow : Window  
    24.    {  
    25.        List<NavBarItem> _NavBarItems = new List<NavBarItem>();  
    26.         List<NavBarItem> NavBarItems  
    27.         {  
    28.             get { return _NavBarItems; }  
    29.             set { _NavBarItems = value; }  
    30.   
    31.         }  
    32.         
    33.        public MainWindow()  
    34.        {  
    35.              
    36.              
    37.            InitializeComponent();  
    38.   
    39.            treeTest.ItemsSource = NavBarItems;  
    40.            List<NavBarItem> childrenOne = new  List<NavBarItem>();  
    41.            childrenOne.Add(new NavBarItem()  
    42.                {  
    43.                    ItemName = "C++",  
    44.                    ItemProperty = "C++语言"  
    45.                });  
    46.            childrenOne.Add(new NavBarItem()  
    47.            {  
    48.                ItemName = "C",  
    49.                ItemProperty = "C语言"  
    50.            });  
    51.            childrenOne.Add(new NavBarItem()  
    52.            {  
    53.                ItemName = "C#",  
    54.                ItemProperty = "C#语言"  
    55.            });  
    56.            childrenOne.Add(new NavBarItem()  
    57.            {  
    58.                ItemName = "Java",  
    59.                ItemProperty = "Java语言"  
    60.            });  
    61.            
    62.   
    63.            List<NavBarItem> childrenTwo = new List<NavBarItem>();  
    64.            childrenTwo.Add(new NavBarItem()  
    65.            {  
    66.                ItemName = "Windows",  
    67.                ItemProperty = "微软"  
    68.            });  
    69.            childrenTwo.Add(new NavBarItem()  
    70.            {  
    71.                ItemName = "Linux",  
    72.                ItemProperty = "开源"  
    73.   
    74.            });  
    75.            childrenTwo.Add(new NavBarItem()  
    76.            {  
    77.                ItemName = "MacOS",  
    78.                ItemProperty = "苹果"  
    79.            });  
    80.   
    81.            NavBarItems.Add(new NavBarItem()  
    82.            {  
    83.                ItemName = "编程语言",  
    84.                Children = childrenOne  
    85.            });  
    86.            NavBarItems.Add(new NavBarItem()  
    87.            {  
    88.                ItemName = "操作系统",  
    89.                Children = childrenTwo  
    90.            });  
    91.        }  
    92.   
    93.          
    94.    }  
     public class NavBarItem : INotifyPropertyChanged
    {
        public string ID { get { return Guid.NewGuid().ToString(); } }
        public string ItemName { get; set; }
        public string ItemProperty { get; set; }
        public List<NavBarItem> Children { get; set; }
        public NavBarItem()
        {
            Children = new List<NavBarItem>();
        }

        public event PropertyChangedEventHandler PropertyChanged;
        public void OnPropertyChanged(PropertyChangedEventArgs e)
        {
            if (PropertyChanged != null)
                PropertyChanged(this, e);
        }

    }
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        List<NavBarItem> _NavBarItems = new List<NavBarItem>();
         List<NavBarItem> NavBarItems
         {
             get { return _NavBarItems; }
             set { _NavBarItems = value; }

         }
       
        public MainWindow()
        {
            
            
            InitializeComponent();

            treeTest.ItemsSource = NavBarItems;
            List<NavBarItem> childrenOne = new  List<NavBarItem>();
            childrenOne.Add(new NavBarItem()
                {
                    ItemName = "C++",
                    ItemProperty = "C++语言"
                });
            childrenOne.Add(new NavBarItem()
            {
                ItemName = "C",
                ItemProperty = "C语言"
            });
            childrenOne.Add(new NavBarItem()
            {
                ItemName = "C#",
                ItemProperty = "C#语言"
            });
            childrenOne.Add(new NavBarItem()
            {
                ItemName = "Java",
                ItemProperty = "Java语言"
            });
          

            List<NavBarItem> childrenTwo = new List<NavBarItem>();
            childrenTwo.Add(new NavBarItem()
            {
                ItemName = "Windows",
                ItemProperty = "微软"
            });
            childrenTwo.Add(new NavBarItem()
            {
                ItemName = "Linux",
                ItemProperty = "开源"

            });
            childrenTwo.Add(new NavBarItem()
            {
                ItemName = "MacOS",
                ItemProperty = "苹果"
            });

            NavBarItems.Add(new NavBarItem()
            {
                ItemName = "编程语言",
                Children = childrenOne
            });
            NavBarItems.Add(new NavBarItem()
            {
                ItemName = "操作系统",
                Children = childrenTwo
            });
        }

        
    }




    说明：控件模板和数据模板的关系

    控件只是数据和行为的载体，至于它本身长什么样子和数据长什么样子都是靠Template决定的。决定控件外观的是ControlTemplate，决定数据外观的是DataTemplate，它们正是Control类的Template和ContentTemplate两个属性的值。
    　　一般来说，ControlTemplate内都有一个ContentPresenter，这个ContentPresenter的ContentTemplate就是DataTemplate类型。所以数据模板和控件模板的关系如下图所示：

    Control类型
        - Template属性 (ControlTemplate类型)
            - ContentPresenter
                - ContentTemplate (DataTemplate类型)


    ContentControl类型
        - Template属性 (ControlTemplate类型) 继承自Control
        - ContentTemplate (DataTemplate类型)


    ItemsControl类型
        - Template属性 (ControlTemplate类型) 继承自Control
        - ItemsPanel属性 (ItemsPanelTemplate类型) 指定布局容器
        - ItemTemplate属性 (DateTemplate类型) 每个Item的Template


    3.面板模板

    增加ItemsPanelTemplate调整面板布局


    [csharp] view plain copy print?
    1. <Window.Resources>  
    2.     <!--创建数据模板-->  
    3.     <HierarchicalDataTemplate  x:Key="NavDataTem" ItemsSource="{Binding Children}">  
    4.         <Border Name="myborder" BorderBrush="AliceBlue" BorderThickness="2" Margin="3">  
    5.             <StackPanel Orientation="Horizontal" Margin="0,3">  
    6.                 <CheckBox IsChecked="{Binding IsChecked}" Content=""/>  
    7.                 <Image Source="{Binding Icon}" Width="16" Height="16"></Image>  
    8.                 <TextBlock Name="txtOne" Margin="5" FontWeight="Bold" Text="{Binding ItemName}" ></TextBlock>  
    9.                 <TextBlock Name="txtTwo"  Margin="5" Text="{Binding ItemProperty}" ></TextBlock>  
    10.             </StackPanel>  
    11.         </Border>  
    12.         <HierarchicalDataTemplate.Triggers>  
    13.             <Trigger SourceName="myborder" Property="IsMouseOver" Value="True">  
    14.                 <Setter TargetName="txtOne" Property="Background" Value="LightGray"></Setter>  
    15.                 <Setter TargetName="txtTwo" Property="FontSize" Value="20"></Setter>  
    16.             </Trigger>  
    17.         </HierarchicalDataTemplate.Triggers>  
    18.     </HierarchicalDataTemplate>  
    19.     <ItemsPanelTemplate x:Key="ItemsPanelTem">  
    20.         <StackPanel Orientation="Horizontal"  
    21.                 VerticalAlignment="Center"  
    22.                 HorizontalAlignment="Left"/>  
    23.     </ItemsPanelTemplate>  
    24. </Window.Resources>  
    25. <StackPanel Margin="5">  
    26.   
    27.     <TreeView Name="treeTest" ScrollViewer.VerticalScrollBarVisibility="Visible"    
    28.               ItemTemplate="{StaticResource NavDataTem}" ItemsPanel="{StaticResource ItemsPanelTem}">  
    29.   
    30.     </TreeView>  
    31. </StackPanel>  
    32. /Window>  
  • 相关阅读:
    7.20 高博教育 方法
    7.20 高博教育 随机数字（练习）
    7.17 高博教育 流程控制02
    7月17号 高博教育 复习加逻辑运算符
    7月16号 高博教育 知识扩展
    7月16号 高博教育 知识点总结
    7月16号 高博教育 数据运算符和比较运算符
    链式线性表——课上练
    顺序线性表——课上练
    链栈——课上练
  • 原文地址：https://www.cnblogs.com/dxmfans/p/9434886.html
Copyright © 2011-2022 走看看