更改Groupbox标题方向

Question

我正在WPF中创建一个包含我的控件的分组框，并且想知道是否可以将标题更改为垂直运行而不是水平运行？这是我的代码；

<GroupBox Grid.Column="0">
    <GroupBox.Header>
        Navigation
    </GroupBox.Header>
    <StackPanel Orientation="Vertical" >
        <Button>Up</Button>
        <Button>Down</Button>
    </StackPanel>
</GroupBox>

我研究了这些属性，但除了更改GroupBox.Header元素中包含的TextBlock之外，似乎找不到任何其他东西。

<GroupBox Grid.Column="0">
    <GroupBox.Header>
        <Orientation>
           <!-- Invalid -->
        </Orientation>
    </GroupBox.Header>
    <StackPanel Orientation="Vertical" >
        <Button>Up</Button>
        <Button>Down</Button>
    </StackPanel>
</GroupBox>

Answer 1

你可以，但它并不漂亮！

​

<GroupBox>
    <GroupBox.Header>
        <TextBlock Text="Hello">
            <TextBlock.RenderTransform>
                 <RotateTransform Angle="90" CenterX="0" CenterY="0"  /> 
            </TextBlock.RenderTransform>
        </TextBlock>
    </GroupBox.Header>
  <TextBlock Text="World!"/>
</GroupBox>

您还需要修改style of the GroupBox来支持这一点。

这看起来只是一个有几行，几个内容呈现者和几个边框的网格，所以应该可以将其转换为列并从那里转到列中。我实际上把旋转放在了头部的ContentPresenter上，这样你就可以把你的样式应用到你想要的任何地方了。

最终更新

通过从标准控件中提取模板，我们可以修改它来移动标题，但是我们也发现有一个转换器用于遮蔽周围的边界。通过使用反编译器(DotPeek)，我们还可以切换行和列以将间隙移到一侧。

​

​

所以模板看起来像这样

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="MainWindow" Height="350" Width="525">
<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="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="6"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="6"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="6"/>
                        </Grid.RowDefinitions>
                        <Border BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="3" Grid.Column="1" CornerRadius="4" Grid.Row="0" Grid.RowSpan="4"/>
                        <Border x:Name="Header" Grid.Column="0" Padding="3,1,3,0" Grid.Row="1" Grid.ColumnSpan="2">
                            <Border.LayoutTransform>
                                <RotateTransform Angle="-90"/>
                            </Border.LayoutTransform>
                            <ContentPresenter ContentSource="Header" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        </Border>
                        <ContentPresenter Grid.RowSpan="2" Grid.Row="1" Margin="{TemplateBinding Padding}" Grid.Column="2" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        <Border BorderBrush="White" BorderThickness="{TemplateBinding BorderThickness}" Grid.RowSpan="4" CornerRadius="4" Grid.Column="1" Grid.ColumnSpan="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>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>


<GroupBox Header="Hello world!" Margin="12" Style="{DynamicResource GroupBoxStyle1}"/>
</Window>

修改后的转换器如下所示

// Type: System.Windows.Controls.BorderGapMaskConverter
// Assembly: PresentationFramework, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35
// Assembly location: C:\Windows\Microsoft.NET\assembly\GAC_MSIL\PresentationFramework\v4.0_4.0.0.0__31bf3856ad364e35\PresentationFramework.dll

using System;
using System.Globalization;
using System.Runtime;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Media;
using System.Windows.Shapes;

namespace WfpApplication1 //System.Windows.Controls
{
    public class LeftBorderGapMaskConverter : IMultiValueConverter
{
    [TargetedPatchingOptOut("Performance critical to inline this type of method across NGen image boundaries")]
    public LeftBorderGapMaskConverter()
    {
        //      base.ctor();
    }

    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        Type type1 = typeof(double);
        if (parameter == null
            || values == null
            || (values.Length != 3 || values[0] == null)
            || (values[1] == null
                || values[2] == null
                || (!type1.IsAssignableFrom(values[0].GetType())
                    || !type1.IsAssignableFrom(values[1].GetType())))
            || !type1.IsAssignableFrom(values[2].GetType()))
            return DependencyProperty.UnsetValue;

        Type type2 = parameter.GetType();
        if (!type1.IsAssignableFrom(type2)
            && !typeof(string).IsAssignableFrom(type2))
            return DependencyProperty.UnsetValue;

        double pixels1 = (double)values[0];
        double num1 = (double)values[1];
        double num2 = (double)values[2];
        if (num1 == 0.0 || num2 == 0.0)
            return (object)null;

        double pixels2 = !(parameter is string)
            ? (double)parameter
            : double.Parse((string)parameter, (IFormatProvider)NumberFormatInfo.InvariantInfo);

        Grid grid = new Grid();
        grid.Width = num1;
        grid.Height = num2;
        RowDefinition RowDefinition1 = new RowDefinition();
        RowDefinition RowDefinition2 = new RowDefinition();
        RowDefinition RowDefinition3 = new RowDefinition();
        RowDefinition1.Height = new GridLength(pixels2);
        RowDefinition2.Height = new GridLength(pixels1);
        RowDefinition3.Height = new GridLength(1.0, GridUnitType.Star);
        grid.RowDefinitions.Add(RowDefinition1);
        grid.RowDefinitions.Add(RowDefinition2);
        grid.RowDefinitions.Add(RowDefinition3);
        ColumnDefinition ColumnDefinition1 = new ColumnDefinition();
        ColumnDefinition ColumnDefinition2 = new ColumnDefinition();
        ColumnDefinition1.Width = new GridLength(num2 / 2.0);
        ColumnDefinition2.Width = new GridLength(1.0, GridUnitType.Star);
        grid.ColumnDefinitions.Add(ColumnDefinition1);
        grid.ColumnDefinitions.Add(ColumnDefinition2);
        Rectangle rectangle1 = new Rectangle();
        Rectangle rectangle2 = new Rectangle();
        Rectangle rectangle3 = new Rectangle();
        rectangle1.Fill = (Brush)Brushes.Black;
        rectangle2.Fill = (Brush)Brushes.Black;
        rectangle3.Fill = (Brush)Brushes.Black;

        Grid.SetColumnSpan((UIElement)rectangle1, 2);
        Grid.SetColumn((UIElement)rectangle1, 0);
        Grid.SetRow((UIElement)rectangle1, 0);
        Grid.SetColumn((UIElement)rectangle2, 1);
        Grid.SetRow((UIElement)rectangle2, 1);
        Grid.SetColumnSpan((UIElement)rectangle3, 2);
        Grid.SetColumn((UIElement)rectangle3, 0);
        Grid.SetRow((UIElement)rectangle3, 2);
        grid.Children.Add((UIElement)rectangle1);
        grid.Children.Add((UIElement)rectangle2);
        grid.Children.Add((UIElement)rectangle3);
        return (object)new VisualBrush((Visual)grid);
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        return new object[1]
          {
            Binding.DoNothing
          };
    }
}
}

Answer 2

我不认为您可以通过简单地更改属性或使用header模板来获得垂直运行的组框标题。相反，您可以尝试使用RotateTransform，但它也会旋转分组框中的所有元素。因此，您必须为分组框中的容器元素单独提供计数器转换。

<GroupBox Header="Navigation" Grid.Column="0">
    <GroupBox.RenderTransform>
        <RotateTransform Angle="-90" CenterX="100" CenterY="100" />
    </GroupBox.RenderTransform>
    <StackPanel Orientation="Vertical">
        <StackPanel.RenderTransform>
            <RotateTransform Angle="90" CenterX="100" CenterY="100"  />
        </StackPanel.RenderTransform>
        <Button>Up</Button>
        <Button>Down</Button>
    </StackPanel>
</GroupBox>

让元素对齐将是一件很麻烦的事情，而且你将不得不整天处理CenterX和CenterY属性。但如果这就是你想要的，我想这就是获得它的方法:)

Answer 3

我可以想象分组框中垂直标题的两个选项：

1)旋转文本块的“流”，但不旋转字母

2)旋转文本块本身

下面是XAML中的两个选项：

    <Grid>
        <Grid.Resources>
            <System:String x:Key="header">Vertical</System:String>
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <GroupBox Grid.Row="0">
            <GroupBox.HeaderTemplate>
                <DataTemplate>
                    <ItemsControl ItemsSource="{StaticResource header}" />
                </DataTemplate>
            </GroupBox.HeaderTemplate>
        </GroupBox>
        <GroupBox Grid.Row="1">
            <GroupBox.HeaderTemplate>
                <DataTemplate>
                    <TextBlock Text="{StaticResource header}">
                        <TextBlock.LayoutTransform>
                            <RotateTransform Angle="90"  />
                        </TextBlock.LayoutTransform>
                    </TextBlock>
                </DataTemplate>
            </GroupBox.HeaderTemplate>
        </GroupBox>
    </Grid>