[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] SettingsExpander 엘리먼트 : 설정 확장기 만들기

■ SettingsExpander 엘리먼트를 사용해 설정 확장기를 만드는 방법을 보여준다.

※ 이 예제 코드에서 사용된 SettingsExpander 엘리먼트는 CommunityToolkit.WinUI.Controls.SettingsControls 누겟(버전 : 8.0.240109)을 참조한다.
※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다.
※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를 None으로 추가했다.

▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8"?>
<Page x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:ctw="using:CommunityToolkit.WinUI"
    xmlns:ctwc="using:CommunityToolkit.WinUI.Controls"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <ctwc:SettingsExpander
        Margin="50"
        HeaderIcon="{ctw:FontIcon Glyph=&#xE91B;}"
        Header="SettingsExpander"
        Description="The SettingsExpander has the same properties as a Card, and you can set SettingsCard as part of the Items collection."
        IsExpanded="True"
        IsEnabled="True">
        <ComboBox SelectedIndex="0">
            <ComboBoxItem>Option 1</ComboBoxItem>
            <ComboBoxItem>Option 2</ComboBoxItem>
            <ComboBoxItem>Option 3</ComboBoxItem>
        </ComboBox>
        <ctwc:SettingsExpander.Items>
            <ctwc:SettingsCard Header="A basic SettingsCard within an SettingsExpander">
                <Button Content="Button" />
            </ctwc:SettingsCard>
            <ctwc:SettingsCard
                Header="This item can be clicked"
                Description="SettingsCard within an Expander can be made clickable too!"
                IsClickEnabled="True" />
            <ctwc:SettingsCard ContentAlignment="Left">
                <CheckBox Content="Here the ContentAlignment is set to Left. This is great for e.g. CheckBoxes or RadioButtons." />
            </ctwc:SettingsCard>
            <ctwc:SettingsCard
                HorizontalContentAlignment="Left"
                ContentAlignment="Vertical"
                Header="Vertically aligned"
                Description="You can also align your content vertically. Make sure to set the HorizontalAlignment to Left when you do!">
                <GridView SelectedIndex="1">
                    <GridViewItem>
                        <Border
                            Width="64"
                            Height="64"
                            CornerRadius="4"
                            Background="#0078d4" />
                    </GridViewItem>
                    <GridViewItem>
                        <Border
                            Width="64"
                            Height="64"
                            CornerRadius="4"
                            Background="#005eb7" />
                    </GridViewItem>
                    <GridViewItem>
                        <Border
                            Width="64"
                            Height="64"
                            CornerRadius="4"
                            Background="#003d92" />
                    </GridViewItem>
                    <GridViewItem>
                        <Border
                            Width="64"
                            Height="64"
                            CornerRadius="4"
                            Background="#001968" />
                    </GridViewItem>
                </GridView>
            </ctwc:SettingsCard>
            <ctwc:SettingsCard
                Header="Customization"
                Description="You can override the Left indention of a SettingsCard by overriding the SettingsCardLeftIndention">
                <ctwc:SettingsCard.Resources>
                    <x:Double x:Key="SettingsCardLeftIndention">40</x:Double>
                </ctwc:SettingsCard.Resources>
            </ctwc:SettingsCard>
        </ctwc:SettingsExpander.Items>
    </ctwc:SettingsExpander>
</Page>

<?xml version="1.0" encoding="utf-8"?>

<Page x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:ctw="using:CommunityToolkit.WinUI"

xmlns:ctwc="using:CommunityToolkit.WinUI.Controls"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<ctwc:SettingsExpander

Margin="50"

HeaderIcon="{ctw:FontIcon Glyph=}"

Header="SettingsExpander"

Description="The SettingsExpander has the same properties as a Card, and you can set SettingsCard as part of the Items collection."

IsExpanded="True"

IsEnabled="True">

<ComboBoxItem>Option 1</ComboBoxItem>

<ComboBoxItem>Option 2</ComboBoxItem>

<ComboBoxItem>Option 3</ComboBoxItem>

</ComboBox>

<ctwc:SettingsExpander.Items>

<ctwc:SettingsCard Header="A basic SettingsCard within an SettingsExpander">

</ctwc:SettingsCard>

<ctwc:SettingsCard

Header="This item can be clicked"

Description="SettingsCard within an Expander can be made clickable too!"

IsClickEnabled="True" />

<ctwc:SettingsCard ContentAlignment="Left">

</ctwc:SettingsCard>

<ctwc:SettingsCard

HorizontalContentAlignment="Left"

ContentAlignment="Vertical"

Header="Vertically aligned"

Description="You can also align your content vertically. Make sure to set the HorizontalAlignment to Left when you do!">

<Border

Width="64"

Height="64"

CornerRadius="4"

Background="#0078d4" />

</GridViewItem>

<Border

Width="64"

Height="64"

CornerRadius="4"

Background="#005eb7" />

</GridViewItem>

<Border

Width="64"

Height="64"

CornerRadius="4"

Background="#003d92" />

</GridViewItem>

<Border

Width="64"

Height="64"

CornerRadius="4"

Background="#001968" />

</GridViewItem>

</GridView>

</ctwc:SettingsCard>

<ctwc:SettingsCard

Header="Customization"

Description="You can override the Left indention of a SettingsCard by overriding the SettingsCardLeftIndention">

<ctwc:SettingsCard.Resources>

<x:Double x:Key="SettingsCardLeftIndention">40</x:Double>

</ctwc:SettingsCard.Resources>

</ctwc:SettingsCard>

</ctwc:SettingsExpander.Items>

</ctwc:SettingsExpander>

</Page>

TestProject.zip