[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] Segmented 엘리먼트 : 세그먼트를 만들기

■ Segmented 엘리먼트를 사용해 세그먼트를 만드는 방법을 보여준다.

• CommunityToolkit.WinUI.Controls.Segmented 누겟을 별도로 설치한다.
• 세그먼트는 항목 2-5개일 경우 가장 적합하며 오버플로우를 지원하지 않는다.
• Content 속성은 SegmentedItems 객체를 설정할 수 있다.

※ 이 예제 코드에서 사용된 Segmented 엘리먼트는 CommunityToolkit.WinUI.Controls.Segmented 누겟(버전 : 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">
    <StackPanel Name="Panel"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Margin="50 0 50 0"
        Spacing="10">
        <TextBlock
            Style="{StaticResource BodyStrongTextBlockStyle}"
            HorizontalAlignment="Center"
            Text="Icon + content" />
        <ctwc:Segmented
            HorizontalAlignment="Center"
            Margin="0 10 0 0"
            SelectedIndex="0"
            SelectionMode="Extended">
            <ctwc:SegmentedItem
                Icon="{ctw:FontIcon Glyph=&#xEA3A;}"
                Content="Item 1" />
            <ctwc:SegmentedItem
                Icon="{ctw:FontIcon Glyph=&#xEA3A;}"
                Content="Item 2" />
            <ctwc:SegmentedItem
                Icon="{ctw:FontIcon Glyph=&#xEA3A;}"
                Content="Item 3 with a long label" />
            <ctwc:SegmentedItem
                Icon="{ctw:FontIcon Glyph=&#xEA3A;}"
                Content="Item 4" />
        </ctwc:Segmented>
        <TextBlock
            Style="{StaticResource BodyStrongTextBlockStyle}"
            HorizontalAlignment="Center"
            Margin="0 30 0 0"
            Text="Icon only" />
        <ctwc:Segmented
            HorizontalAlignment="Center"
            Margin="0 10 0 0"
            SelectedIndex="2"
            SelectionMode="Extended">
            <ctwc:SegmentedItem
                Icon="{ctw:FontIcon Glyph=&#xE8BF;}"
                ToolTipService.ToolTip="Day view" />
            <ctwc:SegmentedItem
                Icon="{ctw:FontIcon Glyph=&#xE8C0;}"
                ToolTipService.ToolTip="Week view" />
            <ctwc:SegmentedItem
                Icon="{ctw:FontIcon Glyph=&#xE787;}"
                ToolTipService.ToolTip="Month view" />
        </ctwc:Segmented>
    </StackPanel>
</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">

<StackPanel Name="Panel"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Margin="50 0 50 0"

Spacing="10">

<TextBlock

Style="{StaticResource BodyStrongTextBlockStyle}"

HorizontalAlignment="Center"

Text="Icon + content" />

<ctwc:Segmented

HorizontalAlignment="Center"

Margin="0 10 0 0"

SelectedIndex="0"

SelectionMode="Extended">

<ctwc:SegmentedItem

Icon="{ctw:FontIcon Glyph=}"

Content="Item 1" />

<ctwc:SegmentedItem

Icon="{ctw:FontIcon Glyph=}"

Content="Item 2" />

<ctwc:SegmentedItem

Icon="{ctw:FontIcon Glyph=}"

Content="Item 3 with a long label" />

<ctwc:SegmentedItem

Icon="{ctw:FontIcon Glyph=}"

Content="Item 4" />

</ctwc:Segmented>

<TextBlock

Style="{StaticResource BodyStrongTextBlockStyle}"

HorizontalAlignment="Center"

Margin="0 30 0 0"

Text="Icon only" />

<ctwc:Segmented

HorizontalAlignment="Center"

Margin="0 10 0 0"

SelectedIndex="2"

SelectionMode="Extended">

<ctwc:SegmentedItem

Icon="{ctw:FontIcon Glyph=}"

ToolTipService.ToolTip="Day view" />

<ctwc:SegmentedItem

Icon="{ctw:FontIcon Glyph=}"

ToolTipService.ToolTip="Week view" />

<ctwc:SegmentedItem

Icon="{ctw:FontIcon Glyph=}"

ToolTipService.ToolTip="Month view" />

</ctwc:Segmented>

</StackPanel>

</Page>

TestProject.zip

Post Views: 0

.NET8 C# COMMUNITY TOOLKIT CONTROL UNPACKAGED WINUI3

icodebroker

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] Segmented 엘리먼트 : 세그먼트를 만들기

분류

보관함