Skip to content

Commit ce74acf

Browse files
ArlodotexeArlodotexe
authored
Merge pull request #374 from CommunityToolkit/niels9001/segmented-hc
[SegmentedControl] Adding AutoSelection and high contrast improvements
2 parents 2e2f317 + 5fe4f06 commit ce74acf

File tree

11 files changed

+881
-328
lines changed

11 files changed

+881
-328
lines changed

‎components/SegmentedControl/samples/SegmentedControl.md‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,12 @@ dev_langs:
88
category: Controls
99
subcategory: Layout
1010
discussion-id: 314
11-
issue-id: 0
11+
issue-id: 392
1212
---
1313

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-
2214
# Segmented control
2315

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.
16+
The `Segmented` control is a control to be used for configuring a view or setting.
2517

2618

2719
## The basics
@@ -30,8 +22,11 @@ The `Segmented` control is best used with 2-5 items and does not support overflo
3022

3123
> [!Sample SegmentedControlBasicSample]
3224
25+
## Selection
26+
`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`.
27+
3328
## Other styles
3429

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.
30+
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.
3631

3732
> [!SAMPLE SegmentedControlStylesSample]

‎components/SegmentedControl/samples/SegmentedControlBasicSample.xaml‎

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
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. -->
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. -->
22
<Page x:Class="SegmentedControlExperiment.Samples.SegmentedControlBasicSample"
33
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
44
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
@@ -11,19 +11,37 @@
1111
<StackPanel x:Name="Panel"
1212
Spacing="8">
1313
<TextBlock Style="{StaticResource BodyStrongTextBlockStyle}"
14-
Text="Icon + label" />
14+
Text="Icon + content" />
1515
<labs:Segmented HorizontalAlignment="{x:Bind local:SegmentedControlBasicSample.ConvertStringToHorizontalAlignment(Alignment), Mode=OneWay}"
16+
SelectedIndex="0"
1617
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>
18+
<labs:SegmentedItem Content="Item 1">
19+
<labs:SegmentedItem.Icon>
20+
<FontIcon Glyph="&#xEA3A;" />
21+
</labs:SegmentedItem.Icon>
22+
</labs:SegmentedItem>
23+
<labs:SegmentedItem Content="Item 2">
24+
<labs:SegmentedItem.Icon>
25+
<FontIcon Glyph="&#xEA3A;" />
26+
</labs:SegmentedItem.Icon>
27+
</labs:SegmentedItem>
28+
<labs:SegmentedItem Content="Item 3 with a long label">
29+
<labs:SegmentedItem.Icon>
30+
<FontIcon Glyph="&#xEA3A;" />
31+
</labs:SegmentedItem.Icon>
32+
</labs:SegmentedItem>
33+
<labs:SegmentedItem Content="Item 4">
34+
<labs:SegmentedItem.Icon>
35+
<FontIcon Glyph="&#xEA3A;" />
36+
</labs:SegmentedItem.Icon>
37+
</labs:SegmentedItem>
2138
</labs:Segmented>
2239

2340
<TextBlock Margin="0,24,0,0"
2441
Style="{StaticResource BodyStrongTextBlockStyle}"
2542
Text="Icon only" />
2643
<labs:Segmented HorizontalAlignment="{x:Bind local:SegmentedControlBasicSample.ConvertStringToHorizontalAlignment(Alignment), Mode=OneWay}"
44+
SelectedIndex="2"
2745
SelectionMode="{x:Bind local:SegmentedControlBasicSample.ConvertStringToSelectionMode(SelectionMode), Mode=OneWay}">
2846
<labs:SegmentedItem ToolTipService.ToolTip="Day view">
2947
<labs:SegmentedItem.Icon>

‎components/SegmentedControl/samples/SegmentedControlStylesSample.xaml‎

Lines changed: 41 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,55 @@
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. -->
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. -->
22
<Page x:Class="SegmentedControlExperiment.Samples.SegmentedControlStylesSample"
33
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
44
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
55
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
66
xmlns:labs="using:CommunityToolkit.Labs.WinUI"
7+
xmlns:local="using:SegmentedControlExperiment.Samples"
78
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
89
mc:Ignorable="d">
9-
10-
<!--<StackPanel Spacing="8">
10+
<Page.Resources>
11+
<ResourceDictionary>
12+
<ResourceDictionary.MergedDictionaries>
13+
<ResourceDictionary Source="ms-appx:///CommunityToolkit.Labs.WinUI.SegmentedControl/Segmented/Segmented.xaml" />
14+
</ResourceDictionary.MergedDictionaries>
15+
</ResourceDictionary>
16+
</Page.Resources>
17+
<StackPanel Spacing="8">
1118
<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-
<!--
19+
Text="PivotSegmentedStyle" />
20+
<labs:Segmented SelectedIndex="1"
21+
SelectionMode="{x:Bind local:SegmentedControlStylesSample.ConvertStringToSelectionMode(SelectionMode), Mode=OneWay}"
22+
Style="{StaticResource PivotSegmentedStyle}">
1723
<labs:SegmentedItem>Item 1</labs:SegmentedItem>
1824
<labs:SegmentedItem>Item 2</labs:SegmentedItem>
1925
<labs:SegmentedItem>Item with long label</labs:SegmentedItem>
2026
<labs:SegmentedItem>Item 4</labs:SegmentedItem>
2127
</labs:Segmented>
22-
</StackPanel>-->
28+
29+
<TextBlock Margin="0,24,0,0"
30+
Style="{StaticResource BodyStrongTextBlockStyle}"
31+
Text="ButtonSegmentedStyle" />
32+
<labs:Segmented SelectedIndex="0"
33+
SelectionMode="{x:Bind local:SegmentedControlStylesSample.ConvertStringToSelectionMode(SelectionMode), Mode=OneWay}"
34+
Style="{StaticResource ButtonSegmentedStyle}">
35+
<labs:SegmentedItem Content="Day"
36+
ToolTipService.ToolTip="Day view">
37+
<labs:SegmentedItem.Icon>
38+
<FontIcon Glyph="&#xE161;" />
39+
</labs:SegmentedItem.Icon>
40+
</labs:SegmentedItem>
41+
<labs:SegmentedItem Content="Week"
42+
ToolTipService.ToolTip="Week view">
43+
<labs:SegmentedItem.Icon>
44+
<FontIcon Glyph="&#xE162;" />
45+
</labs:SegmentedItem.Icon>
46+
</labs:SegmentedItem>
47+
<labs:SegmentedItem Content="Month"
48+
ToolTipService.ToolTip="Month view">
49+
<labs:SegmentedItem.Icon>
50+
<FontIcon Glyph="&#xE163;" />
51+
</labs:SegmentedItem.Icon>
52+
</labs:SegmentedItem>
53+
</labs:Segmented>
54+
</StackPanel>
2355
</Page>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ namespace SegmentedControlExperiment.Samples;
99
/// </summary>
1010
[ToolkitSampleMultiChoiceOption("SelectionMode", "Single", "Multiple", Title = "Selection mode")]
1111

12-
[ToolkitSample(id: nameof(SegmentedControlStylesSample), "Stylesl", description: "A sample for showing how to use the different built-in styles.")]
12+
[ToolkitSample(id: nameof(SegmentedControlStylesSample), "Additional styles", description: "A sample on how to use different built-in styles.")]
1313
public sealed partial class SegmentedControlStylesSample : Page
1414
{
1515
public SegmentedControlStylesSample()

‎components/SegmentedControl/src/EqualPanel.cs‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,9 @@ public double Spacing
2525
typeof(EqualPanel),
2626
new PropertyMetadata(default(double), OnSpacingChanged));
2727

28-
29-
3028
public EqualPanel()
3129
{
32-
RegisterPropertyChangedCallback(Panel.HorizontalAlignmentProperty, OnHorizontalAlignmentChanged);
30+
RegisterPropertyChangedCallback(HorizontalAlignmentProperty, OnHorizontalAlignmentChanged);
3331
}
3432

3533
protected override Size MeasureOverride(Size availableSize)
@@ -60,7 +58,6 @@ protected override Size MeasureOverride(Size availableSize)
6058

6159
protected override Size ArrangeOverride(Size finalSize)
6260
{
63-
System.Diagnostics.Debug.WriteLine("ArrangeOverride - " + HorizontalAlignment);
6461
var x = 0.0;
6562
foreach (var child in Children)
6663
{

‎components/SegmentedControl/src/Helpers/SegmentedMarginConverter.cs‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
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 CommunityToolkit.Labs.WinUI;
6+
public partial class SegmentedMarginConverter : DependencyObject, IValueConverter
7+
{
8+
/// <summary>
9+
/// Identifies the <see cref="LeftItemMargin"/> property.
10+
/// </summary>
11+
public static readonly DependencyProperty LeftItemMarginProperty =
12+
DependencyProperty.Register(nameof(LeftItemMargin), typeof(Thickness), typeof(SegmentedMarginConverter), new PropertyMetadata(null));
13+
14+
/// <summary>
15+
/// Gets or sets the margin of the first item
16+
/// </summary>
17+
public Thickness LeftItemMargin
18+
{
19+
get { return (Thickness)GetValue(LeftItemMarginProperty); }
20+
set { SetValue(LeftItemMarginProperty, value); }
21+
}
22+
23+
/// <summary>
24+
/// Identifies the <see cref="MiddleItemMargin"/> property.
25+
/// </summary>
26+
public static readonly DependencyProperty MiddleItemMarginProperty =
27+
DependencyProperty.Register(nameof(MiddleItemMargin), typeof(Thickness), typeof(SegmentedMarginConverter), new PropertyMetadata(null));
28+
29+
/// <summary>
30+
/// Gets or sets the margin of any middle item
31+
/// </summary>
32+
public Thickness MiddleItemMargin
33+
{
34+
get { return (Thickness)GetValue(MiddleItemMarginProperty); }
35+
set { SetValue(MiddleItemMarginProperty, value); }
36+
}
37+
38+
/// <summary>
39+
/// Identifies the <see cref="RightItemMargin"/> property.
40+
/// </summary>
41+
public static readonly DependencyProperty RightItemMarginProperty =
42+
DependencyProperty.Register(nameof(RightItemMargin), typeof(Thickness), typeof(SegmentedMarginConverter), new PropertyMetadata(null));
43+
44+
/// <summary>
45+
/// Gets or sets the margin of the last item
46+
/// </summary>
47+
public Thickness RightItemMargin
48+
{
49+
get { return (Thickness)GetValue(RightItemMarginProperty); }
50+
set { SetValue(RightItemMarginProperty, value); }
51+
}
52+
53+
public object Convert(object value, Type targetType, object parameter, string language)
54+
{
55+
var segmentedItem = value as SegmentedItem;
56+
var listView = ItemsControl.ItemsControlFromItemContainer(segmentedItem);
57+
58+
int index = listView.IndexFromContainer(segmentedItem);
59+
60+
if (index == 0)
61+
{
62+
return LeftItemMargin;
63+
}
64+
else if (index == listView.Items.Count - 1)
65+
{
66+
return RightItemMargin;
67+
}
68+
else
69+
{
70+
return MiddleItemMargin;
71+
}
72+
}
73+
74+
public object ConvertBack(object value, Type targetType, object parameter, string language)
75+
{
76+
return value;
77+
}
78+
}

0 commit comments

Comments
 (0)