Silverlight中利用ListBox特性实现单选按钮组RadioButtonList和复选按钮组CheckBoxList的功能

用过Silverlight都知道，在Silverlight控件中没有类似于Asp。net中的单选按钮组RadioButtonList和复选按钮组CheckBoxList。

下面就要利用ListBox来实现单选按钮组RadioButtonList和复选按钮组CheckBoxList。

ListBox中有一个SelectionMode的属性来设置单选还是复选，所以我们只需要一个控件就可分别实现RadioButtonList和CheckBoxList两个控件的功能。

代码如下：

 public class SysChecks : ListBox
    {
        public SysChecks()
        {

            this.DefaultStyleKey = typeof(SysChecks);
            HorizontalAlignment = HorizontalAlignment.Stretch;
            VerticalAlignment = VerticalAlignment.Stretch;

        }
      
       
        public override void OnApplyTemplate()
        {

　　　　　　//根据单选复选设置不同样式
            if (SelectionMode == SelectionMode.Single)
            {
                this.ItemContainerStyle = HtmlUtility.GetStyle("RadioButtonItem");
            }
            else if (SelectionMode == SelectionMode.Multiple)
            {
                this.ItemContainerStyle = HtmlUtility.GetStyle("CheckBoxItem");
            }
            base.OnApplyTemplate();
          
        }
    }

样式代码如下

 

 <Style TargetType="local:SysChecks">
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"  VerticalAlignment="Top" />
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
    </Style>   

<!--单选按钮样式--> 

  <Style x:Key="RadioButtonItem" TargetType="ListBoxItem">
        <Setter Property="Template" >
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem" >
                    <Grid Background="{TemplateBinding Background}" Height="25"   HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="Center">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"></ColumnDefinition>
                            <ColumnDefinition Width="*"></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Opacity" Duration="0" To=".55" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected" />
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="CheckIcon" Storyboard.TargetProperty="(UIElement.Opacity)" Duration="0" To="1"/>
                                  </Storyboard>
                                </VisualState>
                            </VisualStateGroup>                           
                        </VisualStateManager.VisualStateGroups>
                        <Ellipse x:Name="BoxOuter" Width="14" Height="14"  Stroke="#000000"  StrokeThickness="1" />
                        <Ellipse x:Name="BoxMiddle" Width="12" Height="12" Fill="#FFFFFFFF" Stroke="#FFC4DBEE"  StrokeThickness="1" />
                        <Ellipse x:Name="CheckIcon" Fill="#FF333333" Width="6" Height="6" Opacity="0" />
                        <ContentPresenter Grid.Column="1"
                              x:Name="contentPresenter"
                              Content="{TemplateBinding Content}"
                                           VerticalAlignment="Center"
                              Margin="{TemplateBinding Padding}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
 
<!--复选按钮样式-->
 <Style x:Key="CheckBoxItem" TargetType="ListBoxItem">
        <Setter Property="Template" >
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem" >
                    <Grid Background="{TemplateBinding Background}" Height="25"   HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="Top">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"></ColumnDefinition>
                            <ColumnDefinition Width="*"></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Opacity" Duration="0" To=".55" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected" />
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="CheckIcon" Storyboard.TargetProperty="(UIElement.Opacity)" Duration="0" To="1"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Rectangle x:Name="BoxMiddle" Width="14" Height="14" Fill="#FFFFFFFF" Stroke="#FFC4DBEE"  StrokeThickness="1" />
                        <Path x:Name="CheckIcon" Margin="1,1,0,1.5" Fill="#FF333333" Stretch="Fill" Opacity="0" Width="10.5" Height="10" 
                              Data="M102.03442,598.79645 L105.22962,597.78918 L106.78825,600.42358 C106.78825,600.42358 108.51028,595.74304 110.21724,593.60419 C112.00967,591.35822 114.89314,591.42316 114.89314,591.42316 C114.89314,591.42316 112.67844,593.42645 111.93174,594.44464 C110.7449,596.06293 107.15683,604.13837 107.15683,604.13837 z" 
                              FlowDirection="LeftToRight"/>
                        <ContentPresenter Grid.Column="1"
                              x:Name="contentPresenter"
                              Content="{TemplateBinding Content}"
                              ContentTemplate="{TemplateBinding ContentTemplate}"
                                           VerticalAlignment="Center"
                              Margin="{TemplateBinding Padding}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
 

效果如如下