Flat border style in GroupBox

Question

Flat border style in GroupBox

Tell me how to remove the 3D border effect from GroupBox and make it Flat a style. Now if I select BorderThickness equal to 1, then only on the left side it is the desired color. With the rest, it is an intermediate color between the background and the border color.

Code:

<!-- Account settings -->
<GroupBox Grid.Row="1" Header="Account Properties" Height="121" HorizontalAlignment="Center" Margin="0,10,0,0" Name="groupBox1" VerticalAlignment="Top" Width="232" BorderBrush="White" Foreground="White" BorderThickness="1">
    <Grid>
        <CheckBox Style="{StaticResource CheckboxStyle}" Content=" Allow auto sign in." Height="16" HorizontalAlignment="Left" Margin="10,8,0,0" Name="autoLoginCheckBox" VerticalAlignment="Top" Foreground="White" Unchecked="autoLoginCheckBox_Changed" Checked="autoLoginCheckBox_Changed">
            <!--<CheckBox.Effect>
                <DropShadowEffect BlurRadius="10" ShadowDepth="0" Opacity="1" Color="WhiteSmoke"/>
            </CheckBox.Effect>-->
        </CheckBox>
        <TextBox Height="23" HorizontalAlignment="Left" Margin="88,37,0,0" Name="loginBox" VerticalAlignment="Top" Width="120" TextChanged="loginBox_TextChanged" IsEnabled="True" />
        <PasswordBox Height="23" HorizontalAlignment="Left" Margin="88,69,0,0" Name="passwordBox" VerticalAlignment="Top" Width="120" PasswordChanged="passwordBox_PasswordChanged" />
        <Label Content="Password:" Height="25" HorizontalAlignment="Left" Margin="6,67,0,0" Name="label1" VerticalAlignment="Top" Width="70" HorizontalContentAlignment="Right" Foreground="White">
            <!--<Label.Effect>
                <DropShadowEffect BlurRadius="15" ShadowDepth="0" Opacity="1" Color="WhiteSmoke"/>
            </Label.Effect>-->
        </Label>
        <Label Content="Login:" Height="25" HorizontalAlignment="Left" Margin="6,36,0,0" Name="label2" VerticalAlignment="Top" Width="70" HorizontalContentAlignment="Right" Foreground="White">
            <!--<Label.Effect>
                <DropShadowEffect BlurRadius="15" ShadowDepth="0" Opacity="1" Color="WhiteSmoke"/>
            </Label.Effect>-->
        </Label>
    </Grid>
</GroupBox>

Screen:

I use Visual Studio 2010. It does not allow you to copy the element template to make your own one based on it.

0

wpf xaml

Author: Rootware, 2018-06-08

Source

1 answers

score 4 · Accepted Answer

I use Visual Studio 2010. It does not allow you to copy the element template to make your own one based on it.

If this is the only problem, then you are "your own evil Pinocchio".

Here's a standard style with Windows 10, sort of flat, try it:

<Window.Resources>
    <BorderGapMaskConverter x:Key="BorderGapMaskConverter"/>
    <Style x:Key="GroupBoxStyle1" TargetType="{x:Type GroupBox}">
        <Setter Property="BorderBrush" Value="#D5DFE5"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type 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 BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="4" Grid.Column="0" CornerRadius="4" Grid.Row="1" Grid.RowSpan="3"/>
                        <Border BorderBrush="White" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="4" CornerRadius="4" Grid.Row="1" Grid.RowSpan="3">
                            <Border.OpacityMask>
                                <MultiBinding ConverterParameter="7" Converter="{StaticResource BorderGapMaskConverter}">
                                    <Binding ElementName="Header" Path="ActualWidth"/>
                                    <Binding Path="ActualWidth" RelativeSource="{RelativeSource Self}"/>
                                    <Binding Path="ActualHeight" RelativeSource="{RelativeSource Self}"/>
                                </MultiBinding>
                            </Border.OpacityMask>
                            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3">
                                <Border BorderBrush="White" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"/>
                            </Border>
                        </Border>
                        <Border x:Name="Header" Grid.Column="1" Padding="3,1,3,0" Grid.Row="0" Grid.RowSpan="2">
                            <ContentPresenter ContentSource="Header" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        </Border>
                        <ContentPresenter Grid.ColumnSpan="2" Grid.Column="1" Margin="{TemplateBinding Padding}" Grid.Row="2" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>