none
White border aroujnd GroupBox border

    Question

  • I'm just trying to apply a specific border color to a GroupBox. However, I notice that WPF seems to put a border around the border. So, if the actual border is a 2px blue border, WPF puts a 2px white border around the inner and outer edges of the border. I haven't found a way to disable this additional border.

    Basically, I want to create a GroupBox that doesn't have this additional white border going around it.

    Thanks,

    -Dan
    Friday, January 29, 2010 4:35 PM

Answers

  • complete xaml

    <StackPanel Background="red" xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'>
    <StackPanel.Resources>
    <Style TargetType="GroupBox" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
      <Style.Resources>
        <ResourceDictionary />
      </Style.Resources>
      <Setter Property="Border.BorderBrush">
        <Setter.Value>
          <SolidColorBrush>Yellow</SolidColorBrush>
        </Setter.Value>
      </Setter>
      <Setter Property="Border.BorderThickness">
        <Setter.Value>
          <Thickness>0</Thickness>
        </Setter.Value>
      </Setter>
      <Setter Property="Control.Template">
        <Setter.Value>
          <ControlTemplate TargetType="GroupBox">
            <Grid SnapsToDevicePixels="True">
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="6" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="6" />
              </Grid.ColumnDefinitions>
              <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
                <RowDefinition Height="6" />
              </Grid.RowDefinitions>
              <Border BorderThickness="{TemplateBinding Border.BorderThickness}" CornerRadius="4,4,4,4" BorderBrush="#00FFFFFF" Background="{TemplateBinding Panel.Background}" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="4" Grid.RowSpan="3" />
              <Border Padding="3,1,3,0" Name="Header" Grid.Column="1" Grid.Row="0" Grid.RowSpan="2">
                <ContentPresenter RecognizesAccessKey="True" Content="{TemplateBinding HeaderedContentControl.Header}" ContentTemplate="{TemplateBinding HeaderedContentControl.HeaderTemplate}" ContentStringFormat="{TemplateBinding HeaderedContentControl.HeaderStringFormat}" ContentSource="Header" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
              </Border>
              <ContentPresenter Content="{TemplateBinding ContentControl.Content}" ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}" Margin="{TemplateBinding Control.Padding}" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" Grid.Column="1" Grid.Row="2" Grid.ColumnSpan="2" />
              <Border BorderThickness="{TemplateBinding Border.BorderThickness}" CornerRadius="4,4,4,4" BorderBrush="Transparent" OpacityMask="{x:Null}" Grid.Row="1" Grid.ColumnSpan="4" Grid.RowSpan="3">
                <Border BorderThickness="{TemplateBinding Border.BorderThickness}" CornerRadius="3,3,3,3" BorderBrush="{TemplateBinding Border.BorderBrush}">
                  <Border BorderThickness="{TemplateBinding Border.BorderThickness}" CornerRadius="2,2,2,2" BorderBrush="Transparent" />
                </Border>
              </Border>
            </Grid>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
    
    
    </StackPanel.Resources>
    <Label/>
    <GroupBox BorderBrush="black" BorderThickness="1">
    <RadioButton>button</RadioButton>
    
    </GroupBox>
    </StackPanel>
    • Marked as answer by Linda Liu Thursday, February 04, 2010 10:46 AM
    Friday, January 29, 2010 5:16 PM
    Moderator

All replies

  • in the control template of the groupbox you would need to make the following change (underlined)

    <Border BorderThickness="{TemplateBinding Border.BorderThickness}" CornerRadius="4,4,4,4" BorderBrush="Transparent" OpacityMask="{x:Null}" Grid.Row="1" Grid.ColumnSpan="4" Grid.RowSpan="3">

    <

     

    Border BorderThickness="{TemplateBinding Border.BorderThickness}" CornerRadius="3,3,3,3" BorderBrush="{TemplateBinding Border.BorderBrush}">

    <

     

    Border BorderThickness="{TemplateBinding Border.BorderThickness}" CornerRadius="2,2,2,2" BorderBrush="Transparent" />

    </

     

    Border>

    </

     

    Border>

    Friday, January 29, 2010 5:15 PM
    Moderator
  • complete xaml

    <StackPanel Background="red" xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'>
    <StackPanel.Resources>
    <Style TargetType="GroupBox" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
      <Style.Resources>
        <ResourceDictionary />
      </Style.Resources>
      <Setter Property="Border.BorderBrush">
        <Setter.Value>
          <SolidColorBrush>Yellow</SolidColorBrush>
        </Setter.Value>
      </Setter>
      <Setter Property="Border.BorderThickness">
        <Setter.Value>
          <Thickness>0</Thickness>
        </Setter.Value>
      </Setter>
      <Setter Property="Control.Template">
        <Setter.Value>
          <ControlTemplate TargetType="GroupBox">
            <Grid SnapsToDevicePixels="True">
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="6" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="6" />
              </Grid.ColumnDefinitions>
              <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
                <RowDefinition Height="6" />
              </Grid.RowDefinitions>
              <Border BorderThickness="{TemplateBinding Border.BorderThickness}" CornerRadius="4,4,4,4" BorderBrush="#00FFFFFF" Background="{TemplateBinding Panel.Background}" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="4" Grid.RowSpan="3" />
              <Border Padding="3,1,3,0" Name="Header" Grid.Column="1" Grid.Row="0" Grid.RowSpan="2">
                <ContentPresenter RecognizesAccessKey="True" Content="{TemplateBinding HeaderedContentControl.Header}" ContentTemplate="{TemplateBinding HeaderedContentControl.HeaderTemplate}" ContentStringFormat="{TemplateBinding HeaderedContentControl.HeaderStringFormat}" ContentSource="Header" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
              </Border>
              <ContentPresenter Content="{TemplateBinding ContentControl.Content}" ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}" Margin="{TemplateBinding Control.Padding}" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" Grid.Column="1" Grid.Row="2" Grid.ColumnSpan="2" />
              <Border BorderThickness="{TemplateBinding Border.BorderThickness}" CornerRadius="4,4,4,4" BorderBrush="Transparent" OpacityMask="{x:Null}" Grid.Row="1" Grid.ColumnSpan="4" Grid.RowSpan="3">
                <Border BorderThickness="{TemplateBinding Border.BorderThickness}" CornerRadius="3,3,3,3" BorderBrush="{TemplateBinding Border.BorderBrush}">
                  <Border BorderThickness="{TemplateBinding Border.BorderThickness}" CornerRadius="2,2,2,2" BorderBrush="Transparent" />
                </Border>
              </Border>
            </Grid>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
    
    
    </StackPanel.Resources>
    <Label/>
    <GroupBox BorderBrush="black" BorderThickness="1">
    <RadioButton>button</RadioButton>
    
    </GroupBox>
    </StackPanel>
    • Marked as answer by Linda Liu Thursday, February 04, 2010 10:46 AM
    Friday, January 29, 2010 5:16 PM
    Moderator
  • Hi Lester,
    I think the question we need answered is: "Why does the Windows 7 default GroupBox style have an extra border around it?".  The same executable run on XP and Windows 7 look different.  Is there a Windows 7 theme that corrects this problem?  So far I can not find such a theme.



    Thanks,
    Steve
    Wednesday, February 17, 2010 10:14 PM
  • I'm showing up late to the 'party' here but I ran into the same problem. There's an ugly white border on either side of a WPF GroupBox color border (what you set) when running an application in Windows 7 that doesn't show up in XP. Here's a solution that works:

    http://efreedom.com/Question/1-3173364/White-Border-Around-GroupBox

    Take his template and add it to your ResourceDictionary.

    Wednesday, November 03, 2010 8:00 PM