设置应用程序中使用什么控件，我可以在我的 UWP 应用程序中使用它吗？

Question

Windows 设置应用右侧的控件是什么？

我在 XAML 控件库应用程序中找到的最接近的控件是 Expander，但它们似乎不提供相同的功能（向上或向下扩展，无法指定标题（例如“打印机和扫描仪”）和副标题（例如“首选项，疑难解答”）以及内容（例如屏幕截图中的“添加设备”按钮）。

如何使用 WinUI 2.7 在我的 UWP 应用程序中实现类似的外观和行为？

Answer 1

不确定他们使用的确切控件，但您可以使用 ListView 和 Expanders 获得非常相似的样式。

这是我得到的结果： Expander List Image

我的XAML代码：

<Page.Resources>
    <DataTemplate x:Key="ListItemTemplate" x:DataType="local:ListItem">
        <controls:Expander Width="500" HeaderTemplate="{StaticResource ExpanderHeaderTemplate}"/>
    </DataTemplate>

    <DataTemplate x:Key="ExpanderHeaderTemplate" x:DataType="local:ListItem">
        <StackPanel Orientation="Horizontal" Margin="0,10,0,10">
            <SymbolIcon Symbol="Home" Margin="0,0,10,0"/>
            <StackPanel>
                <TextBlock Text="{x:Bind Header}" FontSize="18"/>
                <TextBlock Text="{x:Bind Description}" FontSize="14"/>
            </StackPanel>
        </StackPanel>
    </DataTemplate>
</Page.Resources>


<ListView ItemsSource="{x:Bind Items}" ItemTemplate="{StaticResource ListItemTemplate}"/>

和 C# 代码隐藏：

public sealed partial class MainPage : Page
{

    public ObservableCollection<ListItem> Items = new ObservableCollection<ListItem>();
    public MainPage()
    {
        this.InitializeComponent();
        for(int i = 0; i < 10; i++)
        {
            Items.Add(new ListItem("Header", "description"));
        }
    }
}

public class ListItem
{
    public string Header;
    public string Description;

    public ListItem(string header, string description)
    {
        this.Header = header;
        this.Description = description;
    }
}

如果您有任何问题，请告诉我！

Answer 2

据我所知，Microsoft 对此没有 public 控制，但他们创建了自己的控制，例如您可以在 Powertoys 的源代码中找到它。

https://github.com/microsoft/PowerToys/tree/main/src/settings-ui/Settings.UI/Controls/Setting

设置应用程序中使用什么控件，我可以在我的 UWP 应用程序中使用它吗？

What control is used in the settings app and can I use it in my UWP app?

uwp

controls

uwp-xaml

winui