SettingsCard

SettingsCard ist ein Steuerelement, das zum Anzeigen von Einstellungen auf Ihrer Benutzeroberfläche verwendet werden kann. Es greift auf den Standardstil in Windows 11 zurück und ist einfach zu verwenden, erfüllt alle Barrierefreiheitsstandards und sorgt für ein großartiges Aussehen Ihrer Einstellungsseite. Sie können die Eigenschaften Header, Description, HeaderIcon und Content festlegen, um eine benutzerfreundliche Umgebung zu erstellen, z. B.:

<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
<Page x:Class="SettingsControlsExperiment.Samples.SettingsCardSample"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:controls="using:CommunityToolkit.WinUI.Controls"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:ui="using:CommunityToolkit.WinUI"
      mc:Ignorable="d">
    <StackPanel Spacing="4">

        <controls:SettingsCard x:Name="settingsCard"
                               Description="This is a default card, with the Header, HeaderIcon, Description and Content set."
                               Header="This is the Header"
                               HeaderIcon="{ui:FontIcon Glyph=}"
                               IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}">
            <ComboBox SelectedIndex="0">
                <ComboBoxItem>Option 1</ComboBoxItem>
                <ComboBoxItem>Option 2</ComboBoxItem>
                <ComboBoxItem>Option 3</ComboBoxItem>
            </ComboBox>
        </controls:SettingsCard>

        <controls:SettingsCard Description="You can use a FontIcon, SymbolIcon or BitmapIcon to set the cards HeaderIcon."
                               Header="Icon options"
                               HeaderIcon="{ui:BitmapIcon Source=ms-appx:///Assets/AppTitleBar.scale-200.png}"
                               IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}">
            <ToggleSwitch />
        </controls:SettingsCard>

        <controls:SettingsCard Header="A card with custom objects as its Description"
                               IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}">
            <controls:SettingsCard.Description>
                <HyperlinkButton Content="Learn more about Phone Link" />
            </controls:SettingsCard.Description>
            <Button Content="Open Phone Link"
                    Style="{StaticResource AccentButtonStyle}" />
        </controls:SettingsCard>

        <controls:SettingsCard Description="When resizing a SettingsCard, the Content will wrap vertically. You can override this breakpoint by setting the SettingsCardWrapThreshold resource. For edge cases, you can also hide the icon by setting SettingsCardWrapNoIconThreshold."
                               Header="Adaptive layouts"
                               HeaderIcon="{ui:FontIcon Glyph=}"
                               IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}">
            <controls:SettingsCard.Resources>
                <x:Double x:Key="SettingsCardWrapThreshold">800</x:Double>
                <x:Double x:Key="SettingsCardWrapNoIconThreshold">600</x:Double>
            </controls:SettingsCard.Resources>
            <Button Content="This control will wrap vertically!"
                    Style="{StaticResource AccentButtonStyle}" />
        </controls:SettingsCard>

        <controls:SettingsCard Header="This is a card with a Header only" />
    </StackPanel>
</Page>

// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.

namespace SettingsControlsExperiment.Samples;

[ToolkitSampleBoolOption("IsCardEnabled", true, Title = "Is Enabled")]

[ToolkitSample(id: nameof(SettingsCardSample), "SettingsCard", description: "A sample for showing how SettingsCard can be static or clickable.")]
public sealed partial class SettingsCardSample : Page
{
    public SettingsCardSample()
    {
        this.InitializeComponent();
    }
}

SettingsCard kann auch durch Festlegen der IsClickEnabled-Eigenschaft in eine Schaltfläche umgewandelt werden. Dies kann nützlich sein, wenn die Einstellungskomponente zu einer Detailseite wechseln oder einen externen Link öffnen soll. Sie können ein benutzerdefiniertes Symbol festlegen, indem Sie das ActionIcon festlegen oder es vollständig ausblenden, indem Sie IsActionIconVisible auf false setzen.

<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
<Page x:Class="SettingsControlsExperiment.Samples.ClickableSettingsCardSample"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:controls="using:CommunityToolkit.WinUI.Controls"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:ui="using:CommunityToolkit.WinUI"
      mc:Ignorable="d">
    <StackPanel Spacing="4">
        <controls:SettingsCard x:Name="settingsCard"
                               Click="OnCardClicked"
                               Description="A SettingsCard can be made clickable and you can leverage the Command property or Click event."
                               Header="A clickable SettingsCard"
                               HeaderIcon="{ui:FontIcon Glyph=}"
                               IsClickEnabled="True"
                               IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}">
            <TextBlock Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                       Text="This is content" />
        </controls:SettingsCard>

        <controls:SettingsCard ActionIcon="{ui:FontIcon Glyph=}"
                               ActionIconToolTip="Open in new window"
                               Click="OnCardClicked"
                               Description="You can customize the ActionIcon and ActionIconToolTip."
                               Header="Customizing the ActionIcon"
                               HeaderIcon="{ui:FontIcon Glyph=}"
                               IsClickEnabled="True"
                               IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}" />

        <controls:SettingsCard Click="OnCardClicked"
                               Header="Hiding the ActionIcon"
                               HeaderIcon="{ui:FontIcon Glyph=}"
                               IsActionIconVisible="False"
                               IsClickEnabled="True"
                               IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}" />
    </StackPanel>
</Page>

// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.

using System.ComponentModel;

namespace SettingsControlsExperiment.Samples;

[ToolkitSampleBoolOption("IsCardEnabled", true, Title = "Is Enabled")]

[ToolkitSample(id: nameof(ClickableSettingsCardSample), "ClickableSettingsCardSample", description: "A sample for showing how SettingsCard can be static or clickable.")]
public sealed partial class ClickableSettingsCardSample : Page
{
    public ClickableSettingsCardSample()
    {
        this.InitializeComponent();
    }

    private async void OnCardClicked(object sender, RoutedEventArgs e)
    {
        await Windows.System.Launcher.LaunchUriAsync(new Uri("https://www.microsoft.com"));
    }
}