制作一个CheckListBox控件

虽然CodePlex上的WPF扩展的XXX ToolKit源码中有一个CheckListBox控件，但是，就看它那源代码，也过于复杂了。并且，我也希望自己来编写一个CheckListBox控件。

所谓CheckListBox控件嘛，就是既可以Select又可以Check的ListBox控件。有人会说，不用写控件，自定义一个ListBoxItem的模板就行了，也确实可以这样做，不过，还是有些问题的，如果只是重定义ListBoxItem的模板，那仅仅是为其UI上加了个可以显示一个“勾”的东东而已，而对于逻辑是没有任何变化。

既然要可以Select又能Check，那显然只是重定义模板是不行的。ListBoxItem类本身有一个IsSelected属性，指示列表项是否被选中，而且，人家在ListBox中也有一个SelectedItems属性，可以获得ListBox控件的当前选中的所有项。

很明显，我们的CheckableListBoxItem要有一个IsChecked属性来指示列表项是否被Check，而在CheckListBox控件上应当有一个CheckedItems属性，可以获取当前所有被Checked的项。

刚开始，我是计划让CheckableListBoxItem从ContentControl类派生，CheckListBox从ItemsControl派生。但是，转念一想，其实这所谓的可以Check的ListBox就是ListBox和CheckBox控件的结合体，而大多数功能与ListBox控件相似，是没有必要自己重新来写ListBox的功能，所以，后来我决定：CheckableListBoxItem从ListBoxItem类派生，CheckListBox则从ListBox派生，但其中的项目的容器已经不是ListBox了，而是我继承的CheckableListBoxItem类。

有一点我们要明确的，熟悉WPF的朋友都知道，在WPF/SL/WP/Store App这一堆使用XAML布局UI的开发框架中，列表控件所获出来的项并不是项的容器，除非你在ListBox中直接用ListBoxItem作为对象加进列表控件的集合中，不然会根据你添加的项返回对应的内容，如果你放进去的是String，那么拿出来也是String；你放进去的是int，拿出来的也是int。

至于说为什么要这样做嘛，很多人不解了，ListBox里面明明是放ListBoxItem的，怎么直接返回其对象了？WPF说的是啥？MVVM，既然要MVVM，当然是你在绑定了哪个对象，取出来还是那个对象好了，这样就方便了。

好了，理论的扯完了，就上代码吧。

using System;
using System.Collections.Generic;
using System.Collections;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Collections.ObjectModel;

namespace MyListBox
{
    [StyleTypedProperty(Property = "ItemContainerStyle", StyleTargetType = typeof(CheckableListBoxItem))]
    public class CheckListBox : ListBox
    {
        ObservableCollection<object> m_checkedItems = null;
        Type m_itemContainerType = typeof(FrameworkElement);//项容器的类型
        public CheckListBox()
        {
            m_checkedItems = new ObservableCollection<object>();
            // 从CheckListBox类附加的特性中获取项目容器的类型
            var attr = this.GetType().GetCustomAttributes(typeof(StyleTypedPropertyAttribute), false);
            if (attr != null && attr.Length != 0)
            {
                StyleTypedPropertyAttribute sty = attr[0] as StyleTypedPropertyAttribute;
                if (sty != null)
                {
                    this.m_itemContainerType = sty.StyleTargetType;
                }
            }
        }

        public static DependencyProperty CheckedItemsProperty = DependencyProperty.Register("CheckedItems", typeof(IList), typeof(CheckListBox), new PropertyMetadata(null));

        public IList CheckedItems
        {
            get { return (IList)GetValue(CheckedItemsProperty); }
        }

        /// <summary>
        /// 创建项目容器
        /// </summary>
        protected override DependencyObject GetContainerForItemOverride()
        {
            return Activator.CreateInstance(this.m_itemContainerType) as DependencyObject;
        }

        /// <summary>
        /// 当从项目创建项容时，
        /// 为项目容器注册事件处理。
        /// </summary>
        protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
        {
            CheckableListBoxItem ckItem = element as CheckableListBoxItem;
            ckItem.Checked += clbitem_Checked;
            ckItem.UnChecked += clbitem_UnChecked;
            base.PrepareContainerForItemOverride(element, item);
        }

        /// <summary>
        /// 当项容被清空时，
        /// 解除事件处理程序。
        /// </summary>
        protected override void ClearContainerForItemOverride(DependencyObject element, object item)
        {
            CheckableListBoxItem ckItem = element as CheckableListBoxItem;
            ckItem.Checked -= clbitem_Checked;
            ckItem.UnChecked -= clbitem_UnChecked;
            base.ClearContainerForItemOverride(element, item);
        }


        void clbitem_UnChecked(object sender, RoutedEventArgs e)
        {
            CheckableListBoxItem citem = (CheckableListBoxItem)e.Source;
            object value = citem.Content;
            m_checkedItems.Remove(value);
            SetValue(CheckedItemsProperty, m_checkedItems);
        }

        void clbitem_Checked(object sender, RoutedEventArgs e)
        {
            CheckableListBoxItem citem = (CheckableListBoxItem)(e.Source);
            object value = citem.Content;
            if (m_checkedItems.SingleOrDefault(o => object.ReferenceEquals(o, value)) == null)
            {
                m_checkedItems.Add(value);
                SetValue(CheckedItemsProperty, m_checkedItems);
            }
        }
    }


    public class CheckableListBoxItem : ListBoxItem
    {
        static CheckableListBoxItem()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(CheckableListBoxItem),
                new FrameworkPropertyMetadata(typeof(CheckableListBoxItem)));
        }


        #region 属性
        public static readonly DependencyProperty IsCheckedProperty =
            DependencyProperty.Register("IsChecked", typeof(bool), typeof(CheckableListBoxItem), new PropertyMetadata(new PropertyChangedCallback(IsCheckedPropertyChanged)));

        private static void IsCheckedPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            CheckableListBoxItem lt = d as CheckableListBoxItem;
            if (lt !=null)
            {
                if (e.NewValue != e.OldValue)
                {
                    bool b = (bool)e.NewValue;
                    if (b== true)
                    {
                        lt.RaiseCheckedEvent();
                    }
                    else
                    {
                        lt.RaiseUnCheckedEvent();
                    }
                }
            }
        }

        /// <summary>
        /// 获取或设置控件是否被Check
        /// </summary>
        public bool IsChecked
        {
            get { return (bool)GetValue(IsCheckedProperty); }
            set { SetValue(IsCheckedProperty, value); }
        }
        #endregion

        #region 事件
        public static readonly RoutedEvent CheckedEvent =
            EventManager.RegisterRoutedEvent("Checked", RoutingStrategy.Bubble, typeof(RoutedEventHandler), typeof(CheckableListBoxItem));

        /// <summary>
        /// 当控件被Check后发生的事件
        /// </summary>
        public event RoutedEventHandler Checked
        {
            add
            {
                AddHandler(CheckedEvent, value);
            }
            remove
            {
                RemoveHandler(CheckedEvent, value);
            }
        }

        void RaiseCheckedEvent()
        {
            RoutedEventArgs arg = new RoutedEventArgs(CheckableListBoxItem.CheckedEvent);
            RaiseEvent(arg);
        }

        public static readonly RoutedEvent UnCheckedEvent = EventManager.RegisterRoutedEvent("UnChecked", RoutingStrategy.Bubble, typeof(RoutedEventHandler), typeof(CheckableListBoxItem));

        /// <summary>
        /// 当控件未被Check后发生
        /// </summary>
        public event RoutedEventHandler UnChecked
        {
            add { AddHandler(UnCheckedEvent, value); }
            remove { RemoveHandler(UnCheckedEvent, value); }
        }
        
        void RaiseUnCheckedEvent()
        {
            RaiseEvent(new RoutedEventArgs(UnCheckedEvent));
        }
        #endregion
    }

}

定义模板的XAML的核心部分如下：

    <ControlTemplate x:Key="toggleButtonTmp" TargetType="{x:Type ToggleButton}">
        <Border Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
            <Path x:Name="pc" Opacity="0" Margin="{TemplateBinding Padding}" Stretch="Uniform" Stroke="{TemplateBinding Foreground}" StrokeThickness="2.68">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0,13">
                            <PolyLineSegment Points="13,20 20,0"/>
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="IsChecked" Value="True">
                <Setter TargetName="pc" Property="Opacity" Value="1.0"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
    
    <Style TargetType="{x:Type local:CheckableListBoxItem}">
        <Setter Property="Padding" Value="14,2,0,2"/>
        <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:CheckableListBoxItem}">
                    <Border x:Name="bd" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                        <Grid Margin="2.1">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <ToggleButton x:Name="tog" Grid.Column="0" Margin="1" Width="18" Height="18" IsChecked="{Binding IsChecked, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Template="{StaticResource toggleButtonTmp}" Background="{StaticResource togglebtn_bg}"/>
                            <ContentPresenter Grid.Column="1" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ItemsControl}}}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ItemsControl}}}"/>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="ListBoxItem.IsSelected" Value="True">
                            <Setter Property="Background" TargetName="bd"  Value="{StaticResource selectedItemBrush}" />
                            <Setter Property="Control.Foreground" Value="{StaticResource selectedForeBrush}"/>
                            <Setter TargetName="tog" Property="Control.Foreground" Value="{StaticResource selectedTgbtnFore}"/>
                        </Trigger>
                        <MultiTrigger >
                            <MultiTrigger.Conditions>
                                <Condition Property="UIElement.IsMouseOver" Value="True"/>
                                <Condition Property="ListBoxItem.IsSelected" Value="False"/>
                            </MultiTrigger.Conditions> 
                            <Setter TargetName="bd" Property="Background" Value="{StaticResource hoverBrush}"/>
                        </MultiTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

接下来就是测试一下控件。

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <local:CheckListBox x:Name="lb" Grid.Column="0" SelectionMode="Multiple" ItemTemplate="{StaticResource stuTmp}"/>
        <Grid Grid.Column="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition/>
                <RowDefinition Height="auto"/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <TextBlock Grid.Row="0" Text="被Checked的项：" FontSize="17" Margin="5,3,0,2"/>
            <ListBox Grid.Row="1" ItemsSource="{Binding Path=CheckedItems,ElementName=lb}" Margin="5" ItemTemplate="{StaticResource stuTmp}"/>
            <TextBlock Grid.Row="2" Text="被Selected的项：" FontSize="17" Margin="5,0,0,2"/>
            <ListBox Grid.Row="3" Margin="5" ItemsSource="{Binding Path=SelectedItems,ElementName=lb}" ItemTemplate="{StaticResource stuTmp}"/>
        </Grid>
    </Grid>

******************************************************************

            lb.ItemsSource = new Student[]
            {
                new Student{ Name="狗", Age=30 },
                new Student{ Name="兔", Age=31 },
                new Student{ Name="蛇", Age=18 },
                new Student{ Name="鸡", Age=22 },
                new Student{ Name="猫", Age=24 },
                new Student{ Name="青蛙", Age=28 },
                new Student{ Name="猴", Age=19 }
            };

代码不完全，但主要的我都放出来了，随后我把所有代码都上传到【资源】中，相当优惠，0积分下载。

下图是最终的结果。