Stylizacja GroupBox

Question

Stylizacja GroupBox

Próbuję stworzyć taki projekt Groupboxa.

Tutaj wpisz opis obrazka

Spojrzałem na GroupBox.HeaderTemplate

Ale mam problem z utworzeniem niebieskiego koloru tła, o szerokości 100%. To samo dotyczy granicy.

Mój kod do tej pory

<GroupBox.HeaderTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Label Content="{Binding}" HorizontalAlignment="Stretch" Background="#25A0DA" Grid.Column="0" Height="20" Padding="5,0,0,0" Margin="1" Foreground="White"/>
                    </Grid>
                </DataTemplate>
            </GroupBox.HeaderTemplate>

I tak to teraz wygląda.

Tutaj wpisz opis obrazka

11

styling wpf xaml groupbox

Author: H.B., 2012-02-20

Source

5 answers

Prawdopodobnie nie będziesz w stanie sprawić, by wyglądał dokładnie tak jak w twoim przykładzie bez napisania zupełnie innego szablonu, ale dałem mu prosty strzał, wiążąc szerokość siatki w nagłówku do szerokości groupboxa i określając odpowiedni margines i padding:

<GroupBox.HeaderTemplate>
    <DataTemplate>
        <Grid Width="{Binding ElementName=groupBox1, Path=ActualWidth}" Margin="-10, 0, -10, 0" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Label Content="{Binding}" HorizontalAlignment="Stretch" Background="#25A0DA" Grid.Column="0" Height="20" Padding="5, 0, 0, 0" Margin="10" Foreground="White"/>
        </Grid>
    </DataTemplate>
</GroupBox.HeaderTemplate>

Wynik wygląda następująco:

Tutaj wpisz opis obrazka

4

Author: Jakob Christensen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-02-20 14:02:16

Ten wątek jest trochę stary, ale komuś może się to przydać...

Mała modyfikacja odpowiedzi Jakoba, jeśli chcesz mieć nagłówek o pełnej szerokości.

Możesz powiązać z macierzystym GroupBox, więc możesz go używać bez nazwy GroupBox.

<GroupBox.HeaderTemplate>
  <DataTemplate>
    <TextBlock Text="{Binding}" 
           Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=GroupBox}, Path=ActualWidth }"
           Background="#25A0DA" Grid.Column="0" Height="20" Padding="5,0,0,0" Margin="1" Foreground="White"/>
  </DataTemplate>
</GroupBox.HeaderTemplate>

4

Author: dave,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-04-25 11:01:04

Zdaję sobie sprawę, że to już za późno, ale MahApps.Pakiet Metro ma ładny GroupBox, który wydaje się lubić prawie dokładnie to, co jest opublikowane w OP.

Https://github.com/MahApps/MahApps.Metro/blob/develop/MahApps.Metro/Styles/Controls.GroupBox.xaml

Oto Xaml z wersji 1.22

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:Controls="clr-namespace:MahApps.Metro.Controls"
                xmlns:Converters="clr-namespace:MahApps.Metro.Converters">

<Converters:ThicknessBindingConverter x:Key="ThicknessBindingConverter" />

<Style x:Key="MetroGroupBox" TargetType="{x:Type GroupBox}">
    <Setter Property="Foreground" Value="{DynamicResource BlackBrush}" />
    <Setter Property="Background" Value="{DynamicResource AccentColorBrush}" />
    <Setter Property="BorderBrush" Value="{DynamicResource AccentColorBrush}" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="Controls:ControlsHelper.ContentCharacterCasing" Value="Upper" />
    <Setter Property="Controls:ControlsHelper.HeaderFontSize" Value="{DynamicResource ContentFontSize}" />
    <Setter Property="Controls:GroupBoxHelper.HeaderForeground" Value="{x:Null}" />
    <Setter Property="Margin" Value="5" />
    <Setter Property="Padding" Value="5" />
    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type GroupBox}">
                <Grid x:Name="GroupBoxRoot">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <Border x:Name="HeaderSite"
                            Grid.Row="0"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                            UseLayoutRounding="True">
                        <Controls:ContentControlEx x:Name="HeaderContent"
                                                   Padding="{TemplateBinding Padding}"
                                                   FontSize="{TemplateBinding Controls:ControlsHelper.HeaderFontSize}"
                                                   FontWeight="{TemplateBinding Controls:ControlsHelper.HeaderFontWeight}"
                                                   FontStretch="{TemplateBinding Controls:ControlsHelper.HeaderFontStretch}"
                                                   Content="{TemplateBinding Header}"
                                                   ContentCharacterCasing="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Controls:ControlsHelper.ContentCharacterCasing)}"
                                                   ContentStringFormat="{TemplateBinding HeaderStringFormat}"
                                                   ContentTemplate="{TemplateBinding HeaderTemplate}"
                                                   ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}"
                                                   RecognizesAccessKey="True"
                                                   SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                                   UseLayoutRounding="False">
                            <TextElement.Foreground>
                                <MultiBinding Converter="{x:Static Converters:BackgroundToForegroundConverter.Instance}">
                                    <Binding RelativeSource="{RelativeSource TemplatedParent}"
                                             Path="Background"
                                             Mode="OneWay" />
                                    <Binding RelativeSource="{RelativeSource TemplatedParent}"
                                             Path="(Controls:GroupBoxHelper.HeaderForeground)"
                                             Mode="OneWay" />
                                </MultiBinding>
                            </TextElement.Foreground>
                        </Controls:ContentControlEx>
                    </Border>
                    <Border Grid.Row="1"
                            Background="Transparent"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BorderThickness, Converter={StaticResource ThicknessBindingConverter}, ConverterParameter={x:Static Converters:IgnoreThicknessSideType.Top}}"
                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                            UseLayoutRounding="True">
                        <ContentPresenter Margin="{TemplateBinding Padding}"
                                          Content="{TemplateBinding Content}"
                                          ContentTemplate="{TemplateBinding ContentTemplate}"
                                          Cursor="{TemplateBinding Cursor}"
                                          UseLayoutRounding="False" />
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

1

Author: yourbuddypal,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-03 19:16:57

Spróbuj tego:

  <GroupBox BorderThickness="0"  Header="BELT WEIGHER BC#1 JETTY" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Height="193" Width="374" OpacityMask="Black" BorderBrush="#FF1864D3" FontSize="16" FontWeight="Bold">
        <GroupBox.HeaderTemplate >
            <DataTemplate>
                <TextBlock Text="{Binding}"  
                 Width="357" Grid.Column="0" Padding="5,3,0,0" Margin="0,0,0,0"  Foreground="White" Height="33">
                    <TextBlock.Background>
                        <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
                            <GradientStop Color="White" Offset="0.968"/>
                            <GradientStop Color="Blue" Offset="0.828"/>
                        </LinearGradientBrush>
                    </TextBlock.Background>
                </TextBlock>
            </DataTemplate>
        </GroupBox.HeaderTemplate>
        <Border x:Name="CanvasBorder" BorderBrush="Blue"  BorderThickness="1" Margin="3,0,3,0">
            <Canvas  Background="white" Margin="0,0,0,0" >
                <Label Content="Feed Rate" Canvas.Left="10" Canvas.Top="10" FontWeight="Normal" FontSize="12"/>
                <Label Content="Totalizer 1" Canvas.Left="10" Canvas.Top="35" FontWeight="Normal" FontSize="12"/>
                <Label Content="Totalizer 2" Canvas.Left="10" Canvas.Top="60" FontWeight="Normal" FontSize="12" RenderTransformOrigin="0.516,1.808"/>
                <Label Content="Belt Load" Canvas.Left="10" Canvas.Top="85" FontWeight="Normal" FontSize="12" RenderTransformOrigin="0.516,1.808"/>
                <Label Content="Belt Speed" Canvas.Left="10" Canvas.Top="110" FontWeight="Normal" FontSize="12" RenderTransformOrigin="0.516,1.808"/>
                <TextBlock x:Name="BC1_Feedrate" HorizontalAlignment="Left" TextWrapping="Wrap" Text="0.00" VerticalAlignment="Top" Background="#FFF2F2FB" Width="119" FontWeight="Bold" Height="20" TextAlignment="Right" Canvas.Left="91" Canvas.Top="13" Padding="0,0,4,0"/>
                <TextBlock x:Name="BC1_Totalizer1" HorizontalAlignment="Left" TextWrapping="Wrap" Text="0.00" VerticalAlignment="Top" Background="#FFF2F2FB" Width="119" FontWeight="Bold" Height="20" TextAlignment="Right" Canvas.Left="91" Canvas.Top="38" Padding="0,0,4,0"/>
                <TextBlock x:Name="BC1_Totalizer2" HorizontalAlignment="Left" TextWrapping="Wrap" Text="0.00" VerticalAlignment="Top" Background="#FFF2F2FB" Width="119" FontWeight="Bold" Height="20" TextAlignment="Right" Canvas.Left="91" Canvas.Top="63" Padding="0,0,4,0"/>
                <TextBlock x:Name="BC1_BeltLoad" HorizontalAlignment="Left" TextWrapping="Wrap" Text="0.00" VerticalAlignment="Top" Background="#FFF2F2FB" Width="119" FontWeight="Bold" Height="20" TextAlignment="Right" Canvas.Left="91" Canvas.Top="88" Padding="0,0,4,0"/>
                <TextBlock x:Name="BC1_BeltSpeed" HorizontalAlignment="Left" TextWrapping="Wrap" Text="0.00" VerticalAlignment="Top" Background="#FFF2F2FB" Width="119" FontWeight="Bold" Height="20" TextAlignment="Right" Canvas.Left="91" Canvas.Top="113" Padding="0,0,4,0"/>
                <Label Content="ton/hour" Canvas.Left="228" Canvas.Top="10" FontWeight="Normal" FontSize="12"/>
                <Label Content="ton" Canvas.Left="228" Canvas.Top="35" FontWeight="Normal" FontSize="12"/>
                <Label Content="ton" Canvas.Left="228" Canvas.Top="60" FontWeight="Normal" FontSize="12" RenderTransformOrigin="0.516,1.808"/>
                <Label Content="kg/meter" Canvas.Left="228" Canvas.Top="85" FontWeight="Normal" FontSize="12" RenderTransformOrigin="0.516,1.808"/>
                <Label Content="meter/second" Canvas.Left="228" Canvas.Top="110" FontWeight="Normal" FontSize="12" RenderTransformOrigin="0.516,1.808"/>
            </Canvas>
        </Border>
    </GroupBox>

0

Author: Hotman Jawa,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-12-04 09:04:12

score 51 · Accepted Answer

Weź domyślny szablon GroupBox i zmień go tak, aby wyglądał tak, jak chcesz

Na przykład,

  <ControlTemplate TargetType="GroupBox">
    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
      </Grid.RowDefinitions>

      <Border Grid.Row="0"
              BorderThickness="1"
              BorderBrush="#25A0DA"
              Background="#25A0DA">
          <Label Foreground="White">   
              <ContentPresenter Margin="4"
                          ContentSource="Header"
                          RecognizesAccessKey="True" />
          </Label>
      </Border>

      <Border Grid.Row="1"
              BorderThickness="1,0,1,1"
              BorderBrush="#25A0DA">
        <ContentPresenter Margin="4" />
      </Border>

    </Grid>
  </ControlTemplate>