對(duì)WPF中Expander控件美化
更新時(shí)間：2022年01月25日 10:29:09 作者：痕跡g
這篇文章介紹了對(duì)WPF中Expander控件美化的方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
示例圖：
Expander控件功能很常見, 一般用于系統(tǒng)左側(cè)的菜單收縮面板。
主要的組成
一個(gè)頭部(header) 和 一個(gè) 內(nèi)容(content) 組成。
<Expander ExpandDirection="Down" SnapsToDevicePixels="True" VerticalAlignment="Top" Style="{DynamicResource ExpanderStyle1}" >
<Expander.Header>
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="/WpfApplication1;component/Resources/#iconfont" Text=""
FontSize="22" Foreground="#918C8C" VerticalAlignment="Center"></TextBlock>
<TextBlock FontSize="25" 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}">頂部導(dǎo)航</RadioButton>
<RadioButton Style="{DynamicResource RadioButtonStyle}">通知中心</RadioButton>
<RadioButton Style="{DynamicResource RadioButtonStyle}">藍(lán)牙設(shè)置</RadioButton>
</StackPanel>
</Expander.Content>
</Expander>為了修改掉原生的樣式, 重新定義了一個(gè)Style /ExpanderStyle1
1.將原有的左側(cè)圓形刪除
2.把左側(cè)的箭頭移動(dòng)至右側(cè) 【主要修改紅色加粗部分調(diào)整】
<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.在頭部同時(shí)添加了一個(gè)字體圖標(biāo), 用FontFamily綁定字體, 通過設(shè)置Text實(shí)現(xiàn)圖標(biāo)
<TextBlock FontFamily="/WpfApplication1;component/Resources/#iconfont" Text=""
FontSize="22" Foreground="#918C8C" VerticalAlignment="Center"></TextBlock>4.在Content區(qū)域, 利用一個(gè)stackPanel面板 和多個(gè) 單選按鈕組成子元素【同時(shí)修改原生的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}">頂部導(dǎo)航</RadioButton>
<RadioButton Style="{DynamicResource RadioButtonStyle}">通知中心</RadioButton>
<RadioButton Style="{DynamicResource RadioButtonStyle}">藍(lán)牙設(shè)置</RadioButton>
</StackPanel>
</Expander.Content>5.修改stackpanel面板背景色, 打到header與子元素背景產(chǎn)生一定的色差 【圖上藍(lán)色區(qū)域】
6.給RadioButton添加一個(gè)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主要用于設(shè)置子元素距離左側(cè)邊距-->
<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"/> <!-- 用于設(shè)置選中的左側(cè)樹形邊框-->
<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"> <!--當(dāng)選中的時(shí)候, 改變字體的顏色, 同時(shí)左側(cè)加一條寬度為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>到此這篇關(guān)于對(duì)WPF中Expander控件美化的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
asp.net頁面master頁面與ascx用戶控件傳值的問題
aspx 頁面,master頁面與ascx用戶控件傳值的問題2010-03-03
這篇文章主要介紹了ASP.NET Core MVC壓縮樣式、腳本詳解的相關(guān)資料,需要的朋友可以參考下2017-02-02
.net core高吞吐遠(yuǎn)程方法如何調(diào)用組件XRPC詳解
這篇文章主要給大家介紹了關(guān)于.net core高吞吐遠(yuǎn)程方法如何調(diào)用組件XRPC的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用.net core具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了.net 添加Cookie的4種方法，有需要的朋友可以參考一下2014-01-01
本文詳細(xì)講解了.Net?Core日志記錄的核心機(jī)制，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
Asp.net 獲取指定目錄下的后綴名為".doc" 的所有文件名和文件路徑
Asp.net 獲取指定目錄下的后綴名為“.doc” 的所有文件名和文件路徑,幫寫一個(gè)方法2011-07-07
asp.net操作Word實(shí)現(xiàn)批量替換
這篇文章主要介紹了asp.net操作Word實(shí)現(xiàn)批量替換的方法，需要的朋友可以參考下2015-10-10
這篇文章主要介紹了ASP.NET中為GridView添加刪除提示框的方法,可實(shí)現(xiàn)非常人性化的刪除提示功能,需要的朋友可以參考下2015-06-06
DropDownList綁定數(shù)據(jù)表實(shí)現(xiàn)兩級(jí)聯(lián)動(dòng)示例
這篇文章主要介紹了DropDownList綁定數(shù)據(jù)表實(shí)現(xiàn)兩級(jí)聯(lián)動(dòng)具體實(shí)現(xiàn),需要的朋友可以參考下2014-03-03
.net中string類型可以作為lock的鎖對(duì)象嗎
lock 關(guān)鍵字是用于在多線程編程中實(shí)現(xiàn)同步和互斥訪問的關(guān)鍵字，它的作用是確保共享資源在任意時(shí)刻只能被一個(gè)線程訪問，從而避免出現(xiàn)競態(tài)條件（race condition）和數(shù)據(jù)不一致的問題，這篇文章主要介紹了string類型可以作為lock的鎖對(duì)象嗎,需要的朋友可以參考下2023-06-06