《WPF》Expander控件簡單美化

 示例圖：

 

 

 

 

 

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

 

1.主要的組成

 一個頭部(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,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}">頂部導航</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,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.在頭部同時添加了一個字體圖標, 用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"/>
            <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"/>
  　　　　　　　　　　　　　　　　<!-- 用於設置選中的左側樹形邊框-->
                            <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">
　　　　　　　　　　　　　　　　　　　<!--當選中的時候, 改變字體的顏色, 同時左側加一條寬度為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>