通过

如何：定义 GroupBox 模板

  • 项目

此示例演示如何为 GroupBox 控件创建模板。

示例

下面的示例通过使用布局的 Grid 控件来定义 GroupBox 控件模板。 该模板使用 BorderGapMaskConverter 来定义 GroupBox 的边框，以便边框不会遮挡 Header 内容。

<!--=================================================================
    GroupBox Template Example
==================================================================-->
<BorderGapMaskConverter x:Key="BorderGapMaskConverter"/>
<Style x:Key="{x:Type GroupBox}"
       TargetType="{x:Type GroupBox}">
  <Setter Property="BorderBrush"
          Value="Gray"/>
  <Setter Property="Foreground"
          Value="White"/>
  <Setter Property="BorderThickness"
          Value="1"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type GroupBox}">
        <Grid>
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="4"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="4"/>
          </Grid.ColumnDefinitions>
          <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="4"/>
          </Grid.RowDefinitions>
          <Border CornerRadius="4"
                  Grid.Row="1"
                  Grid.RowSpan="3"
                  Grid.Column="0"
                  Grid.ColumnSpan="4"
                  BorderThickness="{TemplateBinding BorderThickness}"
                  BorderBrush="Transparent"
                  Background="{TemplateBinding Background}"/>
          <!-- ContentPresenter for the header -->
          <Border x:Name="Header"
                  Padding="6,0,6,0"
                  Grid.Row="0"
                  Grid.RowSpan="2"
                  Grid.Column="1">
            <ContentPresenter ContentSource="Header" 
                              RecognizesAccessKey="True" />
          </Border>
          <!-- Primary content for GroupBox -->
          <ContentPresenter Grid.Row="2"
                            Grid.Column="1"
                            Grid.ColumnSpan="2"
                            Margin="{TemplateBinding Padding}"/>
          <Border CornerRadius="0"
                  Grid.Row="1"
                  Grid.RowSpan="3"
                  Grid.ColumnSpan="4"
                  BorderThickness="{TemplateBinding BorderThickness}"
                  BorderBrush="{TemplateBinding BorderBrush}">
            <Border.OpacityMask>
              <MultiBinding Converter=
                            "{StaticResource BorderGapMaskConverter}"
                            ConverterParameter="6">
                <Binding ElementName="Header"
                         Path="ActualWidth"/>
                <Binding RelativeSource="{RelativeSource Self}"
                         Path="ActualWidth"/>
                <Binding RelativeSource="{RelativeSource Self}"
                         Path="ActualHeight"/>
              </MultiBinding>
            </Border.OpacityMask>
          </Border>
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

另请参阅