다음을 통해 공유

세그먼트

기본 사항

컨트롤은 Segmented 2-5개 항목에 가장 적합하며 오버플로를 지원하지 않습니다. 및 Content 속성은 Icon .에 SegmentedItems설정할 수 있습니다.

<!--  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="SegmentedExperiment.Samples.SegmentedBasicSample"
      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:local="using:SegmentedExperiment.Samples"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:ui="using:CommunityToolkit.WinUI"
      mc:Ignorable="d">

    <StackPanel x:Name="Panel"
                Spacing="8">
        <TextBlock Style="{StaticResource BodyStrongTextBlockStyle}"
                   Text="Icon + content" />
        <controls:Segmented HorizontalAlignment="{x:Bind local:SegmentedBasicSample.ConvertStringToHorizontalAlignment(Alignment), Mode=OneWay}"
                            Orientation="{x:Bind local:SegmentedBasicSample.ConvertStringToOrientation(OrientationMode), Mode=OneWay}"
                            SelectedIndex="0"
                            SelectionMode="{x:Bind local:SegmentedBasicSample.ConvertStringToSelectionMode(SelectionMode), Mode=OneWay}">
            <controls:SegmentedItem Content="Item 1"
                                    Icon="{ui:FontIcon Glyph=}" />
            <controls:SegmentedItem Content="Item 2"
                                    Icon="{ui:FontIcon Glyph=}" />
            <controls:SegmentedItem Content="Item 3 with a long label"
                                    Icon="{ui:FontIcon Glyph=}" />
            <controls:SegmentedItem Content="Item 4"
                                    Icon="{ui:FontIcon Glyph=}" />
        </controls:Segmented>

        <TextBlock Margin="0,24,0,0"
                   Style="{StaticResource BodyStrongTextBlockStyle}"
                   Text="Icon only" />
        <controls:Segmented HorizontalAlignment="{x:Bind local:SegmentedBasicSample.ConvertStringToHorizontalAlignment(Alignment), Mode=OneWay}"
                            Orientation="{x:Bind local:SegmentedBasicSample.ConvertStringToOrientation(OrientationMode), Mode=OneWay}"
                            SelectedIndex="2"
                            SelectionMode="{x:Bind local:SegmentedBasicSample.ConvertStringToSelectionMode(SelectionMode), Mode=OneWay}">
            <controls:SegmentedItem Icon="{ui:FontIcon Glyph=}"
                                    ToolTipService.ToolTip="Day view" />
            <controls:SegmentedItem Icon="{ui:FontIcon Glyph=}"
                                    ToolTipService.ToolTip="Week view" />
            <controls:SegmentedItem Icon="{ui:FontIcon Glyph=}"
                                    ToolTipService.ToolTip="Month view" />
        </controls:Segmented>
    </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 CommunityToolkit.WinUI.Controls;

namespace SegmentedExperiment.Samples;

/// <summary>
/// An example sample page of a Segmented control.
/// </summary>
[ToolkitSampleMultiChoiceOption("SelectionMode", "Single", "Multiple", Title = "Selection mode")]
[ToolkitSampleMultiChoiceOption("Alignment", "Left", "Center", "Right", "Stretch", Title = "Horizontal alignment")]
[ToolkitSampleMultiChoiceOption("OrientationMode", "Horizontal", "Vertical", Title = "Orientation")]

[ToolkitSample(id: nameof(SegmentedBasicSample), "Basics", description: $"A sample for showing how to create and use a {nameof(Segmented)} custom control.")]
public sealed partial class SegmentedBasicSample : Page
{
    public SegmentedBasicSample()
    {
        this.InitializeComponent();
    }

    // TODO: See https://github.com/CommunityToolkit/Labs-Windows/issues/149
    public static ListViewSelectionMode ConvertStringToSelectionMode(string selectionMode) => selectionMode switch
    {
        "Single" => ListViewSelectionMode.Single,
        "Multiple" => ListViewSelectionMode.Multiple,
        _ => throw new System.NotImplementedException(),
    };

    public static HorizontalAlignment ConvertStringToHorizontalAlignment(string alignment) => alignment switch
    {
        "Left" => HorizontalAlignment.Left,
        "Center" => HorizontalAlignment.Center,
        "Right" => HorizontalAlignment.Right,
        "Stretch" => HorizontalAlignment.Stretch,
        _ => throw new System.NotImplementedException(),
    };

    public static Orientation ConvertStringToOrientation(string orientation) => orientation switch
    {
        "Horizontal" => Orientation.Horizontal,
        "Vertical" => Orientation.Vertical,
        _ => throw new System.NotImplementedException(),
    };
}

선택 사항

Segmented 는 단일 및 다중 선택을 지원합니다. 첫 번째 항목으로 Single 설정된 경우 SelectionMode 기본적으로 선택됩니다. 로 설정 AutoSelection false하여 재정의할 수 있습니다.

기타 스타일

컨트롤에는 Segmented 애플리케이션의 모양과 느낌에 맞게 다양한 추가 스타일이 포함되어 있습니다. PivotSegmentedStyle 단추를 나타내는 동안 ButtonSegmentedStyle 현대적인 Pivot 스타일과 일치합니다. 이러한 스타일을 로드하려면 리소스로 추가 ResourceDictionary 해야 합니다(아래 샘플 참조 Page.Resources ).

<!--  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="SegmentedExperiment.Samples.SegmentedStylesSample"
      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:local="using:SegmentedExperiment.Samples"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:ui="using:CommunityToolkit.WinUI"
      mc:Ignorable="d">
    <Page.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="ms-appx:///CommunityToolkit.WinUI.Controls.Segmented/Segmented/Segmented.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Page.Resources>
    <StackPanel Width="480"
                Spacing="8">
        <TextBlock Style="{StaticResource BodyStrongTextBlockStyle}"
                   Text="PivotSegmentedStyle" />
        <controls:Segmented Orientation="{x:Bind local:SegmentedStylesSample.ConvertStringToOrientation(OrientationMode), Mode=OneWay}"
                            SelectedIndex="1"
                            SelectionMode="{x:Bind local:SegmentedStylesSample.ConvertStringToSelectionMode(SelectionMode), Mode=OneWay}"
                            Style="{StaticResource PivotSegmentedStyle}">
            <controls:SegmentedItem>Item 1</controls:SegmentedItem>
            <controls:SegmentedItem>Item 2</controls:SegmentedItem>
            <controls:SegmentedItem>Item with long label</controls:SegmentedItem>
            <controls:SegmentedItem>Item 4</controls:SegmentedItem>
        </controls:Segmented>

        <TextBlock Margin="0,24,0,0"
                   Style="{StaticResource BodyStrongTextBlockStyle}"
                   Text="ButtonSegmentedStyle" />
        <controls:Segmented Orientation="{x:Bind local:SegmentedStylesSample.ConvertStringToOrientation(OrientationMode), Mode=OneWay}"
                            SelectedIndex="0"
                            SelectionMode="{x:Bind local:SegmentedStylesSample.ConvertStringToSelectionMode(SelectionMode), Mode=OneWay}"
                            Style="{StaticResource ButtonSegmentedStyle}">
            <controls:SegmentedItem Content="Day"
                                    Icon="{ui:FontIcon Glyph=}"
                                    ToolTipService.ToolTip="Day view" />
            <controls:SegmentedItem Content="Week"
                                    Icon="{ui:FontIcon Glyph=}"
                                    ToolTipService.ToolTip="Week view" />
            <controls:SegmentedItem Content="Month"
                                    Icon="{ui:FontIcon Glyph=}"
                                    ToolTipService.ToolTip="Month view" />
        </controls:Segmented>
    </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 SegmentedExperiment.Samples;

/// <summary>
/// An sample that shows how the Segmented control has multiple built-in styles.
/// </summary>
[ToolkitSampleMultiChoiceOption("SelectionMode", "Single", "Multiple", Title = "Selection mode")]
[ToolkitSampleMultiChoiceOption("OrientationMode", "Horizontal", "Vertical", Title = "Orientation")]

[ToolkitSample(id: nameof(SegmentedStylesSample), "Additional styles", description: "A sample on how to use different built-in styles.")]
public sealed partial class SegmentedStylesSample : Page
{
    public SegmentedStylesSample()
    {
        this.InitializeComponent();
    }
    public static ListViewSelectionMode ConvertStringToSelectionMode(string selectionMode) => selectionMode switch
    {
        "Single" => ListViewSelectionMode.Single,
        "Multiple" => ListViewSelectionMode.Multiple,
        _ => throw new System.NotImplementedException(),
    };

    public static Orientation ConvertStringToOrientation(string orientation) => orientation switch
    {
        "Horizontal" => Orientation.Horizontal,
        "Vertical" => Orientation.Vertical,
        _ => throw new System.NotImplementedException(),
    };
}

Segmented + SwitchPresenter

컨트롤을 Segmented 결합할 수 있습니다. 예를 들어 SwitchPresenter 쉽게 탐색할 수 있고 제한된 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="SegmentedExperiment.Samples.SegmentedSwitchPresenterSample"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:animations="using:CommunityToolkit.WinUI.Animations"
      xmlns:controls="using:CommunityToolkit.WinUI.Controls"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:local="using:SegmentedExperiment.Samples"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:ui="using:CommunityToolkit.WinUI"
      mc:Ignorable="d">
    <Page.Resources>
        <Style x:Key="PanelStyle"
               TargetType="StackPanel">
            <Setter Property="CornerRadius" Value="8" />
            <Setter Property="Padding" Value="16" />
            <Setter Property="Background" Value="{ThemeResource CardBackgroundFillColorDefaultBrush}" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="BorderBrush" Value="{ThemeResource CardStrokeColorDefaultBrush}" />
            <Setter Property="Orientation" Value="Horizontal" />
            <Setter Property="Spacing" Value="8" />
            <Setter Property="animations:Implicit.HideAnimations" Value="{StaticResource ShowTransitions}" />
        </Style>

        <animations:ImplicitAnimationSet x:Name="ShowTransitions">
            <animations:OffsetAnimation EasingMode="EaseOut"
                                        From="0,24,0"
                                        To="0"
                                        Duration="0:0:0.4" />
            <animations:OpacityAnimation EasingMode="EaseOut"
                                         From="0"
                                         To="1"
                                         Duration="0:0:0.2" />
        </animations:ImplicitAnimationSet>
        <animations:ImplicitAnimationSet x:Name="HideTransitions">
            <animations:OffsetAnimation EasingMode="EaseOut"
                                        From="0"
                                        To="0,24,0"
                                        Duration="0:0:0.2" />
            <animations:OpacityAnimation EasingMode="EaseOut"
                                         From="1"
                                         To="0"
                                         Duration="0:0:0.1" />
        </animations:ImplicitAnimationSet>
    </Page.Resources>
    <StackPanel Width="360"
                VerticalAlignment="Top"
                Orientation="Vertical"
                Spacing="8">
        <controls:Segmented x:Name="segmentedControl"
                            HorizontalAlignment="Stretch"
                            SelectedIndex="0">
            <controls:SegmentedItem Content="Square"
                                    Icon="{ui:FontIcon Glyph=}"
                                    Tag="square" />
            <controls:SegmentedItem Content="Circle"
                                    Icon="{ui:FontIcon Glyph=}"
                                    Tag="circle" />
            <controls:SegmentedItem Content="Rectangle"
                                    Icon="{ui:FontIcon Glyph=}"
                                    Tag="rect" />
        </controls:Segmented>
        <controls:SwitchPresenter Value="{Binding SelectedItem.Tag, ElementName=segmentedControl}">
            <controls:Case Value="square">
                <StackPanel animations:Implicit.HideAnimations="{StaticResource HideTransitions}"
                            animations:Implicit.ShowAnimations="{StaticResource ShowTransitions}"
                            Style="{StaticResource PanelStyle}">

                    <Border Width="24"
                            Height="24"
                            Background="{ThemeResource AccentFillColorDefaultBrush}" />
                    <TextBlock VerticalAlignment="Center"
                               Text="This is the Square panel" />
                </StackPanel>
            </controls:Case>
            <controls:Case Value="circle">
                <StackPanel animations:Implicit.HideAnimations="{StaticResource HideTransitions}"
                            animations:Implicit.ShowAnimations="{StaticResource ShowTransitions}"
                            Style="{StaticResource PanelStyle}">

                    <Ellipse Width="24"
                             Height="24"
                             Fill="{ThemeResource AccentFillColorDefaultBrush}" />
                    <TextBlock VerticalAlignment="Center"
                               Text="This is the Circle panel" />
                </StackPanel>
            </controls:Case>
            <controls:Case Value="rect">
                <StackPanel animations:Implicit.HideAnimations="{StaticResource HideTransitions}"
                            animations:Implicit.ShowAnimations="{StaticResource ShowTransitions}"
                            Style="{StaticResource PanelStyle}">
                    <Rectangle Width="48"
                               Height="24"
                               Fill="{ThemeResource AccentFillColorDefaultBrush}" />
                    <TextBlock VerticalAlignment="Center"
                               Text="This is the Rectangle panel" />
                </StackPanel>
            </controls:Case>
        </controls:SwitchPresenter>
    </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 CommunityToolkit.WinUI.Controls;

namespace SegmentedExperiment.Samples;

/// <summary>
/// An example sample page of a Segmented control.
/// </summary>

[ToolkitSample(id: nameof(SegmentedSwitchPresenterSample), "Segmented + SwitchPresenter", description: $"A sample for showing how to create and use a {nameof(Segmented)} control in combination with a SwitchPresenter.")]
public sealed partial class SegmentedSwitchPresenterSample : Page
{
    public SegmentedSwitchPresenterSample()
    {
        this.InitializeComponent();
    }
}
  • Last updated on