WPF效果第一百八十八篇之再玩Expander

大端午节的在屋里吹着空调撸着代码真是酸爽;闲话也不多扯,直接看今天要分享的效果:

1、关于简单的布局设计:

2、前台先来个死布局,回头ListBox改模板:

<Expander ExpandDirection="Left" Header="控制卡" VerticalAlignment="Bottom" HorizontalAlignment="Right" Style="{StaticResource LeftExpanderStyle}"><StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" HorizontalAlignment="Stretch"><Expander Header="信号分配卡" Style="{StaticResource ExpanderStyle}"><ListBox Style="{StaticResource FristListListBox}" ItemsSource="{Binding OneDataContext}" /></Expander><Expander Header="信号分配卡" Style="{StaticResource ExpanderStyle}"><ListBox Style="{StaticResource FristListListBox}" ItemsSource="{Binding TwoDataContext}" /></Expander><Expander Header="信号分配卡" Style="{StaticResource ExpanderStyle}"><ListBox Style="{StaticResource FristListListBox}" ItemsSource="{Binding ThreeDataContext}" /></Expander></StackPanel>
</Expander>

3、Expander的模板：

<Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type Expander}"><Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="3" SnapsToDevicePixels="True"><Grid><Grid.ColumnDefinitions><ColumnDefinition /><ColumnDefinition Width="Auto" /></Grid.ColumnDefinitions><ContentPresenter x:Name="ExpandSite" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="{TemplateBinding Padding}" Visibility="Collapsed" /><ToggleButton Grid.Column="1" 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}" FocusVisualStyle="{x:Null}" VerticalAlignment="Bottom" HorizontalAlignment="Left" Height="40" /></Grid></Border></ControlTemplate></Setter.Value>
</Setter>

4、Expander的Left属性触发器:

<Trigger Property="ExpandDirection" Value="Left"><Setter Property="Style" TargetName="HeaderSite"><Setter.Value><Style TargetType="{x:Type ToggleButton}"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type ToggleButton}"><Border Padding="{TemplateBinding Padding}"><Grid Background="Transparent" SnapsToDevicePixels="False"><Border BorderBrush="#282BFF" BorderThickness="1" Padding="0"><WrapPanel VerticalAlignment="Center"><Path x:Name="arrow" Data="M0,0L8.5539884,0 17.246985,10.709991 17.32099,10.799011 17.359992,10.752991 21.637002,16.022003 17.359992,21.291992 8.6659879,32 0.11099243,32 9.9780006,19.847992 13.043004,16.069 12.970006,15.977997 9.8639869,12.153992z" SnapsToDevicePixels="False" Stroke="Transparent" StrokeThickness="0" Fill="White" Stretch="Uniform" Width="20" Height="20" /><CheckBox Margin="10,0,0,0" Content="{TemplateBinding Content}" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" ContentStringFormat="{TemplateBinding ContentStringFormat}" Foreground="{TemplateBinding Foreground}" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="Center" VerticalAlignment="Center" /></WrapPanel></Border></Grid></Border><ControlTemplate.Triggers><Trigger Property="IsChecked" Value="True"><Setter Property="Data" TargetName="arrow" Value="M12.970992,0L21.524992,0 11.658996,12.152008 8.5930022,15.931 8.6660002,16.020996 11.772003,19.846008 21.636,32 13.082,32 4.3889922,21.290009 4.3150023,21.200989 4.2769927,21.247009 0,15.977997 4.2769927,10.708008z" /></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style></Setter.Value></Setter>
</Trigger>

5、ListBox的ItemsPanel：

<ItemsPanelTemplate x:Key="FristItemsPanelTemplate"><VirtualizingStackPanel VerticalAlignment="Bottom" />
</ItemsPanelTemplate>

6、关于ListBoxItem的Template：

<Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type ListBoxItem}"><StackPanel Background="Transparent"><Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="4" Height="60" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true"><TextBlock Text="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White" FontSize="24" /></Border><Path Data="M13.002003,0L25.984006,13.004019 24.565005,14.420021 13.823991,3.6604153 13.823991,31.999021 11.818991,31.999021 11.818991,4.0220598 1.4180002,14.441021 0,13.025019z" Margin="0,10,0,0" Stretch="Fill" Fill="#FFFFFFFF" Width="26" Height="40" /></StackPanel></ControlTemplate></Setter.Value>
</Setter>

7、最后预告下一篇的效果:

最终简单的效果先这样吧;以后有时间的话,可以再去摸索一下更复杂的效果;编程不息、Bug不止、无Bug、无生活;改bug的冷静、编码的激情、完成后的喜悦、挖坑的激动、填坑的兴奋;这也许就是屌丝程序员的乐趣吧;今天就到这里吧;希望自己有动力一步一步坚持下去;生命不息,代码不止;大家抽空可以看看今天分享的效果,有好的意见和想法,可以在留言板随意留言;我看到后会第一时间回复大家,多谢大家的一直默默的关注和支持!如果觉得不错,那就伸出您的小手点个赞并关注一下,多谢您的支持！