WPF Groupbox控件标题与按钮对齐且文本相反。

Question

WPF Groupbox控件标题与按钮对齐且文本相反。

wpfcontrolsalignmentgroupbox

5

我希望使用WPF groupbox控件实现这样的界面。 enter image description here

有没有办法使用WPF groupbox控件实现这样的界面呢？

- Asad Durrani

2个回答

3

我需要相同的东西，在这里找到了答案：http://wpf.2000things.com/2013/06/05/835-displaying-custom-content-in-a-groupbox-header/

不知道是哪个版本的.NET

简单示例：

<GroupBox>
    <GroupBox.Header>
        <StackPanel Orientation="Horizontal">
            <Button Content="Click Me"/>
            <Button Content="Click Me Too"/>
        </StackPanel>
    </GroupBox.Header>
    <TextBlock Text="Content of box"/>
</GroupBox>

- luytsm

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Phil · Accepted Answer

一个简单的解决方案是重叠控件，然后调整边距。

    <Grid>
        <GroupBox Header="Title" Margin="0,3,0,0" />
        <StackPanel Orientation="Horizontal" 
            VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,0,10,0">
            <Button Margin="2" Content="Suchen"/>
            <Button Margin="2" Content="Neu"/>
        </StackPanel>
    </Grid>

如果您需要一个可重用的样式，则需要提取GroupBox的控件模板并进行修改。类似于:

<Page.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 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}"/>
                        <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>
                        <StackPanel Grid.ColumnSpan="2" Grid.Column="1" Grid.Row="0" Grid.RowSpan="3" Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Right" >
                            <Button Margin="2" Content="Suchen"/>
                            <Button Margin="2" Content="Neu"/>
                        </StackPanel>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

<Grid>
    <Grid>
        <GroupBox Header="Title" Style="{StaticResource GroupBoxStyle1}"></GroupBox>
    </Grid>
</Grid>