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”称为Unversal Windows Platform。目前，你还找不到这样的“GroupBox”，但它是一个新平台，将来你可能会看到这样的控件。一切皆有可能。

对于您的要求，就像@Muzib 所说，您完全可以制作自定义控件来满足您的要求。我用UserControlTextBlockBorderContentControl做了这样一个'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>

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);
    }
}

<local:GroupBox Header="My GroupBox" Height="300" Width="500">
        <local:GroupBox.CustomContent>
            <StackPanel>
                <RadioButton Content="r1"></RadioButton>
                <TextBox></TextBox>
            </StackPanel>
        </local:GroupBox.CustomContent>
</local:GroupBox>

Answer 2

我认为 UWP 中没有这样的控件。很可能您必须制作自己的 CustomControl 才能实现与 UWP 中完全相同的功能。

但是，您可以使用“自定义”ListView 来实现类似的效果。看看这个：

<ListView Header="I am a header" BorderThickness="1" BorderBrush="Red" Width="250" Height="200" SelectionMode="None">
    <ListView.HeaderTemplate>
        <DataTemplate>
            <ListViewHeaderItem Content="{Binding}"/>
        </DataTemplate>
    </ListView.HeaderTemplate>
    <RadioButton>Any Value</RadioButton>
    <RadioButton>1% standard?</RadioButton>
    <RadioButton>5% standard</RadioButton>
</ListView>

它产生这个输出：

当然，如果你愿意，你可以让这些物品更密集。