WPF 自定义Expander

自定义Exander，收缩侧边栏

 

样式如下

<Grid>
        <Grid.Resources>
            <ControlTemplate x:Key="ExpanderControlTemplate1" TargetType="{x:Type Expander}">
                <Border x:Name="ExpanderBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3" SnapsToDevicePixels="True">
                    <Border.Background>
                        <ImageBrush ImageSource="弧形背景图.png">ImageBrush>
                    Border.Background>
                    <DockPanel>
                        <ToggleButton x:Name="HeaderSite" HorizontalAlignment="Center" 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.Template>
                                <ControlTemplate TargetType="ToggleButton">
                                    <Grid x:Name="ToggleGrid">
                                        <StackPanel Orientation="Horizontal">
                                            <Border x:Name="ToggleBoder1" Height="30" Width="30" Background="#FF5A83CF" CornerRadius="60,0,0,0">Border>
                                            <Border x:Name="ToggleBoder2" Height="30" Width="30" Background="#FF5A83CF" CornerRadius="0,60,0,0">Border>
                                        StackPanel>
                                        <Canvas Height="30" Width="60">
                                            <Path x:Name="TogglePath" Data="M16,25 L30,10 46,25" Stroke="White" StrokeThickness="3">Path>
                                        Canvas>
                                    Grid>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsChecked" Value="True">
                                            <Setter Property="Data" TargetName="TogglePath" Value="M16,10 L30,25 46,10"/>
                                        Trigger>
                                        <Trigger Property="IsMouseOver" Value="True">
                                            <Setter Property="BorderBrush" TargetName="ToggleBoder1" Value="#FF3C7FB1"/>
                                            <Setter Property="BorderBrush" TargetName="ToggleBoder2" Value="#FF3C7FB1"/>
                                        Trigger>
                                        <Trigger Property="IsPressed" Value="True">
                                            <Setter Property="BorderBrush" TargetName="ToggleBoder1" Value="#FF3C7FB1"/>
                                            <Setter Property="BorderBrush" TargetName="ToggleBoder2" Value="#FF3C7FB1"/>
                                        Trigger>
                                        <Trigger Property="IsEnabled" Value="False">
                                            <Setter Property="BorderBrush" TargetName="ToggleBoder1" Value="Transparent"/>
                                            <Setter Property="BorderBrush" TargetName="ToggleBoder2" Value="Transparent"/>
                                        Trigger>
                                    ControlTemplate.Triggers>
                                ControlTemplate>

                            ToggleButton.Template>
                        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="IsExpanded" Value="False">
                        <Setter Property="Background" TargetName="ExpanderBorder" Value="{x:Null}"/>
                    Trigger>
                    <Trigger Property="ExpandDirection" Value="Up">
                        <Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Top"/>
                        <Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Bottom"/>
                    Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                    Trigger>
                ControlTemplate.Triggers>
            ControlTemplate>
        Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition>RowDefinition>
            <RowDefinition Height="Auto">RowDefinition>
        Grid.RowDefinitions>
        <Expander IsExpanded="True" Grid.Row="1" Cursor="Hand" Template="{DynamicResource ExpanderControlTemplate1}">
            <Border Background="LightBlue" Height="100">Border>
        Expander>
    Grid>

Style中，可以设置一个图片的背景，如弧形的，样式会很好看。图片找项目UI人员即可

　　　　

 

 

作者： 唐宋元明清2188

出处： http://www.cnblogs.com/kybs0/

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须在文章页面给出原文连接，否则保留追究法律责任的权利。