• 【WPF】 一个好看的ComBox样式


    先上图

    话不多说,直接上代码

      1 <!--Combox-->
      2     <Style TargetType="{x:Type ComboBox}" x:Key="cmbstyle">
      3         <Setter Property="Background" Value="White"/>
      4         <Setter Property="ItemContainerStyle">
      5             <Setter.Value>
      6                 <!--ComBoxItem-->
      7                 <Style TargetType="ComboBoxItem">
      8                     <Setter Property="MinHeight" Value="22"></Setter>
      9                     <Setter Property="MinWidth" Value="60"></Setter>
     10                     <Setter Property="Template">
     11                         <Setter.Value>
     12                             <ControlTemplate TargetType="ComboBoxItem">
     13                                 <Border Name="Back" Background="Transparent"  BorderThickness="0,0,0,0" BorderBrush="#81D779" >
     14                                     <ContentPresenter  VerticalAlignment="Center" HorizontalAlignment="Left" Margin="5,0,0,0"></ContentPresenter>
     15                                 </Border>
     16                                 <ControlTemplate.Triggers>
     17                                     <Trigger Property="IsMouseOver" Value="True">
     18                                         <Setter TargetName="Back" Property="Background" Value="LightGray"></Setter>
     19                                     </Trigger>
     20                                     <Trigger Property="IsHighlighted" Value="True">
     21                                         <Setter TargetName="Back" Property="Background" Value="LightGray"></Setter>
     22                                     </Trigger>
     23                                 </ControlTemplate.Triggers>
     24                             </ControlTemplate>
     25                         </Setter.Value>
     26                     </Setter>
     27                 </Style>
     28             </Setter.Value>
     29         </Setter>
     30         <Setter Property="Template">
     31             <Setter.Value>
     32                 <ControlTemplate TargetType="{x:Type ComboBox}">
     33                     <Border BorderThickness="0" CornerRadius="3" Width="100" Height="30" Background="{TemplateBinding Background}" >
     34                         <Grid >
     35                             <Grid.ColumnDefinitions>
     36                                 <ColumnDefinition Width="3*"/>
     37                                 <ColumnDefinition Width="*"/>
     38                             </Grid.ColumnDefinitions>
     39                             <Grid Grid.Column="0" x:Name="grid">
     40                                 <ToggleButton 
     41                                         Width="{Binding ElementName=grid,Path=ActualWidth}" 
     42                                         Height="{Binding ElementName=grid, Path=ActualHeight}" 
     43                                         Content="{TemplateBinding Text}" VerticalAlignment="Center" 
     44                                         HorizontalAlignment="Left" Margin="5,0,0,0" 
     45                                         BorderThickness="0" 
     46                                         Foreground="{TemplateBinding Foreground}"
     47                                         Background="{TemplateBinding Background}"
     48                                         IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press"
     49                                         >
     50                                     <ToggleButton.Style >
     51                                         <Style TargetType="ToggleButton">
     52                                             <Setter Property="Background" Value="White"/>
     53                                             <Setter Property="Template">
     54                                                 <Setter.Value>
     55                                                     <ControlTemplate TargetType="ToggleButton">
     56                                                         <Border   Background="{TemplateBinding Background}" BorderThickness="0"  >
     57                                                             <TextBlock Foreground="{TemplateBinding Foreground}" Text="{TemplateBinding Content}" Margin="4 0 0 0"  HorizontalAlignment="Left" VerticalAlignment="Center"/>
     58                                                         </Border>
     59                                                     </ControlTemplate>
     60                                                 </Setter.Value>
     61                                             </Setter>
     62                                             <Style.Triggers>
     63                                                 <Trigger Property="IsMouseOver" Value="True">
     64                                                     <Setter Property="Background" Value="White"/>
     65                                                 </Trigger>
     66                                                 <Trigger Property="IsMouseOver" Value="False">
     67                                                     <Setter Property="Background" Value="White"/>
     68                                                 </Trigger>
     69                                             </Style.Triggers>
     70                                         </Style>
     71                                     </ToggleButton.Style>
     72                                 </ToggleButton>
     73                             </Grid>
     74 
     75                             <Grid Grid.Column="1" >
     76                                 <ToggleButton IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
     77                                                   Foreground="{TemplateBinding Foreground}"
     78                                                   ClickMode="Press">
     79                                     <ToggleButton.Style>
     80                                         <Style TargetType="ToggleButton">
     81                                             <Setter Property="Background" Value="White"/>
     82                                             <Setter Property="Template">
     83                                                 <Setter.Value>
     84                                                     <ControlTemplate TargetType="ToggleButton">
     85                                                         <Border Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}">
     86                                                             <Grid>
     87                                                                 <TextBlock Foreground="{TemplateBinding Foreground}" x:Name="arrow_tb" Text="&#xe610;" Style="{StaticResource iconTb_style}" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5">
     88                                                                     <TextBlock.RenderTransform>
     89                                                                         <TransformGroup>
     90                                                                             <ScaleTransform/>
     91                                                                             <SkewTransform/>
     92                                                                             <RotateTransform/>
     93                                                                             <TranslateTransform/>
     94                                                                         </TransformGroup>
     95                                                                     </TextBlock.RenderTransform>
     96                                                                 </TextBlock>
     97                                                             </Grid>
     98                                                         </Border>
     99                                                         <ControlTemplate.Triggers>
    100                                                             <Trigger Property="IsChecked" Value="True">
    101 
    102                                                             </Trigger>
    103                                                             <EventTrigger RoutedEvent="Checked">
    104                                                                 <BeginStoryboard>
    105                                                                     <Storyboard >
    106                                                                         <DoubleAnimationUsingKeyFrames Storyboard.TargetName="arrow_tb" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
    107                                                                             <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
    108                                                                             <EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="180"/>
    109                                                                         </DoubleAnimationUsingKeyFrames>
    110                                                                     </Storyboard>
    111                                                                 </BeginStoryboard>
    112                                                             </EventTrigger>
    113 
    114                                                             <EventTrigger RoutedEvent="Unchecked">
    115                                                                 <BeginStoryboard>
    116                                                                     <Storyboard >
    117                                                                         <DoubleAnimationUsingKeyFrames Storyboard.TargetName="arrow_tb" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
    118                                                                             <EasingDoubleKeyFrame KeyTime="00:00:00" Value="180"/>
    119                                                                             <EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="0"/>
    120                                                                         </DoubleAnimationUsingKeyFrames>
    121                                                                     </Storyboard>
    122                                                                 </BeginStoryboard>
    123                                                             </EventTrigger>
    124                                                         </ControlTemplate.Triggers>
    125                                                     </ControlTemplate>
    126                                                 </Setter.Value>
    127                                             </Setter>
    128                                         </Style>
    129                                     </ToggleButton.Style>
    130                                 </ToggleButton>
    131                             </Grid>
    132                             <Popup IsOpen="{TemplateBinding IsDropDownOpen}" Placement="Bottom" x:Name="Popup" Focusable="False" AllowsTransparency="True" PopupAnimation="Slide">
    133                                 <Border CornerRadius="1" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{TemplateBinding ActualWidth}" x:Name="DropDown" SnapsToDevicePixels="True">
    134                                     <Border.Effect>
    135                                         <DropShadowEffect Color="Black" BlurRadius="2" ShadowDepth="0" Opacity="0.5"/>
    136                                     </Border.Effect>
    137                                     <ScrollViewer Margin="4,6,4,6" Style="{DynamicResource ScrollViewerStyle}" MaxHeight="{TemplateBinding MaxDropDownHeight}" SnapsToDevicePixels="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" CanContentScroll="True">
    138                                         <!-- StackPanel 用于显示子级,方法是将 IsItemsHost 设置为 True -->
    139                                         <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" Background="White"/>
    140                                     </ScrollViewer>
    141                                 </Border>
    142                             </Popup>
    143                         </Grid>
    144 
    145 
    146                         <Border.Effect>
    147                             <DropShadowEffect ShadowDepth="-1" Opacity="0.3" Color="#FF969696" BlurRadius="5"/>
    148                         </Border.Effect>
    149                     </Border>
    150                 </ControlTemplate>
    151             </Setter.Value>
    152         </Setter>
    153 
    154 
    155     </Style>

    中间有个地方用到了字体,跑步起来报错直接去掉就行了。

  • 相关阅读:
    23种设计模式总篇
    23种设计模式之抽象工厂
    23种设计模式之原型模式
    23种设计模式之适配器模式
    23种设计模式之工厂模式
    23种设计模式之模板方法
    Cloudera Manager 5和CDH5离线安装
    ArrayList vs. LinkedList vs. Vector
    在Java中怎样把数组转换为ArrayList?
    两个有序数组的中位数 【算法】
  • 原文地址:https://www.cnblogs.com/ganbei/p/16172465.html
Copyright © 2020-2023  润新知