2. 程式人生 > 程式設計 >對WPF中Expander控制元件美化

對WPF中Expander控制元件美化

阿新 • • 發佈：2022-01-26

示例圖：

對WPF中Expander控制元件美化

Expander控制元件功能很常見,一般用於系統左側的選單收縮面板。

主要的組成

一個頭部(header) 和 一個 內容(content) 組成。

 <Expander ExpandDirection="Down"  SnapsToDevicePixels="True" VerticalAlignment="Top" Style="{DynamicResource ExpanderStyle1}" >
                <Expander.Header>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock  FontFamily="/WpfApplication1;component/Resources/#iconfont" Text="&#xe60c;" 
                                    FontSize="22" Foreground="#918C8C" VerticalAlignment="Center"></TextBlock>
                        <TextBlock FontSize="25" Text="首頁" Margin="8,-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}">頂部導航</RadioButton>
                        <RadioButton Style="{DynamicResource RadioButtonStyle}">通知中心</RadioButton>
                        <RadioButton Style="{DynamicResource RadioButtonStyle}">藍芽設定</RadioButton>
                    </StackPanel>
                </Expander.Content>
            </Expander>

為了修改掉原生的樣式,重新定義了一個Style /ExpanderStyle1

1.將原有的左側圓形刪除

2.把左側的箭頭移動至右側 【主要修改紅色加粗部分調整】

<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" 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">
                                                         http://www.cppcns.com
 
      <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.在頭部同時添加了一個字型圖示,用FontFamily繫結字型,通過設定Text實現圖示

<TextBlock  FontFamily="/WpfApplication1;component/Resources/#iconfont" Text=""
                                   FontSize="22" Foreground="#918C8C" VerticalAlignment="Center"></TextBlock>

4.在Content區域,利用一個stackPanel面板 和多個 單選按鈕組成子元素【同時修改原生的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}">頂部導航</RadioButton>
                        <RadioButton Style="{DynamicResource RadioButtonStyle}">通知中心</RadioButton>
                        <RadioButton Style="{DynamicResource RadioButtonStyle}">藍芽設定</RadioButton>
                    </StackPanel>
                </Expander.Content>

5.修改stackpanel面板背景色,打到header與子元素背景產生一定的色差 【圖上藍色區域】

6.給RadioButton新增一個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主要用於設定子元素距離左側邊距-->
           <Setter Property="Margin" Value="25 8 0 0"/> 
           <Setter Property="FontSize" Value="20"/>
           <Setter Property="VerticalContentAlignment" Value="Center"/>
           <Setter Property="HorizontalContentAlignment" Value="Left"/>
           <Sehttp://www.cppcns.comtter 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"/>  　　　　　　　　　　　　　　　　<!-- 用於設定選中的左側樹形邊框-->
                           <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="TruamvhEraJTe" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                       </Grid>
                       <ControlTemplate.Triggers>
                           <Trigger Property="HasCoamvhEraJTntent" Value="True">
                               <Setter Property="FocusVisualStyle">
                                   <Setter.Value>
                                       <Style>
                                           <Setter Property="Control.Template">
                                               <Setter.Value>
                                                   <ControlTemplate>
                                                       <Rectangle Margin="14,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"/>
                           </Trigger>
                           <Trigger Property="IsMouseOver" Value="True">　　　　　　　　　　　　　　　　　　　<!--當選中的時候,改變字型的顏色,同時左側加一條寬度為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>

到此這篇關於對WPF中Expander控制元件美化的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支援我們。

相關推薦

對WPF中Expander控制元件美化

示例圖： Expander控制元件功能很常見,一般用於系統左側的選單收縮面板。 主要的組成

WPF中ComboBox控制元件的SelectedItem和SelectedValue的MVVM繫結

問題描述：左側是一個ListView控制元件，用於顯示User類的Name屬性，右側顯示其SelectedItem的其他屬性，包括Age, Address,和Category。其中Category用ComboBox表示。在下拉框選中其他category，可以更改User的屬性值

[翻譯] WPF 中使用者控制元件 DataContext/Binding 和依賴屬性的問題

[翻譯] WPF 中使用者控制元件 DataContext/Binding 和依賴屬性的問題 目錄 提問 回答

C#通過事件跨類呼叫WPF主視窗中的控制元件

xaml.cs檔案: 1 using System; 2 using System.Timers; 3 using System.Windows; 4 using System.Windows.Forms;

【WPF開發備忘】使用MVVM模式開發中列表控制元件內的按鈕事件無法觸發解決方法

實際使用MVVM進行WPF開發的時候，可能會用到列表控制元件中每行一個編輯或刪除按鈕，這時直接去繫結，發現無法響應：

WPF自定義Expander控制元件樣式實現酷炫Style

首先,看一下效果圖。 點我看視訊教程 實現思路 1.PS處理兩張選中得特效背景,一張為主選擇得效果圖,另外一張為次選擇項得效果圖。

WPF備忘錄（5）怎樣修改模板中的控制元件

     首先，想問大家一個問題，你們如果要給一個Button新增背景圖片會怎麼做？（呵呵，這個問題又點小白哈）

WPF 隱藏式控制元件

原文:WPF 隱藏式控制元件 沒用Popup用的面板控制元件，全部程式碼使用xaml的觸發器。

WPF分頁控制元件

最近要寫個程式要用到分頁控制元件，找到了很多好高階的，程式碼拿到了也看不懂。最後找到了一個能看懂的，完善了一下。

wpf Border 裝飾控制元件用法

Border 控制元件 Border控制元件是一個裝飾控制元件，通常用作繪製一個邊框、一個背景。再Border中只能允許有一個子控制元件，子控制元件裡面可包含多個子控制元件。

列舉對話方塊或FormView中的控制元件

下載demo project - 18.4 Kb 介紹 再一次,一個專案我正在呼籲一個特性(或特徵,如果你喜歡這個詞更好)我從來沒有實現——定心表單中的控制元件檢視,同時保持彼此之間的相對位置。 為了節省時間,我的第一站

WPF自定義控制元件--模擬手機密碼輸入控制元件，在輸入時顯示最後一個輸入密碼字元

using System.Threading; using System.Threading.Tasks; using System.Windows; using System.Windows.Controls;

c# 在自定義類中控制form窗體中的控制元件 賦值或修改屬性

c# 在自定義類中控制form窗體中的控制元件 賦值或修改屬性 首先在 自定義類 的外面 宣告一個 委託模組

WPF ListBox 子控制元件選中時設定背景色和邊框自定義樣式

<SolidColorBrush x:Key=\"ListBox.Static.Background\" Color=\"#FFFFFFFF\"/> <SolidColorBrush x:Key=\"ListBox.Static.Border\" Color=\"#FFABADB3\"/> <SolidColorBrush x:Key=\"ListBox.Disab

UGUI 中Dropdown控制元件的使用經驗

UGUI 中Dropdown控制元件的使用經驗 在Untiy的UGUI 剛出來的時候，是沒有“下拉列表”（Dropdown）控制元件的，這在無形中給我們的UI介面開發帶來困難，不過在Untiy5.2.2之後這個局面終於打破。下面我來

Android中的控制元件

Android中的控制元件 1．控制元件類的繼承結構 android.view.View類（檢視類）呈現了最基本的UI構造塊。一個檢視佔據螢幕上的一個方形區域，並且負責繪製和事件處理。

關於PyQt5中使用QScrollArea後，Layout中的控制元件不能正常顯示問題

在開發過程中，我使用QScrollArea後，在QGridLayout中動態添加了許多控制元件之後就如圖所示，很顯然控制元件重疊了，通過查詢資料之後，我先建立一個Widget，在通過setLayout（）把QGridLayout新增進入這

解決ant design vue中樹形控制元件defaultExpandAll設定無效的問題

頁面步驟： 1.設定a-tree標籤 2.預設的treeNodes值設定為空陣列 3.在mounted元件載入的時候給treeNodes的值賦值

WPF自定義控制元件二:Border控制元件與TextBlock控制元件輪播動畫

需求：實現Border輪播動畫與TextBlock動畫 XAML程式碼如下： <Window.Resources> <Storyboard x:Key=\"OnLoaded1\" RepeatBehavior=\"Forever\">

WPF：TextBox控制元件禁用中文輸入

需求： TextBox控制元件只允許輸入數字或英文字母 分析： 不允許中文輸入：可以通過禁用輸入法實現