WPF 自定义Expander

简介: 自定义Exander,收缩侧边栏   样式如下 ...

自定义Exander,收缩侧边栏

 

样式如下

<Grid>
        <Grid.Resources>
            <ControlTemplate x:Key="ExpanderControlTemplate1" TargetType="{x:Type Expander}">
                <Border x:Name="ExpanderBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3" SnapsToDevicePixels="True">
                    <Border.Background>
                        <ImageBrush ImageSource="弧形背景图.png"></ImageBrush>
                    </Border.Background>
                    <DockPanel>
                        <ToggleButton x:Name="HeaderSite" HorizontalAlignment="Center" 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.Template>
                                <ControlTemplate TargetType="ToggleButton">
                                    <Grid x:Name="ToggleGrid">
                                        <StackPanel Orientation="Horizontal">
                                            <Border x:Name="ToggleBoder1" Height="30" Width="30" Background="#FF5A83CF" CornerRadius="60,0,0,0"></Border>
                                            <Border x:Name="ToggleBoder2" Height="30" Width="30" Background="#FF5A83CF" CornerRadius="0,60,0,0"></Border>
                                        </StackPanel>
                                        <Canvas Height="30" Width="60">
                                            <Path x:Name="TogglePath" Data="M16,25 L30,10 46,25" Stroke="White" StrokeThickness="3"></Path>
                                        </Canvas>
                                    </Grid>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsChecked" Value="True">
                                            <Setter Property="Data" TargetName="TogglePath" Value="M16,10 L30,25 46,10"/>
                                        </Trigger>
                                        <Trigger Property="IsMouseOver" Value="True">
                                            <Setter Property="BorderBrush" TargetName="ToggleBoder1" Value="#FF3C7FB1"/>
                                            <Setter Property="BorderBrush" TargetName="ToggleBoder2" Value="#FF3C7FB1"/>
                                        </Trigger>
                                        <Trigger Property="IsPressed" Value="True">
                                            <Setter Property="BorderBrush" TargetName="ToggleBoder1" Value="#FF3C7FB1"/>
                                            <Setter Property="BorderBrush" TargetName="ToggleBoder2" Value="#FF3C7FB1"/>
                                        </Trigger>
                                        <Trigger Property="IsEnabled" Value="False">
                                            <Setter Property="BorderBrush" TargetName="ToggleBoder1" Value="Transparent"/>
                                            <Setter Property="BorderBrush" TargetName="ToggleBoder2" Value="Transparent"/>
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>

                            </ToggleButton.Template>
                        </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="IsExpanded" Value="False">
                        <Setter Property="Background" TargetName="ExpanderBorder" Value="{x:Null}"/>
                    </Trigger>
                    <Trigger Property="ExpandDirection" Value="Up">
                        <Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Top"/>
                        <Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Bottom"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
        </Grid.RowDefinitions>
        <Expander IsExpanded="True" Grid.Row="1" Cursor="Hand" Template="{DynamicResource ExpanderControlTemplate1}">
            <Border Background="LightBlue" Height="100"></Border>
        </Expander>
    </Grid>

Style中,可以设置一个图片的背景,如弧形的,样式会很好看。图片找项目UI人员即可

<Border.Background>
    <ImageBrush ImageSource="弧形背景图.png"></ImageBrush>
</Border.Background>

 

 

 

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须在文章页面给出原文连接,否则保留追究法律责任的权利。
目录
相关文章
|
C# 虚拟化 索引
【WPF】UI虚拟化之------自定义VirtualizingWrapPanel
原文:【WPF】UI虚拟化之------自定义VirtualizingWrapPanel 前言 前几天QA报了一个关于OOM的bug,在排查的过程中发现,ListBox控件中被塞入了过多的Item,而ListBox又定义了两种样式的ItemsPanelTemplate。
2203 0
|
3月前
|
开发框架 缓存 前端开发
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(11) -- 下拉列表的数据绑定以及自定义系统字典列表控件
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(11) -- 下拉列表的数据绑定以及自定义系统字典列表控件
|
3月前
|
开发框架 前端开发 JavaScript
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(3)--自定义用户控件
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(3)--自定义用户控件
|
3月前
|
C#
WPF 自定义可拖动标题栏
WPF 自定义可拖动标题栏
42 0
|
C# 数据安全/隐私保护
【WPF】右下角弹出自定义通知样式(Notification)——简单教程
原文:【WPF】右下角弹出自定义通知样式(Notification)——简单教程 1.先看效果 2.实现 1.主界面是MainWindow 上面就只摆放一个Button即可。
3044 0
|
3月前
|
开发框架 前端开发 C#
使用WPF开发自定义用户控件,以及实现相关自定义事件的处理
使用WPF开发自定义用户控件,以及实现相关自定义事件的处理
|
C# 容器
WPF技术之Expander控件
WPF Expander控件是一个可折叠展开的容器,它允许用户在需要时展开或折叠其内容。它提供了一种在图形界面中组织和隐藏信息的方式。
492 0
|
前端开发 C# 图形学
【WPF】WPF开发用户控件、用户控件属性依赖DependencyProperty实现双向绑定、以及自定义实现Command双向绑定功能演示
Wpf开发过程中,最经常使用的功能之一,就是用户控件(UserControl)了。用户控件可以用于开发用户自己的控件进行使用,甚至可以用于打造一套属于自己的UI框架。依赖属性(DependencyProperty)是为用户控件提供可支持双向绑定的必备技巧之一,同样用处也非常广泛。
934 0
【WPF】WPF开发用户控件、用户控件属性依赖DependencyProperty实现双向绑定、以及自定义实现Command双向绑定功能演示
|
C# C++ 数据可视化
WPF Calendar 日历控件 样式自定义
原文:WPF Calendar 日历控件 样式自定义 粗略的在代码上做了些注释 blend 生成出来的模版 有的时候 会生成 跟 vs ui界面不兼容的代码 会导致可视化设计界面 报错崩溃掉 但是确不影响 程序的编译运行 这个样式表 在vs 里会提示动画不兼容 Foreground属性 报错 ...
1773 1
|
C#
WPF 控件自定义背景
<!--控件要设置尺寸的话,设置的尺寸必须比下面的图形的尺寸要小,不然显示不开--> <Label Content="直角测试" Width="90" Height="90" HorizontalContentAlignment="Center" Vert...
1017 0