WPF 自定义Expander
自定义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>
WPF 自定义Expander的更多相关文章
- WPF 自定义柱状图 BarChart
WPF 自定义柱状图 当前的Telerik控件.DevExpress控件在图表控件方面做得不错,但是有时项目中需要特定的样式,不是只通过修改图表的模板和样式就能实现的. 或者说,通过修改当前的第三方控 ...
- wpf 自定义圆形按钮
wpf 自定义圆形按钮 效果图 默认样式 获取焦点样式 点击样式 下面是实现代码: 一个是自定义控件类,一个是控件类皮肤 using System; using System.Collections. ...
- WPF自定义窗口基类
WPF自定义窗口基类时,窗口基类只定义.cs文件,xaml文件不定义.继承自定义窗口的类xaml文件的根节点就不再是<Window>,而是自定义窗口类名(若自定义窗口与继承者不在同一个命名 ...
- WPF 自定义 MessageBox (相对完善版)
WPF 自定义 MessageBox (相对完善版) 基于WPF的自定义 MessageBox. 众所周知WPF界面美观.大多数WPF元素都可以简单的修改其样式,从而达到程序的风格统一.可是当 ...
- WPF自定义Window样式(2)
1. 引言 在上一篇中,介绍了如何建立自定义窗体.接下来,我们需要考虑将该自定义窗体基类放到类库中去,只有放到类库中,我们才能在其他地方去方便的引用该基类. 2. 创建类库 接上一篇的项目,先添加一个 ...
- WPF自定义Window样式(1)
1. 引言 WPF是制作界面的一大利器.最近在做一个项目,用的就是WPF.既然使用了WPF了,那么理所当然的,需要自定义窗体样式.所使用的代码是在网上查到的,遗憾的是,整理完毕后,再找那篇帖子却怎么也 ...
- WPF自学入门(九)WPF自定义窗口基类
今天简单记录一个知识点:WPF自定义窗口基类,常用winform的人知道,winform的窗体继承是很好用的,写一个基础窗体,直接在后台代码改写继承窗体名.但如果是WPF要继承窗体,我个人感觉没有理解 ...
- WPF自定义TabControl样式
WPF自定义TabControl,TabControl美化 XAML代码: <TabControl x:Class="SunCreate.Common.Controls.TabCont ...
- WPF 自定义ComboBox样式,自定义多选控件
原文:WPF 自定义ComboBox样式,自定义多选控件 一.ComboBox基本样式 ComboBox有两种状态,可编辑和不可编辑状态.通过设置IsEditable属性可以切换控件状态. 先看基本样 ...
随机推荐
- Android测试提升效率批处理脚本
前言: APP测试过程中,经常需要用的一些命令,如adb,每次敲命令,虽可以加深印象,但个人认为那即繁琐又浪费时间.本文贴出一些我使用的批处理,以及一点点小小技巧. 目录 1.[查看APK文件信息.b ...
- Debugging into .NET Core源代码的两种方式
一.前言 .NET开源时间还不长,因为一直在做YOYOFx的关系,所似我常常有更深入的了解.NET Core和ASP.NET Core内容的需求,并且.NET Core平台与之前版本的变化太大,这也导 ...
- iOS页面间传值的一些方式总结
废话不多说,直接进入主题: 这里要说的方式有6种:1.属性传值 2.block 3.delegate 4.UserDefault 5.单例 6.通知(篇幅原因我只写核心代码,如果看不懂可以直接在最下面 ...
- Win10 UWP 开发系列:使用SplitView实现汉堡菜单及页面内导航
在Win10之前,WP平台的App主要有枢轴和全景两种导航模式,我个人更喜欢Pivot即枢轴模式,可以左右切换,非常方便.全景视图因为对设计要求比较高,自己总是做不出好的效果.对于一般的新闻阅读类Ap ...
- 响应式WEB设计的9项基本原则
响 应式Web设计对于解决多类型屏幕问题来说是个不错方案,但从印刷的角度来看,其却存在着很多的困难.没有固定的页面尺寸.没有毫米或英寸,没有任何物理 限制,让人感到无从下手.随着建立网站可用的各种小工 ...
- c++ const 成员函数
第一个事实: 某类中可以这么声明定义两个函数,可以重载(overload) void pa(){ cout<<"a"<<endl; } void pa() ...
- 使用HTML 和CSS 开发商业站点
第一章HTML 基础1.html 的基本结构?解析:2.HTML 全称Hyper Text Markup Language(超文本标记语言)扩展XML:Extendsible Markup Langu ...
- Pro HTML5 Programming(Second Edition)2.Canvas API(1)
1.在使用HTML5的Canvas元素时,考虑到有些浏览器不支持canvas元素,或是不支持HTML5 Canvas API中的某些特性,开发人员最好提供一份替代代码. 以下代码展示如何在canvas ...
- node学习笔记
一.准备(github地址) 什么是Javascript? ... Javascript能做什么? ..... 浏览器中的Javascript可以做什么? 操作DOM(增删改查) AJAX/跨域 BO ...
- 自定义JS控件-简单示例
1. 业务需求: 制作 一个按钮对象,然后 像 winfrom 那样调用 就可以了: 首先 我们新建一个 MyControls的 JS文件:(插入如下代码) //这里运用的面向对象的思想 ,新建了 ...