首先,看一下效果圖。

點我看視訊教程

實現思路

1.PS處理兩張選中得特效背景,一張為主選擇得效果圖,另外一張為次選擇項得效果圖。



圖片資源定義

        <!--靜態資源-->
        <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樣式實現:

• 1.自定義Expander樣式,Expander樣式模板中,主要分為兩個部分,1.ToggleButton 2.ContentPresenter
• 2.ToogleButton主要通過IsChecked進行觸發器控制設定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樣式實現

        <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=TynbzlvoIQ"{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 Padwww.cppcns.comding}"
                                              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}"/>
              TynbzlvoIQ          </DockPanel>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsExpanded" Value="true">
                                <Setter Property="Visibility" TargetName="ExpandSite" Value="Visible"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Expander引用樣式部分程式碼:

到此這篇關於WPF自定義Expander控制元件樣式實現酷炫Style的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支援我們。