首页 > 解决方案 > WPF GroupBox 标题位置在中心

问题描述

我已经编辑了标准 GroupBox 模板,因为我想对其进行自定义。除了其他自定义,我希望 GroupBox 标题在中心而不是左或右水平对齐。Header 的对齐不是问题,但真正的问题是为 Border 控件定义的 OpacityMask。不透明度蒙版设置不绘制边框的组框标题后面的透明空间。当我将标题设置为中心时,我无法弄清楚如何将透明空间间隙放置在组框标题后面。

<ControlTemplate x:Key="GroupBoxControlTemplate1" 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 Background="{TemplateBinding Background}" BorderBrush="Transparent" 
                BorderThickness="{TemplateBinding BorderThickness}" 
                CornerRadius="4" Grid.Column="1" Grid.ColumnSpan="4" 
                Grid.Row="1" Grid.RowSpan="3" HorizontalAlignment="Stretch"/>
        <Border x:Name="Header" Grid.Column="2" Grid.RowSpan="2" HorizontalAlignment="Left" 
                Padding="3,1,3,0" VerticalAlignment="Stretch">
            <Border.Effect>
                <DropShadowEffect BlurRadius="10" Direction="334"/>
            </Border.Effect>
            <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                              Content="{TemplateBinding Header}" 
                              ContentSource="Header" 
                              ContentStringFormat="{TemplateBinding HeaderStringFormat}" 
                              ContentTemplate="{TemplateBinding HeaderTemplate}" 
                              RecognizesAccessKey="True" Height="Auto" 
                              VerticalAlignment="Center"
                              HorizontalAlignment="Center"
                              OpacityMask="#FF3844BD" Margin="0,1,0,0">
            </ContentPresenter>
        </Border>
        <ContentPresenter Margin="{TemplateBinding Padding}" 
                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                          Content="{TemplateBinding Content}" 
                          ContentStringFormat="{TemplateBinding ContentStringFormat}" 
                          ContentTemplate="{TemplateBinding ContentTemplate}" 
                          Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="2"/>
        <Border BorderBrush="White" BorderThickness="{TemplateBinding BorderThickness}" 
                CornerRadius="4" Grid.ColumnSpan="3" Grid.Row="1" Grid.RowSpan="3" RenderTransformOrigin="0.5,0.5" Margin="0">
            <Border.OpacityMask>
                <MultiBinding ConverterParameter="7" UpdateSourceTrigger="Default">
                    <MultiBinding.Converter>
                        <BorderGapMaskConverter/>
                    </MultiBinding.Converter>
                    <Binding Path="ActualWidth" ElementName="Header"/>
                    <Binding Path="ActualWidth" RelativeSource="{RelativeSource Self}"/>
                    <Binding Path="ActualHeight" RelativeSource="{RelativeSource Self}"/>
                </MultiBinding>
            </Border.OpacityMask>
            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="4">
                <Border BorderBrush="White" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="4"/>
            </Border>
        </Border>
    </Grid>
</ControlTemplate>

标题文本应位于 GroupBox 的中心,目前它位于左侧,这是 GroupBox 的默认位置。

标签: c#wpfxaml

解决方案


通过此处指定的链接,您需要修改parameter值。但ConverterParameter不是 DependencyProperty,您不能将任何值绑定到它。我建议您编写自己的转换器以返回VisualBrush到您的 GroupBox

你也可以在BorderGapMaskConverter 这里查看源代码


推荐阅读