WPF自定義Expander控件樣式實(shí)現(xiàn)酷炫Style
首先, 看一下效果圖。
實(shí)現(xiàn)思路
1.PS處理兩張選中得特效背景, 一張為主選擇得效果圖, 另外一張為次選擇項(xiàng)得效果圖。


圖片資源定義
<!--靜態(tài)資源--> <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樣式實(shí)現(xiàn):
- 1.自定義Expander樣式, Expander樣式模板中, 主要分為兩個(gè)部分, 1.ToggleButton 2.ContentPresenter
- 2.ToogleButton主要通過IsChecked進(jìn)行觸發(fā)器控制設(shè)置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樣式實(shí)現(xiàn)
<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引用樣式部分代碼:
到此這篇關(guān)于WPF自定義Expander控件樣式實(shí)現(xiàn)酷炫Style的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
在asp.net中實(shí)現(xiàn)datagrid checkbox 全選的方法
在asp.net中實(shí)現(xiàn)datagrid checkbox 全選的方法...2006-12-12asp.net DropDownList實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)效果
這篇文章主要介紹了asp.net DroDownList實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)效果的相關(guān)資料,需要的朋友可以參考下2016-02-02ASP.Net中利用CSS實(shí)現(xiàn)多界面的兩種方法
這篇文章主要介紹了ASP.Net中利用CSS實(shí)現(xiàn)多界面的兩種方法,包括動(dòng)態(tài)加載css樣式與動(dòng)態(tài)設(shè)置頁(yè)面同類控件的方法來實(shí)現(xiàn)該功能,是非常具有實(shí)用價(jià)值的技巧,需要的朋友可以參考下2014-12-12ASP.NET Core設(shè)置URLs的方法匯總(完美解決.NET 6項(xiàng)目局域網(wǎng)IP地址遠(yuǎn)程無法訪問的
近期在dotnet項(xiàng)目中遇到這樣的問題.net6 運(yùn)行以后無法通過局域網(wǎng)IP地址遠(yuǎn)程訪問,整理出解決問題的五種方式方法,感興趣的朋友一起看看吧2023-11-11基于localStorge開發(fā)登錄模塊的記住密碼與自動(dòng)登錄實(shí)例
下面小編就為大家?guī)硪黄趌ocalStorge開發(fā)登錄模塊的記住密碼與自動(dòng)登錄實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08.net framework中引進(jìn)的var對(duì)象類型聲明
安裝了vs 2008之后,在后臺(tái)代碼中,resharper插件對(duì)后臺(tái)所有局部變量進(jìn)行提示建議,顯示需要采用use implicitly typed local variable declaration,通過代碼修改建議2010-12-12