《WPF》Expander控件简单美化

示例图：

Expander控件功能很常见, 一般用于系统左侧的菜单收缩面板。

1.主要的组成

一个头部(header) 和一个内容(content) 组成。

 <Expander ExpandDirection="Down"  SnapsToDevicePixels="True" VerticalAlignment="Top" Style="{DynamicResource ExpanderStyle1}" >

                <Expander.Header>

                    <StackPanel Orientation="Horizontal">

                        <TextBlock  FontFamily="/WpfApplication1;component/Resources/#iconfont" Text=""

                                    FontSize="" Foreground="#918C8C" VerticalAlignment="Center"></TextBlock>

                        <TextBlock FontSize="" Text="首页" Margin="8,0,-51,0"  Foreground="#918C8C" ></TextBlock>

                    </StackPanel>

                </Expander.Header>

                <Expander.Content>

                    <StackPanel Background="#F6F8F8">

                        <RadioButton Style="{DynamicResource RadioButtonStyle}">控制中心</RadioButton>

                        <RadioButton Style="{DynamicResource RadioButtonStyle}">资源管理</RadioButton>

                        <RadioButton Style="{DynamicResource RadioButtonStyle}">仪表菜单</RadioButton>

                        <RadioButton Style="{DynamicResource RadioButtonStyle}">顶部导航</RadioButton>

                        <RadioButton Style="{DynamicResource RadioButtonStyle}">通知中心</RadioButton>

                        <RadioButton Style="{DynamicResource RadioButtonStyle}">蓝牙设置</RadioButton>

                    </StackPanel>

                </Expander.Content>

            </Expander>

为了修改掉原生的样式, 重新定义了一个Style / ExpanderStyle1

1.将原有的左侧圆形删除

2.把左侧的箭头移动至右侧【主要修改红色加粗部分调整】

 <Style x:Key="ExpanderStyle1" TargetType="{x:Type Expander}">

            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>

            <Setter Property="Background" Value="Transparent"/>

            <Setter Property="BorderBrush" Value="#918C8C"/>

            <Setter Property="BorderThickness" Value="0 0 0 0"/>

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="{x:Type Expander}">

                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" SnapsToDevicePixels="True">

                            <DockPanel>

                                <ToggleButton x:Name="HeaderSite" ContentTemplate="{TemplateBinding HeaderTemplate}"

                                              Content="{TemplateBinding Header}" DockPanel.Dock="Top" Foreground="{TemplateBinding Foreground}"

                                              FontWeight="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}"

                                              FontStretch="{TemplateBinding FontStretch}" FontSize="{TemplateBinding FontSize}"

                                              FontFamily="{TemplateBinding FontFamily}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"

                                              IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"

                                              Margin="1" MinWidth="0" MinHeight="0" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding

                                    VerticalContentAlignment}">

                                    <ToggleButton.FocusVisualStyle>

                                        <Style>

                                            <Setter Property="Control.Template">

                                                <Setter.Value>

                                                    <ControlTemplate>

                                                        <Border>

                                                            <Rectangle Margin="0" SnapsToDevicePixels="True" Stroke="Black" StrokeThickness="1" StrokeDashArray="1 2"/>

                                                        </Border>

                                                    </ControlTemplate>

                                                </Setter.Value>

                                            </Setter>

                                        </Style>

                                    </ToggleButton.FocusVisualStyle>

                                    <ToggleButton.Style>

                                        <Style TargetType="{x:Type ToggleButton}">

                                            <Setter Property="Template">

                                                <Setter.Value>

                                                    <ControlTemplate TargetType="{x:Type ToggleButton}">

                                                        <Border Padding="{TemplateBinding Padding}">

                                                            <Grid>

                                                                <Grid.ColumnDefinitions>

                                                                    <ColumnDefinition Width="19*"/>

                                                                </Grid.ColumnDefinitions>

                                                                <Path Grid.Column="0" x:Name="arrow" Data="M1,1.5L4.5,5 8,1.5" HorizontalAlignment="Right"  SnapsToDevicePixels="False" Stroke="#918C8C" StrokeThickness="2" VerticalAlignment="Center" Height="10" Margin="0,10" />

                                                                <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="Left" Margin="4,0,0,0" RecognizesAccessKey="True" SnapsToDevicePixels="True" VerticalAlignment="Center"  />

                                                            </Grid>

                                                        </Border>

                                                        <ControlTemplate.Triggers>

                                                            <Trigger Property="IsChecked" Value="True">

                                                                <Setter Property="Data" TargetName="arrow" Value="M1,4.5L4.5,1 8,4.5"/>

                                                            </Trigger>

                                                            <Trigger Property="IsMouseOver" Value="True">

                                                                <Setter Property="Stroke" TargetName="arrow" Value="Black"/>

                                                            </Trigger>

                                                            <Trigger Property="IsPressed" Value="True">

                                                                <Setter Property="Stroke" TargetName="arrow" Value="Black"/>

                                                            </Trigger>

                                                            <Trigger Property="IsEnabled" Value="False">

                                                                <Setter Property="Stroke" TargetName="arrow" Value="#FF707070"/>

                                                            </Trigger>

                                                        </ControlTemplate.Triggers>

                                                    </ControlTemplate>

                                                </Setter.Value>

                                            </Setter>

                                        </Style>

                                    </ToggleButton.Style>

                                </ToggleButton>

                                <ContentPresenter x:Name="ExpandSite" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" DockPanel.Dock="Bottom" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Visibility="Collapsed" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

                            </DockPanel>

                        </Border>

                        <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>

3.在头部同时添加了一个字体图标, 用FontFamily绑定字体, 通过设置Text实现图标

 <TextBlock  FontFamily="/WpfApplication1;component/Resources/#iconfont" Text="" 

                                    FontSize="22" Foreground="#918C8C" VerticalAlignment="Center"></TextBlock>

4.在Content区域, 利用一个stackPanel面板和多个单选按钮组成子元素【同时修改原生的RadioButton样式】

<Expander.Content>

                    <StackPanel Background="#F6F8F8">

                        <RadioButton Style="{DynamicResource RadioButtonStyle}">控制中心</RadioButton>

                        <RadioButton Style="{DynamicResource RadioButtonStyle}">资源管理</RadioButton>

                        <RadioButton Style="{DynamicResource RadioButtonStyle}">仪表菜单</RadioButton>

                        <RadioButton Style="{DynamicResource RadioButtonStyle}">顶部导航</RadioButton>

                        <RadioButton Style="{DynamicResource RadioButtonStyle}">通知中心</RadioButton>

                        <RadioButton Style="{DynamicResource RadioButtonStyle}">蓝牙设置</RadioButton>

                    </StackPanel>

                </Expander.Content>

5.修改stackpanel面板背景色, 打到header与子元素背景产生一定的色差【图上蓝色区域】

6.给RadioButton添加一个Style / RadioButtonStyle 【具体样式见代码注释】

 <Style x:Key="RadioButtonStyle" TargetType="{x:Type RadioButton}">

            <Setter Property="FocusVisualStyle">

                <Setter.Value>

                    <Style>

                        <Setter Property="Control.Template">

                            <Setter.Value>

                                <ControlTemplate>

                                    <Rectangle Margin="2" SnapsToDevicePixels="True" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>

                                </ControlTemplate>

                            </Setter.Value>

                        </Setter>

                    </Style>

                </Setter.Value>

            </Setter>
             <!--Margin主要用于设置子元素距离左侧边距-->

            <Setter Property="Margin" Value="25 8 0 0"/>

            <Setter Property="FontSize" Value="20"/>

            <Setter Property="VerticalContentAlignment" Value="Center"/>

            <Setter Property="HorizontalContentAlignment" Value="Left"/>

            <Setter Property="BorderBrush" Value="Transparent"/>

            <Setter Property="Foreground" Value="#918C8C"/>

            <Setter Property="BorderThickness" Value="0"/>

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="{x:Type RadioButton}">

                        <Grid x:Name="templateRoot" Background="Transparent" SnapsToDevicePixels="True">

                            <Border x:Name="border" BorderBrush="Red"

                                     BorderThickness="0"  Opacity="0.1"

                                Background="Transparent" SnapsToDevicePixels="True"/>
  　　　　　　　　　　　　　　　　<!-- 用于设置选中的左侧树形边框-->

                            <Border x:Name="bd2" BorderBrush="#2196F3" />

                            <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="1" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

                        </Grid>

                        <ControlTemplate.Triggers>

                            <Trigger Property="HasContent" Value="True">

                                <Setter Property="FocusVisualStyle">

                                    <Setter.Value>

                                        <Style>

                                            <Setter Property="Control.Template">

                                                <Setter.Value>

                                                    <ControlTemplate>

                                                        <Rectangle Margin="14,0,0,0" SnapsToDevicePixels="True" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>

                                                    </ControlTemplate>

                                                </Setter.Value>

                                            </Setter>

                                        </Style>

                                    </Setter.Value>

                                </Setter>

                                <Setter Property="Padding" Value="4,-1,0,0"/>

                            </Trigger>

                            <Trigger Property="IsMouseOver" Value="True">
　　　　　　　　　　　　　　　　　　　<!--当选中的时候, 改变字体的颜色, 同时左侧加一条宽度为2 的 边框 -->

                                <Setter Property="Foreground"  Value="#2196F3"/>

                                <Setter Property="BorderThickness" Value="2 0 0 0" TargetName="bd2"/>

                            </Trigger>

                            <Trigger Property="IsChecked" Value="true">

                            </Trigger>

                            <Trigger Property="IsChecked" Value="{x:Null}"/>

                        </ControlTemplate.Triggers>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

            <Setter Property="MinHeight" Value="20"/>

            <Setter Property="HorizontalAlignment" Value="Stretch"/>

        </Style>

《WPF》Expander控件简单美化的更多相关文章

WPF Expander控件（扩展面板）
这算是我比较喜欢的一个控件,以前在Winform中也常用类似的.它包装了一块内容,通过单击一个小箭头按钮可以显示或隐藏所包含的内容.在线帮助以及Web页面经常使用这种技术,因为既可以包含大量内容,而又 ...
继续聊WPF——Expander控件（2）
<Window x:Class="Expander_Sample2.Window1" xmlns="http://schemas.microsoft.com/win ...
继续聊WPF——Expander控件（1）
这个控件最实用的地方,就是做导航栏. <StackPanel Margin="20,20" Width="100" Height="460&qu ...
WPF自学入门（六）WPF带标题的内容控件简单介绍
在WPF自学入门(二)WPF-XAML布局控件的文章中分别介绍StackPanel,WarpPanel,DockPanel,Grid,Canvas五种布局容器的使用,可以让我们大致了解容器可以使用在什 ...
WPF Label控件在数据绑定Content属性变化触发TargetUpdated事件简单实现类似TextChanged 事件效果
原文:WPF Label控件在数据绑定Content属性变化触发TargetUpdated事件简单实现类似TextChanged 事件效果本以为Label也有TextChanged 事件,但在使 ...
WPF中Expander控件样式，ListBox的样式(带checkbox)恢复
Expander控件样式: <ControlTemplate x:Key="ExpanderToggleButton" TargetType="ToggleButt ...
迟到的 WPF 学习 —— 控件
这一章书中内容比较多而杂,但每个对象的内容又相对简短,所以只挑选里边有代表性的内容做记录. 1. Label 控件:一个基础的简单的 ContentControl,Labe 支持快捷键文本的设置,可以 ...
WPF滑块控件(Slider)的自定义样式
前言每次开发滑块控件的样式都要花很久去读样式代码,感觉有点记不牢,所以特此备忘. 自定义滑块样式首先创建项目,添加Slider控件. 然后获取Slider的Window样式,如下图操作. 然后弹出 ...
WCF学习（二）对控件简单了解以及4个文本控件的简介
WPF基础控件系统默认提供的基础控件: 文本控件介绍与用法 Label控件 label控件:一般用户描述性文字显示. 在Label控件使用时,一般给予用户提示.用法上没有什么很特殊的,label控件 ...

随机推荐

利用netstat和tasklist查看PC的端口占用情况及80端口被占用
经常,我们在启动应用的时候发现系统需要的端口被别的程序占用,如何知道谁占有了我们需要的端口? 1.Windows平台在windows命令行窗口下执行: E:\oracle\ora92\bin>n ...
session和cookie详解
摘要:虽然session机制在web应用程序中被采用已经很长时间了,但是仍然有很多人不清楚session机制的本质,以至不能正确的应用这一技术.本文将详细讨论session的工作机制并且对在Java ...
modSecurity规则学习（四）——规则指令编写
规则语言是使用9个指令实现: 语法:SecRule VARIABLES OPERATOR [TRANSFORMATION_FUNCTIONS, ACTIONS] Variables 以下几种: Reg ...
Unity(IoC)
一.什么是IoC? IoC(Inversion of Control,控制反转)又称“依赖注入”(Dependence Injection,DI). 控制反转就是创建对象的权利由开发人员控制,转为由容 ...
POJ 1330 Nearest Common Ancestors 倍增算法的LCA
POJ 1330 Nearest Common Ancestors 题意:最近公共祖先的裸题思路:LCA和ST我们已经很熟悉了,但是这里的f[i][j]却有相似却又不同的含义.f[i][j]表示i节 ...
(转载)http协议的Request Payload 和 Form Data 的区别
我正在开发的项目前端和后端是完全独立的,通过配置 webpack 的 proxy 将前端请求跨域代理到后台服务.昨天发现,我前端执行 post 请求,后台 springmvc 的 @RequestMa ...
在使用FireFox浏览器时，经常打开新标签，页面总是不断自动刷新，解决办法
可以用如下方法尝试(逐个尝试,看看哪个管用): 1.地址栏输入 about:support,右上角有个翻新Firefox,点击,等待浏览器重启,即可. 2.点击:工具-附加组件,把“火狐主页和标签管理 ...
最长上升子序列（LIS）nlogn模板
参考https://www.cnblogs.com/yuelian/p/8745807.html 注意最长上升子序列用lower_bound,最长不下降子序列用upper_bound 比如123458 ...
OpenJDK源码研究笔记(十五):吐槽JDK中的10个富有争议的设计
前14篇文章,分享了JDK中值得学习和借鉴的编码和设计方法. 每个硬币都是有两面的.Every coin has two sides. 当然,JDK中也有很多值得改进或者说富有争议的设计. 本篇,就来 ...
@MapperScan 和 @ComponentScan 区别
1.首先@MapperScan和@ComponentScan都是扫描包 2.@ComponentScan是组件扫描注解,用来扫描@Controller @Service @Repository这类 ...

《WPF》Expander控件简单美化

《WPF》Expander控件简单美化的更多相关文章

随机推荐

热门专题