Skip to content

Commit 3ab75ba

Browse files
niels9001niels9001
authored
🧪 [Experiment] Segmented control (#357)
* Init * Adding Segmented * Fixes * CI fixes * Update ExampleSegmentedControlTestClass.cs * Update ExampleSegmentedControlTestPage.xaml * Update SegmentedItem.xaml * Update SegmentedItem.xaml * FrameworkElementExtensions * Updates * Fixing the EqualPanel and updating samples * Making sure the first item is selected when SelectionMode changed to Single * Fix * Update EqualPanel.cs
1 parent af480df commit 3ab75ba

25 files changed

+1704
-0
lines changed

‎components/SegmentedControl/OpenSolution.bat‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@ECHO OFF
2+
3+
powershell ..\..\common\ProjectHeads\GenerateSingleSampleHeads.ps1 -componentPath %CD% %*

‎components/SegmentedControl/samples/Dependencies.props‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!--
2+
WinUI 2 under UWP uses TargetFramework uap10.0.*
3+
WinUI 3 under WinAppSdk uses TargetFramework net6.0-windows10.*
4+
However, under Uno-powered platforms, both WinUI 2 and 3 can share the same TargetFramework.
5+
6+
MSBuild doesn't play nicely with this out of the box, so we've made it easy for you.
7+
8+
For .NET Standard packages, you can use the Nuget Package Manager in Visual Studio.
9+
For UWP / WinAppSDK / Uno packages, place the package references here.
10+
-->
11+
<Project>
12+
<!-- WinUI 2 / UWP -->
13+
<ItemGroup Condition="'$(IsUwp)' == 'true'">
14+
<!-- <PackageReference Include="Microsoft.Toolkit.Uwp.UI.Controls.Primitives" Version="7.1.2"/> -->
15+
</ItemGroup>
16+
17+
<!-- WinUI 2 / Uno -->
18+
<ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '2'">
19+
<!-- <PackageReference Include="Uno.Microsoft.Toolkit.Uwp.UI.Controls.Primitives" Version="7.1.11"/> -->
20+
</ItemGroup>
21+
22+
<!-- WinUI 3 / WinAppSdk -->
23+
<ItemGroup Condition="'$(IsWinAppSdk)' == 'true'">
24+
<!-- <PackageReference Include="CommunityToolkit.WinUI.UI.Controls.Primitives" Version="7.1.2"/> -->
25+
</ItemGroup>
26+
27+
<!-- WinUI 3 / Uno -->
28+
<ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '3'">
29+
<!-- <PackageReference Include="Uno.CommunityToolkit.WinUI.UI.Controls.Primitives" Version="7.1.100-dev.15.g12261e2626"/> -->
30+
</ItemGroup>
31+
</Project>

‎components/SegmentedControl/samples/SegmentedControl.Samples.csproj‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<Project Sdk="MSBuild.Sdk.Extras/3.0.23">
2+
<PropertyGroup>
3+
<ToolkitComponentName>SegmentedControl</ToolkitComponentName>
4+
</PropertyGroup>
5+
6+
<!-- Sets this up as a toolkit component's sample project -->
7+
<Import Project="$(RepositoryDirectory)common\ToolkitComponent.SampleProject.props" />
8+
</Project>

‎components/SegmentedControl/samples/SegmentedControl.md‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
title: SegmentedControl
3+
author: niels9001
4+
description: A common UI control to configure a view or setting.
5+
keywords: SegmentedControl, Control, Layout
6+
dev_langs:
7+
- csharp
8+
category: Controls
9+
subcategory: Layout
10+
discussion-id: 314
11+
issue-id: 0
12+
---
13+
14+
<!-- To know about all the available Markdown syntax, Check out https://docs.microsoft.com/contribute/markdown-reference -->
15+
<!-- Ensure you remove all comments before submission, to ensure that there are no formatting issues when displaying this page. -->
16+
<!-- It is recommended to check how the Documentation will look in the sample app, before Merging a PR -->
17+
<!-- **Note:** All links to other docs.microsoft.com pages should be relative without locale, i.e. for the one above would be /contribute/markdown-reference -->
18+
<!-- Included images should be optimized for size and not include any Intellectual Property references. -->
19+
20+
<!-- Be sure to update the discussion/issue numbers above with your Labs discussion/issue id numbers in order for UI links to them from the sample app to work. -->
21+
22+
# Segmented control
23+
24+
The `Segmented` control is a control to be used for configuring a view or setting. It's based off `ListViewBase` and support single and multi-selection.
25+
26+
27+
## The basics
28+
29+
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`.
30+
31+
> [!Sample SegmentedControlBasicSample]
32+
33+
## Other styles
34+
35+
The `Segmented` control contains various additional styles, to match the look and feel of your application. The `PillSegmentedStyle` matches a modern `Pivot` and `NavigationView` style.
36+
37+
> [!SAMPLE SegmentedControlStylesSample]

‎components/SegmentedControl/samples/SegmentedControlBasicSample.xaml‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!-- 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. -->
2+
<Page x:Class="SegmentedControlExperiment.Samples.SegmentedControlBasicSample"
3+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
6+
xmlns:labs="using:CommunityToolkit.Labs.WinUI"
7+
xmlns:local="using:SegmentedControlExperiment.Samples"
8+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
9+
mc:Ignorable="d">
10+
11+
<StackPanel x:Name="Panel"
12+
Spacing="8">
13+
<TextBlock Style="{StaticResource BodyStrongTextBlockStyle}"
14+
Text="Icon + label" />
15+
<labs:Segmented HorizontalAlignment="{x:Bind local:SegmentedControlBasicSample.ConvertStringToHorizontalAlignment(Alignment), Mode=OneWay}"
16+
SelectionMode="{x:Bind local:SegmentedControlBasicSample.ConvertStringToSelectionMode(SelectionMode), Mode=OneWay}">
17+
<labs:SegmentedItem>Item 1</labs:SegmentedItem>
18+
<labs:SegmentedItem>Item 2</labs:SegmentedItem>
19+
<labs:SegmentedItem>Item with long label</labs:SegmentedItem>
20+
<labs:SegmentedItem>Item 4</labs:SegmentedItem>
21+
</labs:Segmented>
22+
23+
<TextBlock Margin="0,24,0,0"
24+
Style="{StaticResource BodyStrongTextBlockStyle}"
25+
Text="Icon only" />
26+
<labs:Segmented HorizontalAlignment="{x:Bind local:SegmentedControlBasicSample.ConvertStringToHorizontalAlignment(Alignment), Mode=OneWay}"
27+
SelectionMode="{x:Bind local:SegmentedControlBasicSample.ConvertStringToSelectionMode(SelectionMode), Mode=OneWay}">
28+
<labs:SegmentedItem ToolTipService.ToolTip="Day view">
29+
<labs:SegmentedItem.Icon>
30+
<FontIcon Glyph="&#xE161;" />
31+
</labs:SegmentedItem.Icon>
32+
</labs:SegmentedItem>
33+
<labs:SegmentedItem ToolTipService.ToolTip="Week view">
34+
<labs:SegmentedItem.Icon>
35+
<FontIcon Glyph="&#xE162;" />
36+
</labs:SegmentedItem.Icon>
37+
</labs:SegmentedItem>
38+
<labs:SegmentedItem ToolTipService.ToolTip="Month view">
39+
<labs:SegmentedItem.Icon>
40+
<FontIcon Glyph="&#xE163;" />
41+
</labs:SegmentedItem.Icon>
42+
</labs:SegmentedItem>
43+
</labs:Segmented>
44+
</StackPanel>
45+
</Page>

‎components/SegmentedControl/samples/SegmentedControlBasicSample.xaml.cs‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the MIT license.
3+
// See the LICENSE file in the project root for more information.
4+
5+
using Microsoft.UI.Xaml.Controls;
6+
7+
namespace SegmentedControlExperiment.Samples;
8+
9+
/// <summary>
10+
/// An example sample page of a Segmented control.
11+
/// </summary>
12+
[ToolkitSampleMultiChoiceOption("SelectionMode", "Single", "Multiple", Title = "Selection mode")]
13+
[ToolkitSampleMultiChoiceOption("Alignment", "Left", "Center", "Right", "Stretch", Title = "Horizontal alignment")]
14+
15+
[ToolkitSample(id: nameof(SegmentedControlBasicSample), "Basics", description: $"A sample for showing how to create and use a {nameof(Segmented)} custom control.")]
16+
public sealed partial class SegmentedControlBasicSample : Page
17+
{
18+
public SegmentedControlBasicSample()
19+
{
20+
this.InitializeComponent();
21+
}
22+
23+
// TODO: See https://github.com/CommunityToolkit/Labs-Windows/issues/149
24+
public static ListViewSelectionMode ConvertStringToSelectionMode(string selectionMode) => selectionMode switch
25+
{
26+
"Single" => ListViewSelectionMode.Single,
27+
"Multiple" => ListViewSelectionMode.Multiple,
28+
_ => throw new System.NotImplementedException(),
29+
};
30+
31+
public static HorizontalAlignment ConvertStringToHorizontalAlignment(string alignment) => alignment switch
32+
{
33+
"Left" => HorizontalAlignment.Left,
34+
"Center" => HorizontalAlignment.Center,
35+
"Right" => HorizontalAlignment.Right,
36+
"Stretch" => HorizontalAlignment.Stretch,
37+
_ => throw new System.NotImplementedException(),
38+
};
39+
}
40+

‎components/SegmentedControl/samples/SegmentedControlStylesSample.xaml‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!-- 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. -->
2+
<Page x:Class="SegmentedControlExperiment.Samples.SegmentedControlStylesSample"
3+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
6+
xmlns:labs="using:CommunityToolkit.Labs.WinUI"
7+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
8+
mc:Ignorable="d">
9+
10+
<!--<StackPanel Spacing="8">
11+
<TextBlock Style="{StaticResource BodyStrongTextBlockStyle}"
12+
Text="Icon + label" />
13+
<labs:Segmented SelectionMode="{x:Bind local:SegmentedControlStylesSample.ConvertStringToSelectionMode(SelectionMode), Mode=OneWay}">
14+
-->
15+
<!-- TO DO: Add styles examples -->
16+
<!--
17+
<labs:SegmentedItem>Item 1</labs:SegmentedItem>
18+
<labs:SegmentedItem>Item 2</labs:SegmentedItem>
19+
<labs:SegmentedItem>Item with long label</labs:SegmentedItem>
20+
<labs:SegmentedItem>Item 4</labs:SegmentedItem>
21+
</labs:Segmented>
22+
</StackPanel>-->
23+
</Page>

‎components/SegmentedControl/samples/SegmentedControlStylesSample.xaml.cs‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the MIT license.
3+
// See the LICENSE file in the project root for more information.
4+
5+
namespace SegmentedControlExperiment.Samples;
6+
7+
/// <summary>
8+
/// An sample that shows how the Segmented control has multiple built-in styles.
9+
/// </summary>
10+
[ToolkitSampleMultiChoiceOption("SelectionMode", "Single", "Multiple", Title = "Selection mode")]
11+
12+
[ToolkitSample(id: nameof(SegmentedControlStylesSample), "Stylesl", description: "A sample for showing how to use the different built-in styles.")]
13+
public sealed partial class SegmentedControlStylesSample : Page
14+
{
15+
public SegmentedControlStylesSample()
16+
{
17+
this.InitializeComponent();
18+
}
19+
public static ListViewSelectionMode ConvertStringToSelectionMode(string selectionMode) => selectionMode switch
20+
{
21+
"Single" => ListViewSelectionMode.Single,
22+
"Multiple" => ListViewSelectionMode.Multiple,
23+
_ => throw new System.NotImplementedException(),
24+
};
25+
}

‎components/SegmentedControl/src/AdditionalAssemblyInfo.cs‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the MIT license.
3+
// See the LICENSE file in the project root for more information.
4+
5+
using System.Runtime.CompilerServices;
6+
7+
// These `InternalsVisibleTo` calls are intended to make it easier for
8+
// for any internal code to be testable in all the different test projects
9+
// used with the Labs infrastructure.
10+
[assembly: InternalsVisibleTo("SegmentedControl.Tests.Uwp")]
11+
[assembly: InternalsVisibleTo("SegmentedControl.Tests.WinAppSdk")]
12+
[assembly: InternalsVisibleTo("CommunityToolkit.Tests.Uwp")]
13+
[assembly: InternalsVisibleTo("CommunityToolkit.Tests.WinAppSdk")]

‎components/SegmentedControl/src/CommunityToolkit.Labs.WinUI.SegmentedControl.csproj‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<Project Sdk="MSBuild.Sdk.Extras/3.0.23">
2+
<PropertyGroup>
3+
<ToolkitComponentName>SegmentedControl</ToolkitComponentName>
4+
<PackageId>CommunityToolkit.Labs.$(PackageIdVariant).SegmentedControl</PackageId>
5+
<Description>This package contains SegmentedControl.</Description>
6+
<Version>0.0.1</Version>
7+
8+
<!-- Rns suffix is required for namespaces shared across projects. See https://github.com/CommunityToolkit/Labs-Windows/issues/152 -->
9+
<RootNamespace>CommunityToolkit.Labs.WinUI.SegmentedControlRns</RootNamespace>
10+
</PropertyGroup>
11+
12+
<!-- Sets this up as a toolkit component's source project -->
13+
<Import Project="$(RepositoryDirectory)common\ToolkitComponent.SourceProject.props" />
14+
</Project>

0 commit comments

Comments
 (0)