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>  
  • 相关阅读:
    LeetCode偶尔一题 —— 617. 合并二叉树
    《剑指offer》 —— 链表中倒数第k个节点
    《剑指offer》 —— 青蛙跳台阶问题
    《剑指offer》—— 二维数组中的查找
    《剑指offer》—— 替换空格
    《剑指offer》—— 合并两个排序的链表
    《剑指offer》—— 礼物的最大价值
    生成Nuget 源代码包来重用你的Asp.net MVC代码
    Pro ASP.Net Core MVC 6th 第四章
    Pro ASP.NET Core MVC 6th 第三章
  • 原文地址：https://www.cnblogs.com/dxmfans/p/9434886.html
Copyright © 2011-2022 走看看