分段

2024-11-07

基础知识

Segmented 控件最适合用于 2-5 个项，并且不支持溢出。可以在 SegmentedItems 上设置 Icon 和 Content 属性。

<!--  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}"
                            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}"
                            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")]

[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(),
    };
}

选择

Segmented 支持单选和多选。当 SelectionMode 设置为 Single 时，将默认选择第一项。可以通过将 AutoSelection 设置为 false 来重写此操作。

其他样式

Segmented 控件包含各种附加样式，以匹配应用程序的观感。 PivotSegmentedStyle 与新式 Pivot 样式匹配，而 ButtonSegmentedStyle 表示按钮。要加载这些样式，请确保将 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 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 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")]

[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(),
    };
}

分段式 + 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();
    }
}

通过

分段

基础知识

选择

其他样式

分段式 + SwitchPresenter

其他资源