Silverlight学习点滴之二——为RadioButton换上新衣

概述WPF/Silverlight有个叫做模板的东西，可以为控件创建自定义的样式。 比如，有一组RadioButton（俗称“单选框”），在WrapPanel中自由排列，如下图的样子：    打算山寨一下淘宝网的界面，做成这样：   开始折腾···   创建UserControl 自定义的用户控件，也就是图中“数据生成时间”以及下方的RadioButton。 取名FilterBox，布局很简单，Gri

WPF/Silverlight有个叫做模板的东西，可以为控件创建自定义的样式。

比如，有一组Radiobutton（俗称“单选框”），在WrapPanel中自由排列，如下图的样子： 

 

打算山寨一下淘宝网的界面，做成这样：

 

开始折腾···

创建UserControl

自定义的用户控件，也就是图中“数据生成时间”以及下方的Radiobutton。
取名FilterBox，布局很简单，GrID上方是一个标题，下方WrapPanel：

<UserControl>
    <GrID x:name="LayoutRoot"Background="transparent">
        <GrID.RowDeFinitions>
            <RowDeFinition Height="35*"/>
            <RowDeFinition Height="91*"/>
        </GrID.RowDeFinitions>
        <toolkit:WrapPanel name="wrap"GrID.Row="1"margin="0"HorizontalAlignment="Stretch"VerticalAlignment="Stretch">
        </toolkit:WrapPanel>
        <TextBlock name="Title"margin="0"Height="auto"Text="标题"HorizontalAlignment="Center"VerticalAlignment="Center">
        </TextBlock>
    </GrID>
</UserControl>

WrapPanel能够让他的Children横向排列，一行排满之后，会自动换行，用在这里是在适合不过了。

创建样式

选中的Radiobutton样式可以看成一个粗边框+右下角的一个三角形；未选中的则用一个细的边框表示。

在UserControl下面增加Resources属性：

<Control.Resources>
    <!--控件模板，Key为必需，并且设定目标类型为Radiobutton-->
    <ControlTemplate x:Key="Checked"targettype="Radiobutton">
        <GrID>
            <!--选中状态：粗边框-->
            <border margin="1"borderBrush="Blue"borderThickness="2"padding="4,1,4,0">
                <!--内部的文字内容绑定了Radiobutton的Content属性-->
                <TextBlock Text="{TemplateBinding ContentControl.Content}"/>
            </border>
            <!--三角形用polygon表示-->
            <polygon margin="1"Points="10,1 10,10 0,10"HorizontalAlignment="Right"VerticalAlignment="Bottom">
                <polygon.Fill>
                    <SolIDcolorBrush color="Blue"/>
                </polygon.Fill>
            </polygon>
        </GrID>
    </ControlTemplate>
    <ControlTemplate x:Key="UnChecked"targettype="Radiobutton">
        <GrID>
            <!--未选中状态：细边框-->
            <border margin="2"borderBrush="Gray"borderThickness="1"padding="4,0">
                <TextBlock Text="{TemplateBinding ContentControl.Content}"/>
            </border>
        </GrID>
    </ControlTemplate>
</Control.Resources>

在WrapPanel中添加两个Radiobutton，分别设定两种不同样式，转到设计界面查看效果：

<toolkit:WrapPanel name="wrap"GrID.Row="1"HorizontalAlignment="Stretch"margin="0"VerticalAlignment="Stretch">
    <Radiobutton Content="Checked"Template="{StaticResource Checked}"/>
    <Radiobutton Content="UnChecked"Template="{StaticResource UnChecked}"/>
</toolkit:WrapPanel>

实现

在实际使用中，需要动态添加Radiobutton。
在WPF中，可以使用Setter样式，对控件某个属性的不同状态设定不同的样式（即选择不同的模板）；而在Silverlight中，Setter是不被支持的，所以只能编写C#代码实现：

publicpartialclassFilterBox : UserControl
{
    publicstringTitle { get{ returnTitle.Text; } }

    publicstringSelectedValue { get; privateset; }

    publiceventRoutedEventHandler CheckChanged;

    publicFilterBox()
    {
        InitializeComponent();
    }

    publicFilterBox(stringname,IEnumerable<string> values)
    {
        InitializeComponent();
        this.Title.Text = name;

        // 添加“全部”选择项
        var c = CreateItem("全部");
        c.IsChecked = true;
        this.wrap.Children.Add(c);
        this.SelectedValue = c.Content asstring;

        // 添加一般选择项
        foreach(var i invalues)
            this.wrap.Children.Add(CreateItem(i));
    }

    privatevoIDWhenCheckChanged(objectsender,RoutedEventArgs e)
    {
        var c = sender asRadiobutton;
        var isChecked = c.IsChecked ?? false;
        // 依据IsChecked属性值选择模板
        c.Template = Resources[isChecked ? "Checked": "UnChecked"] asControlTemplate;

        if(isChecked)
        {
            this.SelectedValue = c.Content asstring;
            // 触发CheckChanged事件，以便外部代码访问
            if(CheckChanged != null)
                CheckChanged(this,null);
        }
    }

    // 创建新的单选项
    privateradiobutton CreateItem(stringitem)
    {
        var radio = newRadiobutton();
        radio.Content = item;
        // 设定缺省的UnChecked模板
        radio.Template = this.Resources["UnChecked"] asControlTemplate;
        // 订阅事件
        radio.Checked += WhenCheckChanged;
        radio.Unchecked += WhenCheckChanged;
        returnradio;
    }
}

接着创建一个ChilDWindow用户控件，取名ChilDWindowX。在Loaded事件响应方法中创建FilterBox：

privatevoIDChilDWindow_Loaded(objectsender,RoutedEventArgs e)
{
    LayoutRoot.Children.Add(newFilterBox("数据生成时间",
        newstring[] { "更早","2006","2007","2008","2009","2010","2011"}));
}

总结

以上是内存溢出为你收集整理的Silverlight学习点滴之二——为RadioButton换上新衣全部内容，希望文章能够帮你解决Silverlight学习点滴之二——为RadioButton换上新衣所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。