SettingsCardSample.xaml

<!--  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="A SettingsCard with Header, HeaderIcon, Description and Content set."
                               Header="Default SettingsCard"
                               HeaderIcon="{ui:FontIcon Glyph=&#xE799;}"
                               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=&#xE745;}"
                               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>