WPF自定义Expander控件样式实现酷炫Style

更新时间：2022年01月28日 10:53:43 作者：痕迹g

这篇文章介绍了WPF自定义Expander控件样式实现酷炫Style的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

首先, 看一下效果图。

实现思路

1.PS处理两张选中得特效背景, 一张为主选择得效果图, 另外一张为次选择项得效果图。

![](//img.jbzj.com/file_images/article/202201/2022128103603692.jpg)

![](//img.jbzj.com/file_images/article/202201/2022128103615294.jpg)

图片资源定义

        <!--静态资源-->
        <ImageBrush x:Key="leftImage" ImageSource="/IndustrialMaterials;component/images/leftImage.png"/>
        <ImageBrush x:Key="leftImageSub" ImageSource="/IndustrialMaterials;component/images/leftImageSub.png"/>
        <ImageBrush x:Key="topImage" ImageSource="/IndustrialMaterials;component/images/topImage.png"/>

ToggleButton样式实现:

1.自定义Expander样式, Expander样式模板中, 主要分为两个部分, 1.ToggleButton 2.ContentPresenter
2.ToogleButton主要通过IsChecked进行触发器控制设置Background, 以下代码:

         <!--下拉列表样式-->
        <Style x:Key="ToggleButtonStyle" TargetType="{x:Type ToggleButton}">
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="Height" Value="80" />
            <Setter Property="HorizontalContentAlignment" Value="Right"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Padding" Value="10 10"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Grid>
                            <Border x:Name="border2"   Background="{TemplateBinding Background}"  
                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                     Margin="{TemplateBinding Padding}" 
                     VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                     Margin="{TemplateBinding Padding}" 
                     RecognizesAccessKey="True" 
                     SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                     VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Border>
                        </Grid>

                        <ControlTemplate.Triggers>
                            <Trigger Property="IsPressed" Value="true">
                                <Setter Property="Background" Value="#FFd2e7f4" />
                            </Trigger>
                            <Trigger Property="IsChecked" Value="true">
                                <Setter Property="Background" TargetName="border2" Value="{StaticResource ResourceKey=leftImage}"/>
                            </Trigger>
                            <Trigger Property="IsChecked" Value="false">
                                <Setter Property="Background" TargetName="border2" Value="#191E36"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground" Value="White"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Expander样式实现

        <Style x:Key="ExpanderStyle" TargetType="{x:Type Expander}">
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Expander}">
                        <DockPanel>
                            <ToggleButton x:Name="HeaderSite" ContentTemplate="{TemplateBinding HeaderTemplate}" 
                                              ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}" 
                                              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}"
                                              Style="{StaticResource ToggleButtonStyle}"
                                              VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            <ContentPresenter x:Name="ExpandSite" DockPanel.Dock="Left" Focusable="false" 
                                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                                  Margin="{TemplateBinding Padding}" Visibility="Collapsed" 
                                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </DockPanel>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsExpanded" Value="true">
                                <Setter Property="Visibility" TargetName="ExpandSite" Value="Visible"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Expander引用样式部分代码:

到此这篇关于WPF自定义Expander控件样式实现酷炫Style的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

WPF路由事件之逻辑树和可视树遍历
本文详细讲解了WPF路由事件之逻辑树和可视树遍历的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-02-02
ASP.Net Core基于EF6、Unitwork、Autofac实现Repository模式
这篇文章介绍了ASP.Net Core基于EF6、Unitwork、Autofac实现Repository模式的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-02-02
VS2010中呈现控件时出错的解决方法
如何解决“呈现控件时出错”的问题，这篇文章主要介绍了VS2010中出现"呈现控件时出错"问题的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-01-01
asp.net core服务限制堆内存大小的操作方法
asp.net core是微软旗下支持跨平台的开发框架，与springboot思想类似，支持ioc等，可以快速的开发web api等项目，这篇文章主要介绍了asp.net core服务限制堆内存大小,需要的朋友可以参考下
2022-09-09
.NET 数据库连接池
如果您通过使用另一个 Execute 方法（例如，ExecuteScalar、ExecuteNonQuery 和 ExecuteXMLReader）执行查询
2008-12-12
vb.net借助剪贴板将图片导入excel内
这篇文章主要介绍了vb.net将图片导入到excel的方法,只要借助剪贴板将图片粘贴到excel中就可以完成了，大家参考使用吧
2014-01-01
.NET MCP 文档详细指南
本文档详细介绍了 .NET 使用 MCP 的相关内容,包括服务器端实现、客户端实现以及 Cursor 集成配置等方面,通过使用 MCP,开发者可以创建强大的工具和服务,使 AI 模型能够安全地访问和操作各种数据源,感兴趣的朋友一起看看吧
2025-04-04
DataGridView中CheckBox实现某一列单选
DataGridView中CheckBox实现某一列单选，需要的朋友可以参考一下
2013-02-02
asp.net 无限分类
asp.net一个可以添加无限结点的树asp.net 无限分级 asp.net 树型菜单
2008-02-02
NetCore WebSocket即时通讯示例
这篇文章主要为大家详细介绍了NetCore WebSocket即时通讯示例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06