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所说，您完全可以制作一个自定义控件来满足您的要求。我使用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>

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>

它产生以下输出：

当然，您可以根据需要使这些项目更密集。

UWP中的GroupBox控件？

2 个答案: