WPF自定义GroupBox 标题文字居中显示

最新推荐文章于 2024-08-22 15:03:23 发布

PINYAOYAO

最新推荐文章于 2024-08-22 15:03:23 发布

阅读量1.4k

点赞数 1

分类专栏：运动控制 Prism MVVM WPF 文章标签： wpf microsoft c#

本文链接：https://blog.csdn.net/hisxiwu/article/details/129098877

版权

WPF 同时被 3 个专栏收录

13 篇文章 0 订阅

订阅专栏

Prism MVVM

5 篇文章 0 订阅

订阅专栏

运动控制

1 篇文章 0 订阅

订阅专栏

文章展示了如何在WPF中创建一个名为UGroupBox的自定义控件，该控件扩展了GroupBox并添加了HeaderHorizontalAlignment依赖属性，允许用户设置标题的水平对齐方式。通过注册DependencyProperty并在样式模板中绑定，实现了标题的动态对齐效果。示例代码包括UGroupBox类的定义、资源样式布局和控件的使用方法。

摘要由CSDN通过智能技术生成

实现效果如图：

实现思路：为GroupBox添加HorizontalAlignment 的依赖属性

1、UGroupBox.cs

using MotionControls.Extensions.Utils;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace YOI.Controls
{

    public class UGroupBox : GroupBox
    {
        static UGroupBox()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(UGroupBox), new FrameworkPropertyMetadata(typeof(UGroupBox)));
        }


        public HorizontalAlignment HeaderHorizontalAlignmentProperty
        {
            get { return (HorizontalAlignment)GetValue(HeaderHorizontalAlignmentPropertyProperty); }
            set { SetValue(HeaderHorizontalAlignmentPropertyProperty, value); }
        }

        public static readonly DependencyProperty HeaderHorizontalAlignmentPropertyProperty =
            DependencyProperty.Register("HeaderHorizontalAlignment", typeof(HorizontalAlignment), typeof(UGroupBox), new PropertyMetadata(HorizontalAlignment.Center));


    }
}

2、GroupBox 资源样式布局

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

  <Style TargetType="{x:Type local:UGroupBox}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type local:UGroupBox}">

          <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
              x:Name="Header"
              Grid.Row="0"
              Grid.RowSpan="2"
              Grid.Column="2"
              HorizontalAlignment="{Binding HeaderHorizontalAlignment, RelativeSource={RelativeSource Mode=TemplatedParent}}"
              Panel.ZIndex="1"
              Background="{TemplateBinding Background}"
              BorderThickness="{TemplateBinding BorderThickness}">
              <ContentPresenter
                ContentSource="Header"
                RecognizesAccessKey="True"
                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
            </Border>

            <Border
              Grid.Row="1"
              Grid.RowSpan="3"
              Grid.ColumnSpan="4"
              Background="{TemplateBinding Background}"
              BorderBrush="{TemplateBinding BorderBrush}"
              BorderThickness="{TemplateBinding BorderThickness}"
              RenderTransformOrigin="0.5,0.5" />

            <ContentPresenter
              Grid.Row="2"
              Grid.Column="1"
              Grid.ColumnSpan="2"
              HorizontalAlignment="{Binding HeaderHorizontalAlignment, RelativeSource={RelativeSource Mode=TemplatedParent}}"
              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
          </Grid>

        </ControlTemplate>

      </Setter.Value>
    </Setter>
  </Style>

</ResourceDictionary>

3、调用

<YOI:UGroupBox
  Grid.Row="0"
  Grid.Column="3"
  Width="290"
  Margin="10,10,0,0"
  HorizontalAlignment="Right"
  Background="{DynamicResource SecundaryBackgroundColor}"
  BorderBrush="{DynamicResource PrimaryGrayColor}"
  BorderThickness="0.1"
  HeaderHorizontalAlignmentProperty="Center">
  <YOI:UGroupBox.Header>
    <YOI:UButton
      Width="Auto"
      Height="24"
      Padding="5,0,5,0"
      Background="{DynamicResource PrimaryBlueColor}"
      BorderBrush="{DynamicResource PrimaryBlueColor}"
      Content="当前位置显示"
      FontSize="14"
      Foreground="White" />
  </YOI:UGroupBox.Header>

  <StackPanel
    Width="Auto"
    VerticalAlignment="Top"
    Orientation="Horizontal">
    <StackPanel Margin="10" Orientation="Horizontal">
      <Label
        Margin="0,0,5,0"
        Content="Z轴"
        Foreground="{DynamicResource TextPrimaryColor}" />
      <YOI:UTextBox
        Width="125"
        Height="30"
        HorizontalAlignment="Center"
        Background="White"
        BorderBrush="{DynamicResource PrimaryBlueColor}"
        ColseIconVisibility="Hidden"
        CornerRadius="15"
        FontSize="12"
        Placeholder="Z轴位置" />
      <Label
        Margin="5,0,0,0"
        Content="mm"
        Foreground="{DynamicResource TextPrimaryColor}" />
    </StackPanel>
  </StackPanel>
  
</YOI:UGroupBox>