自定义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人员即可
<Border.Background>
<ImageBrush ImageSource="弧形背景图.png"></ImageBrush>
</Border.Background>
作者:唐宋元明清2188
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须在文章页面给出原文连接,否则保留追究法律责任的权利。