UWP 中的 GroupBox 控件？

Question

熟悉 UWP。我正在开发一个用于模拟电路的应用程序。有一个经典的可视化控件叫做Frame，后来在WPF中叫做GroupBox。UWP 中似乎没有此控件。UWP.Toolkit 库中有一个名为 HeaderedContentControl 的控件，但看起来不一样。似乎背景和边框属性不起作用..

目前我的代码是：

  <controls:HeaderedContentControl Margin="5" 
                                         BorderBrush="Black" BorderThickness="1"
                                         HorizontalAlignment="Stretch"
                                         HorizontalContentAlignment="Stretch">
            <controls:HeaderedContentControl.Header>
                <Border BorderBrush="Black" BorderThickness="1">
                    <Border.RenderTransform>
                        <TranslateTransform Y="-10"/>
                    </Border.RenderTransform>
                    <TextBlock Text="Resistor Value"/>
                </Border>
            </controls:HeaderedContentControl.Header>

            <local:ComponentValueBox Unit="Ohm" HorizontalAlignment="Left"
                                     Value="{x:Bind resistorValue, Mode=TwoWay}"
                                     ValueChanged="changeR"/>

        </controls:HeaderedContentControl>

我看到的（在弹出窗口中）是：

不太像 GroupBox 控件..我想看到的是以下内容：

我该怎么办？

Answer 1

UWP 不同于 WPF。UWP 基于 windows 运行时，WPF 基于 .NET Framework。它们都使用 XAML 来布局 UI 元素，但它们具有不同的 XAML 渲染引擎。你想不到 MS 掉了旧的经典控件。他们完全在不同的平台上。我们称“UWP”为通用 Windows 平台。目前，您还找不到这样的“GroupBox”，但它是一个新平台，将来您可能会看到这样的控件。一切皆有可能。

对于您的要求，如@Muzib 所说，您完全可以制作自定义控件来满足您的要求。我曾经UserControl TextBlock Border ContentControl制作过这样一个“GroupBox”供您参考。

请参阅我的以下代码示例：

<UserControl
x:Class="AppGroupBox.GroupBox"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:AppGroupBox"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">

<Grid>
    <TextBlock x:Name="HeaderTitle" Text="Header" Margin="7 0 0 0" LayoutUpdated="HeaderTitle_LayoutUpdated"></TextBlock>
    <Border BorderBrush="Black" x:Name="border" BorderThickness="0 2 0 0" Margin="100 10 3 3" CornerRadius="0 5 0 0"></Border>
    <Border BorderBrush="Black" BorderThickness="2 0 2 2" Margin="3 10 3 3" CornerRadius="5">
        <ContentControl x:Name="Content" Margin="10 10 10 10">
        </ContentControl>
    </Border>
</Grid>

<UserControl
x:Class="AppGroupBox.GroupBox"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:AppGroupBox"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">

<Grid>
    <TextBlock x:Name="HeaderTitle" Text="Header" Margin="7 0 0 0" LayoutUpdated="HeaderTitle_LayoutUpdated"></TextBlock>
    <Border BorderBrush="Black" x:Name="border" BorderThickness="0 2 0 0" Margin="100 10 3 3" CornerRadius="0 5 0 0"></Border>
    <Border BorderBrush="Black" BorderThickness="2 0 2 2" Margin="3 10 3 3" CornerRadius="5">
        <ContentControl x:Name="Content" Margin="10 10 10 10">
        </ContentControl>
    </Border>
</Grid>

public sealed partial class GroupBox : UserControl
{
    public GroupBox()
    {
        this.InitializeComponent();
    }



    public string Header
    {
        get { return (string)GetValue(HeaderProperty); }
        set { SetValue(HeaderProperty, value); }
    }

    // Using a DependencyProperty as the backing store for Header.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty HeaderProperty =
        DependencyProperty.Register("Header", typeof(string), typeof(GroupBox), new PropertyMetadata("Your Header", HeaderPropertyChangedCallback));

    public static void HeaderPropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if (e.NewValue != e.OldValue)
        {
            (d as GroupBox).HeaderTitle.Text = e.NewValue?.ToString();
            //(d as GroupBox).border.Margin = new Thickness((d as GroupBox).HeaderTitle.ActualWidth, 10, 3, 3);
        }
    }

    public object CustomContent
    {
        get { return (object)GetValue(CustomContentProperty); }
        set { SetValue(CustomContentProperty, value); }
    }

    // Using a DependencyProperty as the backing store for Content.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty CustomContentProperty =
        DependencyProperty.Register("CustomContent", typeof(object), typeof(GroupBox), new PropertyMetadata(null,PropertyChangedCallback));

    public static void PropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if (e.NewValue != e.OldValue)
        {
            (d as GroupBox).Content.Content = e.NewValue;
        }
    }

    private void HeaderTitle_LayoutUpdated(object sender, object e)
    {
        border.Margin = new Thickness(HeaderTitle.ActualWidth+10,10,3,3);
    }
}