WPF界面设计技巧（8）—自制山寨版CheckListBox

<!--ListBox样式-->

<Style TargetType="ListBox">

<Setter Property="BorderBrush" Value="#BDD4F1"/>

<Setter Property="BorderThickness" Value="1"/>

<Setter Property="Background" Value="#F8F7F5"/>

<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden"/>

<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>

<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>

<Setter Property="VerticalContentAlignment" Value="Center"/>

</Style>

<!--ListBoxItem样式-->

<Style TargetType="ListBoxItem">

<Setter Property="Foreground" Value="#B5BABF"/>

<Setter Property="OverridesDefaultStyle" Value="True"/>

<Setter Property="Height" Value="24"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="ListBoxItem">

<Border Name="back" BorderBrush="#F8F7F5" BorderThickness="0,1,0,1">

<Border.Background>

<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

<GradientBrush.GradientStops>

<GradientStopCollection>

<GradientStop Color="#F8F7F5" Offset="0.0"/>

<GradientStop Color="#F8F7F5" Offset="0.5"/>

<GradientStop Color="#F8F7F5" Offset="0.51"/>

<GradientStop Color="#F8F7F5" Offset="1"/>

</GradientStopCollection>

</GradientBrush.GradientStops>

</LinearGradientBrush>

</Border.Background>

<ContentPresenter Margin="2" VerticalAlignment="Center"/>

</Border>

<ControlTemplate.Triggers>

<Trigger Property="IsSelected" Value="True">

<Trigger.EnterActions>

<BeginStoryboard>

<Storyboard>

<DoubleAnimation To="32" Duration="0:0:0.3" Storyboard.TargetProperty="Height"/>

<ColorAnimation To="#F3C37C" Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" />

<ColorAnimation To="#952B00" Duration="0:0:0.2" Storyboard.TargetProperty="(ListBoxItem.Foreground).(SolidColorBrush.Color)" />

<ColorAnimation To="#FFF" Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />

<ColorAnimation To="#FFEF99" Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />

<ColorAnimation To="#FFE13F" Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[2].(GradientStop.Color)" />

<ColorAnimation To="#FFF3B0" Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[3].(GradientStop.Color)" />

</Storyboard>

</BeginStoryboard>

</Trigger.EnterActions>

<Trigger.ExitActions>

<BeginStoryboard>

<Storyboard>

<DoubleAnimation BeginTime="0:0:0.4" Duration="0:0:0.2" Storyboard.TargetProperty="Height"/>

<ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" />

<ColorAnimation Duration="0:0:0.2" Storyboard.TargetProperty="(ListBoxItem.Foreground).(SolidColorBrush.Color)" />

<ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />

<ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />

<ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[2].(GradientStop.Color)" />

<ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[3].(GradientStop.Color)" />

</Storyboard>

</BeginStoryboard>

</Trigger.ExitActions>

</Trigger>

<Trigger Property="IsMouseOver" Value="True">

<Trigger.EnterActions>

<BeginStoryboard>

<Storyboard>

<ColorAnimation To="#D8E6F5" Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" />

<ColorAnimation To="#617A98" Duration="0:0:0.2" Storyboard.TargetProperty="(ListBoxItem.Foreground).(SolidColorBrush.Color)" />

<ColorAnimation To="#F6F9FD" Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />

<ColorAnimation To="#E0EBF7" Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />

<ColorAnimation To="#D7E5F6" Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[2].(GradientStop.Color)" />

<ColorAnimation To="#F6F9FD" Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[3].(GradientStop.Color)" />

</Storyboard>

</BeginStoryboard>

</Trigger.EnterActions>

<Trigger.ExitActions>

<BeginStoryboard>

<Storyboard>

<ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" />

<ColorAnimation Duration="0:0:0.2" Storyboard.TargetProperty="(ListBoxItem.Foreground).(SolidColorBrush.Color)" />

<ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />

<ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />

<ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[2].(GradientStop.Color)" />

<ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[3].(GradientStop.Color)" />

</Storyboard>

</BeginStoryboard>

</Trigger.ExitActions>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

修改 ContentPresenter 元素处的代码，用一个 CheckBox 将其包起来：

<CheckBox Margin="2,0,0,0" VerticalAlignment="Center" IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent},Path=IsSelected,Mode=TwoWay}">

<ContentPresenter Margin="2"/>

</CheckBox>

从上面的代码我们可以看到，CheckBox 的 IsChecked 属性双向绑定到了列表项的 IsSelected 属性上，这时勾选 CheckBox 就会使列表项被选中，反之亦然，这就是模拟 CheckListBox 的技术核心所在。

现在我们的界面是这个样子了：



再完成最后一步，修改 ListBox 的选取模式为多选：



OK，运行一下就是这样了：



简直和真的一样！

如何通过代码获取选定的项呢？这样就可以了：listBox1.SelectedItems

再附送一个小经验：当你程序运行后，在窗体的“Initialized”事件中自动从配置文件读取到数据，并将之绑定到 ListBox 后，想要将其默认设为全选的话，应当在窗体的“ContentRendered”事件中执行全选命令“listBox1.SelectAll()”，在“Loaded”、“Initialized”等事件中执行均无效，推测可能是控件载入到绑定数据之间会存在一定延迟。

最后是广告：本大寨主征押寨夫人数名，名额无限，先到为大。

源代码下载