zoukankan      html  css  js  c++  java
  • wpf -----Expander自定义样式

    Expander是一个可以展开和折叠的控件,由ContentPresenter和ToggleButton组成

    <!--Expander样式-->
    <Style x:Key="ExpanderStyle" TargetType="{x:Type Expander}">
    <Setter Property="Foreground" Value="Black"/>
    <Setter Property="FontFamily" Value="宋体" />
    <Setter Property="FontSize" Value="12" />
    <Setter Property="Background" Value="#ffffff"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="Width" Value="276"/>
    <Setter Property="Template">
    <Setter.Value>
    <ControlTemplate TargetType="{x:Type Expander}">
    <Canvas Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
    <ToggleButton x:Name="HeaderSite" 
    Canvas.Top="0"
    ContentTemplate="{TemplateBinding HeaderTemplate}" 
    ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}"
    Content="{TemplateBinding Header}" 
    IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" 
    Style="{DynamicResource ToggleButtonStyle}" />
    <Border x:Name="ExpandSite" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
    VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
    Visibility="Collapsed" 
    
    
    Canvas.Top="0" Canvas.Left="0"
    
    
    Focusable="false"
    BorderBrush="{TemplateBinding BorderBrush}"
    BorderThickness="{TemplateBinding BorderThickness}" 
    Background="#ffffff" ScrollViewer.VerticalScrollBarVisibility="Hidden">
    <ContentPresenter Margin="10 0" 
    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
    VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
    </Border>
    
    </Canvas>
    <ControlTemplate.Triggers>
    <Trigger Property="IsExpanded" Value="true">
    <Setter Property="Visibility" TargetName="ExpandSite" Value="Visible"/>
    </Trigger>
    <Trigger Property="IsEnabled" Value="false">
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
    </Trigger>
    </ControlTemplate.Triggers>
    </ControlTemplate>
    </Setter.Value>
    </Setter>
    </Style>
    
     

    <!--ToggleButton样式-->

    <!--ToggleButton样式-->
    
    <Style x:Key="ToggleButtonStyle" TargetType="{x:Type ToggleButton}">
    
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="Width" Value="275"/>
    <Setter Property="Height" Value="25" />
    
    <Setter Property="Background" Value="#ffffff" />
    
    <Setter Property="Foreground" Value="#FF217c"/>
    <Setter Property="FontSize" Value="12" />
    <Setter Property="FontFamily" Value="宋体" />
    <Setter Property="FontWeight" Value="Bold" />
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Padding" Value="10 5"/>
    <Setter Property="Template">
    <Setter.Value>
    <ControlTemplate TargetType="{x:Type ToggleButton}">
    <Canvas Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" 
    Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
    <Canvas x:Name="canvNormal" Visibility="Visible" 
    Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" 
    Background="{TemplateBinding Background}" SnapsToDevicePixels="True" Canvas.Right="0">
    <Rectangle Width="275" Height="35" Fill="Red" Canvas.Right="0"/>
    <Path Data="M 0 0 L 6 -6 12 0 " Stroke="#7D7D7D" StrokeThickness="2" Canvas.Right="5" Canvas.Top="18"/>
    <!--<Rectangle Width="{TemplateBinding Width}" Height="1" Canvas.Bottom="0" Fill="#E3E3E3" />-->
    </Canvas>
    <Canvas x:Name="canvChecked" Visibility="Hidden" 
    Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" 
    Background="{TemplateBinding Background}" SnapsToDevicePixels="True" Canvas.Right="0">
    <Path Data="M 0 0 L 6 6 12 0 " Stroke="#7D7D7D" StrokeThickness="2" Canvas.Right="5" Canvas.Top="10"/>
    <Rectangle Width="{TemplateBinding Width}" Height="1" Canvas.Bottom="0" Fill="#E3E3E3" />
    </Canvas>
    
    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
    Margin="{TemplateBinding Padding}" 
    RecognizesAccessKey="True" 
    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
    </Canvas>
    
    <ControlTemplate.Triggers>
    <Trigger Property="IsPressed" Value="true">
    <!--点击颜色-->
    <Setter Property="Background" Value="Red"/>
    </Trigger>
    <Trigger Property="IsChecked" Value="true">
    <Setter Property="Visibility" TargetName="canvChecked" Value="Visible" />
    <Setter Property="Visibility" TargetName="canvNormal" Value="Hidden" />
    </Trigger>
    <Trigger Property="IsEnabled" Value="false">
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
    </Trigger>
    
    </ControlTemplate.Triggers>
    </ControlTemplate>
    </Setter.Value>
    </Setter>
    </Style>

    主程序代码:

    <Expander ExpandDirection="Down " Width="276"
    HorizontalAlignment="Left" IsExpanded="true" 
    Style="{DynamicResource ExpanderStyle}" Height="24" VerticalAlignment="Bottom" >
    <Expander.Header>
    <TextBlock Text="2.分析图" Name="abc" PreviewMouseLeftButtonDown="CloseClick"/>
    </Expander.Header>
    <!--<Expander.Content>
    <TextBlock Text="文本内容" TextWrapping="Wrap" Name="asdf" />
    </Expander.Content>-->
    </Expander>

     参考的链接为:https://blog.csdn.net/Qiustion/article/details/24377555

  • 相关阅读:
    微信小程序开发入门(六)
    JS计算日期加上指定天数得到新的日期
    Java中substring()
    List集合去除重复数据
    按钮倒计时
    jQuery中each方法
    Math三个函数
    jQuery表单提交
    jQuery 序列化表单数据
    正则取小数点后面几位
  • 原文地址:https://www.cnblogs.com/lovebear123/p/11598977.html
Copyright © 2011-2022 走看看