[Silverlight]一个简单的GroupBox控件

Silverlight没有提供GroupBox控件，自己动手写了一个。

Generic.xaml文件：

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Sample" 
    xmlns:sys="clr-namespace:System;assembly=mscorlib">

    <Style TargetType="local:GroupBox">
        <Setter Property="Background" Value="White"></Setter>
        <Setter Property="BorderBrush" Value="#687B8B"></Setter>
        <Setter Property="BorderThickness" Value="1"></Setter>
        <Setter Property="Padding" Value="6,10,6,6"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:GroupBox">
                    <Grid>
                        <Border Margin="0,8,0,0" CornerRadius="5"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}">
                            <ContentPresenter Margin="{TemplateBinding Padding}" ></ContentPresenter>
                        </Border>
                        <Border Margin="10,0,10,0" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Top"
                                Background="{TemplateBinding Background}" >
                            <TextBlock Margin="5,0" Text="{TemplateBinding Title}" ></TextBlock>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

 

GroupBox.cs文件：

using System.Windows;
using System.Windows.Controls;

namespace Sample
{
    /// <summary>
    /// 分组框。
    /// </summary>
    public class GroupBox : ContentControl
    {
        public GroupBox()
        {
            this.DefaultStyleKey = typeof(GroupBox);
        }

        public static readonly DependencyProperty TitleProperty =
            DependencyProperty.Register("Title", typeof (string), typeof (GroupBox), null);

        /// <summary>
        /// 获取或设置标题。
        /// </summary>
        public string Title
        {
            get { return (string) GetValue(TitleProperty); }
            set { SetValue(TitleProperty, value); }
        }
    }
}

使用示例代码：

<UserControl x:Class="AutoCompleteBoxSample.GroupBoxSample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="clr-namespace:Sample" Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Margin="30" Background="White">
        <local:GroupBox Title="GroupBox的标题" >
            <Button Content="GroupBox的内容"></Button>                
        </local:GroupBox>
    </Grid>
</UserControl>

示例效果图：

 

2010.04.28 补充：

如果使用Silverlight ToolKit，GroupBox类还可以直接从Silverlight ToolKit类库中的HeaderedContentControl类继承。改为从HeaderedContentControl类继承后，不仅代码更少，而且看上去更“Silverlight”一些。修改后的代码如下：

Generic.xaml文件：

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Sample" 
    xmlns:sys="clr-namespace:System;assembly=mscorlib">
    <Style TargetType="local:GroupBox">
        <Setter Property="Background" Value="White"></Setter>
        <Setter Property="BorderBrush" Value="#687B8B"></Setter>
        <Setter Property="BorderThickness" Value="1"></Setter>
        <Setter Property="Padding" Value="6,10,6,6"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:GroupBox">
                    <Grid>
                        <Border Margin="0,8,0,0" CornerRadius="5"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}">
                            <ContentPresenter Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ></ContentPresenter>
                        </Border>
                        <Border Margin="10,0,10,0" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Top"
                                Background="{TemplateBinding Background}" >
                            <ContentPresenter Margin="5,0" Content="{TemplateBinding Header}"></ContentPresenter>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

GroupBox.cs文件：

using System.Windows.Controls;

namespace AutoCompleteBoxSample
{
    /// <summary>
    /// 分组框。
    /// </summary>
    public class GroupBox : HeaderedContentControl
    {
        public GroupBox()
        {
            this.DefaultStyleKey = typeof(GroupBox);
        }
    }
}

 

使用示例代码：

<UserControl x:Class="AutoCompleteBoxSample.GroupBoxSample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="clr-namespace:Sample" Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Margin="30" Background="White">
        <local:GroupBox Header="GroupBox的标题" >
            <Button Content="GroupBox的内容"></Button>                
        </local:GroupBox>
    </Grid>
</UserControl>

示例效果图与上图一样。当然，由于修改后的Header属性是object类型，所以如果你乐意的话，完全可以使用Button、Rectangle…做作GroupBox的Header，虽然我并不认为这是更好的做法。