使用模板创建RadioButton-List控件

 

前言：本文通过一个简单控件的创建，来看看silverlight的模板系统到底有多么强大（当然这只是强大之处的一点点点....）写作本文的灵感来自于我在互联网上闲逛，看到有朋友需要这样的需求，同时也想通过此练习来学习silverlight，但最希望的是本文能对有需要的朋友有所帮助。

 

 

---

 

 

 

控件需求：使用单选按钮来显示条目和接受选择的列表框

大概样子如下：

 

方案一：通过silverlight的元素合成思想

这个控件可以由以下两元素合成：

1：RadioButton

2：ListBox

于是，最简单的代码就出来了:

 

<ListBox  Width="150" Height="60">
            <RadioButton Content="单选按钮一"/>
            <RadioButton Content="单选按钮二"/>
            <RadioButton Content="单选按钮三"/>
            <RadioButton Content="单选按钮四"/>
        </ListBox>

 

看看效果吧:

 

 

看起来还不错~~那如果，我们的需求有变化，需要默认选择第一个单选按钮，那继续改改吧：

 

 

<ListBox  Width="150" Height="60">
            <ListBoxItem IsSelected="True">
            <RadioButton Content="单选按钮一"/>
            </ListBoxItem>
            <RadioButton Content="单选按钮二"/>
            <RadioButton Content="单选按钮三"/>
            <RadioButton Content="单选按钮四"/>
        </ListBox>

 

 

结果如下：

 列表项第一个是被选中了，但是单选按钮仍旧没有被选中，那我们就继续改改：

 

 

 

<ListBox  Width="150" Height="60">
            <ListBoxItem>
            <RadioButton Content="单选按钮一" IsChecked="True"/>
            </ListBoxItem>
            <RadioButton Content="单选按钮二"/>
            <RadioButton Content="单选按钮三"/>
            <RadioButton Content="单选按钮四"/>
        </ListBox>

 

把第一个按钮默认是选中的，看下结果:

 默认选中是可以了，但是，当我们点击第二个按钮的时候，发现第一个按钮还是选中的，这个问题好解决，把单选按钮归为一组就行了：

 

 <ListBox  Width="150" Height="60">
            <ListBoxItem >
            <RadioButton Content="单选按钮一" IsChecked="True" GroupName="go"/>
            </ListBoxItem>
            <RadioButton Content="单选按钮二" GroupName="go"/>
            <RadioButton Content="单选按钮三" GroupName="go"/>
            <RadioButton Content="单选按钮四" GroupName="go"/>
        </ListBox>

 

 

这样，一个目标需求的控件也算是合成了，但是其实它算不上正真意义上的控件，当你点击列表项的时候，单选按钮是不会被选中的，除非你点击列表项中的单选按钮，这样才能选中。其实也挺强大了，这里是把RadionButton作为ListBox的内容控件。那么，接下来，让我们再来看看运用模板技术来更好的实现这个目标需求。

 

方案二：利用模板技术和绑定技术来实现

需要用到ListBox的ItemContainerStyle属性：

获取或设置在呈现项容器时使用的样式。

 

C#

public Style ItemContainerStyle { get; set; }

XAML 属性元素用法

<ListBox>
  <ListBox.ItemContainerStyle>
    inlineStyle
  </ListBox.ItemContainerStyle>
</ListBox>

然后制作ListBoxItem的模板，把它的模板内容设定为RadionButton，然后把RadioButton的IsChecked属性绑定到ListBoxItem的IsSelected属性上：

 

<ListBox ScrollViewer.VerticalScrollBarVisibility="Visible" Width="100" Height="60" x:Name="lb">
             
            <ListBox.ItemContainerStyle>
                <Style  TargetType="ListBoxItem">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="ListBoxItem">
                                <RadioButton IsChecked="{Binding Path=IsSelected,RelativeSource={RelativeSource TemplatedParent}}"
                                             Content="{TemplateBinding Property=Content}"/>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ListBox.ItemContainerStyle>
            <ListBoxItem  IsSelected="True">
                <TextBlock>单选按钮一</TextBlock>
            </ListBoxItem>   
                <TextBlock>单选按钮二</TextBlock>   
                <TextBlock>单选按钮三</TextBlock>
                <TextBlock>单选按钮四</TextBlock>
        </ListBox>

 

 

这样，当你选择列表项的时候，按钮的选中属性就会随着列表项的改变而改变，并且单选按钮也不需要分组了，因为这里它不是列表控件的内容控件了。看下最终效果: