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

user_7571171 0
Viewed 175

What are those controls on the right side of the Windows settings app?

The closest control I could find in the XAML Controls Gallery app are Expanders, but they do not seem to offer the same functionality (expanding either up and down, no way to specify a title (such as "Printers & scanners") and a subtitle (such as "Preferences, troubleshoot") in addition to content (such as the "Add device" button in the screenshot).

How can I achieve a similar look and behavior in my UWP app with WinUI 2.7?

enter image description here

winui uwp-xaml uwp controls
2 Answers

Not sure exactly the control they are using, but you can get a pretty similar style using a ListView and Expanders.

Here's the outcome I got: Expander List Image

My XAML code:

<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}"/>

and C# code-behind:

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

If you have any questions, let me know!

user_176404180
user_147729940
Related