zoukankan      html  css  js  c++  java
  • TabControl样式编写

     在实际项目的UI设计中,经常会使用到TabControl,比如标签式浏览器、选项卡设置等等。 

     根据不同的需求,需要TabControl展示不同的样式,这里我们来学习下TabControl。

     来看下TabControl 属性

     TabStripPlacement 控制TabItem Header的方向,如图:

     

    我们来看下TabControl的继承关系:

     TabControl-Seletor-ItemControl

    这样就很清晰了,TabControl和ListBox一样继承自Seletor,这样我们就可以通过ControlTemplate和DataTemplate来编写TabControl和TabItem的显示样式。

    例子:

     1 <Window x:Class="WpfApplication2.MainWindow"
     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:WpfApplication2"
     5         Title="MainWindow" Height="300" Width="300">
     6     <Window.Resources>
     7         <Style TargetType="{x:Type local:CustomItem}">
     8             <Setter Property="Padding" Value="0" />
     9             <Setter Property="HeaderTemplate">
    10                 <Setter.Value>
    11                     <DataTemplate>
    12                         <ContentPresenter Content="{TemplateBinding Property=ContentControl.Content}">
    13                             <ContentPresenter.LayoutTransform>
    14                                 <RotateTransform Angle="-90" />
    15                             </ContentPresenter.LayoutTransform>
    16                         </ContentPresenter>
    17                     </DataTemplate>
    18                 </Setter.Value>
    19             </Setter>
    20             <Setter Property="Template">
    21                 <Setter.Value>
    22                     <ControlTemplate TargetType="{x:Type local:CustomItem}">
    23                         <Border x:Name="bd1" CornerRadius="30" BorderThickness="2" BorderBrush="Blue">
    24                             <Border.Background>
    25                                 <ImageBrush ImageSource="{Binding Path=Icon, RelativeSource={RelativeSource TemplatedParent}}"></ImageBrush>
    26                             </Border.Background>
    27                             <Grid x:Name="grd">
    28                                 <ContentPresenter ContentSource="Header" HorizontalAlignment="Center"
    29                                           Margin="10,2,10,2" VerticalAlignment="Center"/>
    30                             </Grid>
    31                         </Border>
    32                         <ControlTemplate.Triggers>
    33                             <Trigger Property="IsMouseOver" Value="True" SourceName="grd">
    34                                 <Setter Property="BorderBrush" Value="Yellow" TargetName="bd1"/>
    35                             </Trigger>
    36                             <Trigger Property="Selector.IsSelected" Value="True">
    37                                 <Setter Property="BorderBrush" TargetName="bd1" Value="Red"></Setter>
    38                             </Trigger>
    39                         </ControlTemplate.Triggers>
    40                     </ControlTemplate>
    41                 </Setter.Value>
    42             </Setter>
    43         </Style>
    44     </Window.Resources>
    45     <DockPanel>
    46         <TabControl TabStripPlacement="Left">
    47             <local:CustomItem Header="Tab1" Width="80" Height="80" Icon="Resources/greentouch2.jpg">
    48                 <Label Content="adadada"></Label>
    49             </local:CustomItem>
    50             <local:CustomItem Header="Tab2" Width="80" Height="80" Icon="Resources/background2.jpg"></local:CustomItem>
    51         </TabControl>
    52     </DockPanel>
    53 </Window>

  • 相关阅读:
    leetcode33. Search in Rotated Sorted Array
    pycharm 设置sublime text3 monokai主题
    django class Meta
    leetcode30, Substring With Concatenation Of All Words
    Sublime text3修改tab键为缩进为四个空格,
    sublime text3 python打开图像的问题
    安装上imesupport输入法依然不跟随的解决办法,
    sublime text3 的插件冲突弃用问题,
    sublime text3 BracketHighlighter括号匹配的设置
    windows 下wget的使用
  • 原文地址:https://www.cnblogs.com/tmywu/p/2745888.html
Copyright © 2011-2022 走看看