Porting Segmented

components/Segmented/OpenSolution.bat

@@ -0,0 +1,3 @@
+@ECHO OFF
+
+powershell ..\..\tooling\ProjectHeads\GenerateSingleSampleHeads.ps1 -componentPath %CD% %*

components/Segmented/samples/Dependencies.props

@@ -0,0 +1,31 @@
+<!--
+    WinUI 2 under UWP uses TargetFramework uap10.0.*
+    WinUI 3 under WinAppSdk uses TargetFramework net6.0-windows10.*
+    However, under Uno-powered platforms, both WinUI 2 and 3 can share the same TargetFramework.
+
+    MSBuild doesn't play nicely with this out of the box, so we've made it easy for you.
+
+    For .NET Standard packages, you can use the Nuget Package Manager in Visual Studio.
+    For UWP / WinAppSDK / Uno packages, place the package references here.
+-->
+<Project>
+    <!-- WinUI 2 / UWP -->
+    <ItemGroup Condition="'$(IsUwp)' == 'true'">
+        <!-- <PackageReference Include="Microsoft.Toolkit.Uwp.UI.Controls.Primitives" Version="7.1.2"/> -->
+    </ItemGroup>
+
+    <!-- WinUI 2 / Uno -->
+    <ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '2'">
+        <!-- <PackageReference Include="Uno.Microsoft.Toolkit.Uwp.UI.Controls.Primitives" Version="7.1.11"/> -->
+    </ItemGroup>
+
+    <!-- WinUI 3 / WinAppSdk -->
+    <ItemGroup Condition="'$(IsWinAppSdk)' == 'true'">
+        <!-- <PackageReference Include="CommunityToolkit.WinUI.UI.Controls.Primitives" Version="7.1.2"/> -->
+    </ItemGroup>
+
+    <!-- WinUI 3 / Uno -->
+    <ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '3'">
+        <!-- <PackageReference Include="Uno.CommunityToolkit.WinUI.UI.Controls.Primitives" Version="7.1.100-dev.15.g12261e2626"/> -->
+    </ItemGroup>
+</Project>

components/Segmented/samples/Segmented.Samples.csproj

@@ -0,0 +1,8 @@
+<Project Sdk="MSBuild.Sdk.Extras/3.0.23">
+  <PropertyGroup>
+    <ToolkitComponentName>Segmented</ToolkitComponentName>
+  </PropertyGroup>
+
+  <!-- Sets this up as a toolkit component's sample project -->
+  <Import Project="$(ToolingDirectory)\ToolkitComponent.SampleProject.props" />
+</Project>

components/Segmented/samples/Segmented.md

@@ -0,0 +1,28 @@
+---
+title: Segmented
+author: niels9001
+description: A common UI control to configure a view or setting. 
+keywords: SegmentedControl, Control, Layout, Segmented
+dev_langs:
+  - csharp
+category: Controls
+subcategory: Input
+discussion-id: 314
+issue-id: 392
+icon: Assets/Segmented.png
+---
+
+## The basics
+
+The `Segmented` control is best used with 2-5 items and does not support overflow. The `Icon` and `Content` property can be set on the `SegmentedItems`.
+
+> [!Sample SegmentedBasicSample]
+
+## Selection
+`Segmented` supports single and multi-selection. When `SelectionMode` is set to `Single` the first item will be selected by default. This can be overriden by settings `AutoSelection` to `false`. 
+
+## Other styles
+
+The `Segmented` control contains various additional styles, to match the look and feel of your application. The `PivotSegmentedStyle` matches a modern `Pivot` style while the `ButtonSegmentedStyle` represents buttons.
+
+> [!SAMPLE SegmentedStylesSample]

components/Segmented/samples/SegmentedBasicSample.xaml

@@ -0,0 +1,63 @@
+<!--  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"
+      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">
+                <controls:SegmentedItem.Icon>
+                    <FontIcon Glyph="&#xEA3A;" />
+                </controls:SegmentedItem.Icon>
+            </controls:SegmentedItem>
+            <controls:SegmentedItem Content="Item 2">
+                <controls:SegmentedItem.Icon>
+                    <FontIcon Glyph="&#xEA3A;" />
+                </controls:SegmentedItem.Icon>
+            </controls:SegmentedItem>
+            <controls:SegmentedItem Content="Item 3 with a long label">
+                <controls:SegmentedItem.Icon>
+                    <FontIcon Glyph="&#xEA3A;" />
+                </controls:SegmentedItem.Icon>
+            </controls:SegmentedItem>
+            <controls:SegmentedItem Content="Item 4">
+                <controls:SegmentedItem.Icon>
+                    <FontIcon Glyph="&#xEA3A;" />
+                </controls:SegmentedItem.Icon>
+            </controls:SegmentedItem>
+        </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 ToolTipService.ToolTip="Day view">
+                <controls:SegmentedItem.Icon>
+                    <FontIcon Glyph="&#xE8BF;" />
+                </controls:SegmentedItem.Icon>
+            </controls:SegmentedItem>
+            <controls:SegmentedItem ToolTipService.ToolTip="Week view">
+                <controls:SegmentedItem.Icon>
+                    <FontIcon Glyph="&#xE8C0;" />
+                </controls:SegmentedItem.Icon>
+            </controls:SegmentedItem>
+            <controls:SegmentedItem ToolTipService.ToolTip="Month view">
+                <controls:SegmentedItem.Icon>
+                    <FontIcon Glyph="&#xE787;" />
+                </controls:SegmentedItem.Icon>
+            </controls:SegmentedItem>
+        </controls:Segmented>
+    </StackPanel>
+</Page>

components/Segmented/samples/SegmentedBasicSample.xaml.cs

@@ -0,0 +1,40 @@
+// 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(),
+    };
+}
+

components/Segmented/samples/SegmentedStylesSample.xaml

@@ -0,0 +1,56 @@
+<!--  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"
+      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"
+                                    ToolTipService.ToolTip="Day view">
+                <controls:SegmentedItem.Icon>
+                    <FontIcon Glyph="&#xE8BF;" />
+                </controls:SegmentedItem.Icon>
+            </controls:SegmentedItem>
+            <controls:SegmentedItem Content="Week"
+                                    ToolTipService.ToolTip="Week view">
+                <controls:SegmentedItem.Icon>
+                    <FontIcon Glyph="&#xE8C0;" />
+                </controls:SegmentedItem.Icon>
+            </controls:SegmentedItem>
+            <controls:SegmentedItem Content="Month"
+                                    ToolTipService.ToolTip="Month view">
+                <controls:SegmentedItem.Icon>
+                    <FontIcon Glyph="&#xE787;" />
+                </controls:SegmentedItem.Icon>
+            </controls:SegmentedItem>
+        </controls:Segmented>
+    </StackPanel>
+</Page>

components/Segmented/samples/SegmentedStylesSample.xaml.cs

@@ -0,0 +1,25 @@
+// 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(),
+    };
+}

components/Segmented/src/CommunityToolkit.WinUI.Controls.Segmented.csproj

@@ -0,0 +1,20 @@
+<Project Sdk="MSBuild.Sdk.Extras/3.0.23">
+  <PropertyGroup>
+    <ToolkitComponentName>Segmented</ToolkitComponentName>
+    <Description>This package contains Segmented.</Description>
+
+    <!-- Rns suffix is required for namespaces shared across projects. See https://github.com/CommunityToolkit/Labs-Windows/issues/152 -->
+    <RootNamespace>CommunityToolkit.WinUI.Controls.SegmentedRns</RootNamespace>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <ProjectReference Include="$(ToolkitExtensionSourceProject)"/>
+  </ItemGroup>
+
+  <!-- Sets this up as a toolkit component's source project -->
+  <Import Project="$(ToolingDirectory)\ToolkitComponent.SourceProject.props" />
+
+  <PropertyGroup>
+    <PackageId>$(PackageIdPrefix).$(PackageIdVariant).Controls.$(ToolkitComponentName)</PackageId>
+  </PropertyGroup>
+</Project>

components/Segmented/src/Dependencies.props

@@ -0,0 +1,31 @@
+<!--
+    WinUI 2 under UWP uses TargetFramework uap10.0.*
+    WinUI 3 under WinAppSdk uses TargetFramework net6.0-windows10.*
+    However, under Uno-powered platforms, both WinUI 2 and 3 can share the same TargetFramework.
+
+    MSBuild doesn't play nicely with this out of the box, so we've made it easy for you.
+
+    For .NET Standard packages, you can use the Nuget Package Manager in Visual Studio.
+    For UWP / WinAppSDK / Uno packages, place the package references here.
+-->
+<Project>
+    <!-- WinUI 2 / UWP -->
+    <ItemGroup Condition="'$(IsUwp)' == 'true'">
+        <!-- <PackageReference Include="Microsoft.Toolkit.Uwp.UI.Controls.Primitives" Version="7.1.2"/> -->
+    </ItemGroup>
+
+    <!-- WinUI 2 / Uno -->
+    <ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '2'">
+        <!-- <PackageReference Include="Uno.Microsoft.Toolkit.Uwp.UI.Controls.Primitives" Version="7.1.11"/> -->
+    </ItemGroup>
+
+    <!-- WinUI 3 / WinAppSdk -->
+    <ItemGroup Condition="'$(IsWinAppSdk)' == 'true'">
+        <!-- <PackageReference Include="CommunityToolkit.WinUI.UI.Controls.Primitives" Version="7.1.2"/> -->
+    </ItemGroup>
+
+    <!-- WinUI 3 / Uno -->
+    <ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '3'">
+        <!-- <PackageReference Include="Uno.CommunityToolkit.WinUI.UI.Controls.Primitives" Version="7.1.100-dev.15.g12261e2626"/> -->
+    </ItemGroup>
+</Project>