Orientation option for Segmented

components/Segmented/samples/SegmentedBasicSample.xaml

@@ -1,4 +1,4 @@
-<!--  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.  -->
+<!--  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"
@@ -14,6 +14,7 @@
         <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"
@@ -30,6 +31,7 @@
                    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=&#xE8BF;}"

components/Segmented/samples/SegmentedBasicSample.xaml.cs

@@ -11,6 +11,7 @@ namespace SegmentedExperiment.Samples;
 /// </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
@@ -36,5 +37,12 @@ public SegmentedBasicSample()
         "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(),
+    };
 }
 

components/Segmented/samples/SegmentedStylesSample.xaml

@@ -1,4 +1,4 @@
-<!--  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.  -->
+<!--  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"
@@ -19,7 +19,8 @@
                 Spacing="8">
         <TextBlock Style="{StaticResource BodyStrongTextBlockStyle}"
                    Text="PivotSegmentedStyle" />
-        <controls:Segmented SelectedIndex="1"
+        <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>
@@ -31,7 +32,8 @@
         <TextBlock Margin="0,24,0,0"
                    Style="{StaticResource BodyStrongTextBlockStyle}"
                    Text="ButtonSegmentedStyle" />
-        <controls:Segmented SelectedIndex="0"
+        <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"

components/Segmented/samples/SegmentedStylesSample.xaml.cs

@@ -8,6 +8,7 @@ namespace SegmentedExperiment.Samples;
 /// 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
@@ -22,4 +23,11 @@ public SegmentedStylesSample()
         "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(),
+    };
 }

components/Segmented/src/EqualPanel.cs

@@ -14,15 +14,6 @@ public partial class EqualPanel : Panel
     private double _maxItemWidth = 0;
     private double _maxItemHeight = 0;
     private int _visibleItemsCount = 0;
-
-    /// <summary>
-    /// Gets or sets the spacing between items.
-    /// </summary>
-    public double Spacing
-    {
-        get { return (double)GetValue(SpacingProperty); }
-        set { SetValue(SpacingProperty, value); }
-    }
 
     /// <summary>
     /// Identifies the Spacing dependency property.
@@ -32,14 +23,41 @@ public double Spacing
         nameof(Spacing),
         typeof(double),
         typeof(EqualPanel),
-        new PropertyMetadata(default(double), OnSpacingChanged));
+        new PropertyMetadata(default(double), OnEqualPanelPropertyChanged));
+
+    /// <summary>
+    /// Backing <see cref="DependencyProperty"/> for the <see cref="Orientation"/> property.
+    /// </summary>
+    public static readonly DependencyProperty OrientationProperty = DependencyProperty.Register(
+        nameof(Orientation),
+        typeof(Orientation),
+        typeof(EqualPanel),
+        new PropertyMetadata(default(Orientation), OnEqualPanelPropertyChanged));
+
+    /// <summary>
+    /// Gets or sets the spacing between items.
+    /// </summary>
+    public double Spacing
+    {
+        get => (double)GetValue(SpacingProperty);
+        set => SetValue(SpacingProperty, value);
+    }
+
+    /// <summary>
+    /// Gets or sets the panel orientation.
+    /// </summary>
+    public Orientation Orientation
+    {
+        get => (Orientation)GetValue(OrientationProperty);
+        set => SetValue(OrientationProperty, value);
+    }
 
     /// <summary>
     /// Creates a new instance of the <see cref="EqualPanel"/> class.
     /// </summary>
     public EqualPanel()
     {
-        RegisterPropertyChangedCallback(HorizontalAlignmentProperty, OnHorizontalAlignmentChanged);
+        RegisterPropertyChangedCallback(HorizontalAlignmentProperty, OnAlignmentChanged);
     }
 
     /// <inheritdoc/>
@@ -58,56 +76,113 @@ protected override Size MeasureOverride(Size availableSize)
             _maxItemHeight = Math.Max(_maxItemHeight, child.DesiredSize.Height);
         }
 
-        if (_visibleItemsCount > 0)
+        // No children, no space taken
+        if (_visibleItemsCount <= 0)
+            return new Size(0, 0);
+
+        // Determine if the desired alignment is stretched.
+        // Don't stretch if infinite space is available though. Attempting to divide infinite space will result in a crash.
+        bool stretch = Orientation switch
         {
-            // Return equal widths based on the widest item
-            // In very specific edge cases the AvailableWidth might be infinite resulting in a crash.
-            if (HorizontalAlignment != HorizontalAlignment.Stretch || double.IsInfinity(availableSize.Width))
-            {
-                return new Size((_maxItemWidth * _visibleItemsCount) + (Spacing * (_visibleItemsCount - 1)), _maxItemHeight);
-            }
-            else
-            {
-                // Equal columns based on the available width, adjust for spacing
-                double totalWidth = availableSize.Width - (Spacing * (_visibleItemsCount - 1));
-                _maxItemWidth = totalWidth / _visibleItemsCount;
-                return new Size(availableSize.Width, _maxItemHeight);
-            }
+            Orientation.Horizontal => HorizontalAlignment is HorizontalAlignment.Stretch && !double.IsInfinity(availableSize.Width),
+            Orientation.Vertical or _ => VerticalAlignment is VerticalAlignment.Stretch && !double.IsInfinity(availableSize.Height),
+        };
+
+        // Define XY coords
+        double xSize = 0, ySize = 0;
+
+        // Define UV coords for orientation agnostic XY manipulation
+        var uvSize = new UVCoord(ref xSize, ref ySize, Orientation);
+        var maxItemSize = new UVCoord(ref _maxItemWidth, ref _maxItemHeight, Orientation);
+        double availableU = Orientation is Orientation.Horizontal ? availableSize.Width : availableSize.Height;
+
+        if (stretch)
+        {
+            // Adjust maxItemU to form equal rows/columns by available U space (adjust for spacing)
+            double totalU = availableU - (Spacing * (_visibleItemsCount - 1));
+            maxItemSize.U = totalU / _visibleItemsCount;
+
+            // Set uSize/vSize for XY result construction
+            uvSize.U = availableU;
+            uvSize.V = maxItemSize.V;
         }
         else
         {
-            return new Size(0, 0);
+            uvSize.U = (maxItemSize.U * _visibleItemsCount) + (Spacing * (_visibleItemsCount - 1));
+            uvSize.V = maxItemSize.V;
         }
+
+        return new Size(xSize, ySize);
     }
 
     /// <inheritdoc/>
     protected override Size ArrangeOverride(Size finalSize)
     {
+        // Define X and Y
         double x = 0;
+        double y = 0;
 
+        // Define UV axis
+        var pos = new UVCoord(ref x, ref y, Orientation);
+        ref double maxItemU = ref _maxItemWidth;
+        double finalSizeU = finalSize.Width;
+        if (Orientation is Orientation.Vertical)
+        {
+            maxItemU = ref _maxItemHeight;
+            finalSizeU = finalSize.Height;
+        }
+
         // Check if there's more (little) width available - if so, set max item width to the maximum possible as we have an almost perfect height.
-        if (finalSize.Width > _visibleItemsCount * _maxItemWidth + (Spacing * (_visibleItemsCount - 1)))
+        if (finalSizeU > _visibleItemsCount * maxItemU + (Spacing * (_visibleItemsCount - 1)))
         {
-            _maxItemWidth = (finalSize.Width - (Spacing * (_visibleItemsCount - 1))) / _visibleItemsCount;
+            maxItemU = (finalSizeU - (Spacing * (_visibleItemsCount - 1))) / _visibleItemsCount;
         }
 
         var elements = Children.Where(static e => e.Visibility == Visibility.Visible);
         foreach (var child in elements)
         {
-            child.Arrange(new Rect(x, 0, _maxItemWidth, _maxItemHeight));
-            x += _maxItemWidth + Spacing;
+            // NOTE: The arrange method is still in X/Y coordinate system
+            child.Arrange(new Rect(x, y, _maxItemWidth, _maxItemHeight));
+            pos.U += maxItemU + Spacing;
         }
         return finalSize;
     }
 
-    private void OnHorizontalAlignmentChanged(DependencyObject sender, DependencyProperty dp)
+    private void OnAlignmentChanged(DependencyObject sender, DependencyProperty dp)
     {
         InvalidateMeasure();
     }
 
-    private static void OnSpacingChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+    private static void OnEqualPanelPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
     {
         var panel = (EqualPanel)d;
         panel.InvalidateMeasure();
     }
+
+    /// <summary>
+    /// A struct for mapping X/Y coordinates to an orientation adjusted U/V coordinate system.
+    /// </summary>
+    private readonly ref struct UVCoord
+    {
+        private readonly ref double _u;
+        private readonly ref double _v;
+
+        public UVCoord(ref double x, ref double y, Orientation orientation)
+        {
+            if (orientation is Orientation.Horizontal)
+            {
+                _u = ref x;
+                _v = ref y;
+            }
+            else
+            {
+                _u = ref y;
+                _v = ref x;
+            }
+        }
+
+        public readonly ref double U => ref _u;
+
+        public readonly ref double V => ref _v;
+    }
 }

components/Segmented/src/Segmented/Segmented.Properties.cs

@@ -0,0 +1,26 @@
+// 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 CommunityToolkit.WinUI.Controls;
+
+public partial class Segmented
+{
+    /// <summary>
+    /// The backing <see cref="DependencyProperty"/> for the <see cref="Orientation"/> property.
+    /// </summary>
+    public static readonly DependencyProperty OrientationProperty = DependencyProperty.Register(
+        nameof(Orientation),
+        typeof(Orientation),
+        typeof(Segmented),
+        new PropertyMetadata(Orientation.Horizontal, (d, e) => ((Segmented)d).OnOrientationChanged()));
+
+    /// <summary>
+    /// Gets or sets the orientation.
+    /// </summary>
+    public Orientation Orientation
+    {
+        get => (Orientation)GetValue(OrientationProperty);
+        set => SetValue(OrientationProperty, value);
+    }
+}

components/Segmented/src/Segmented/Segmented.cs

@@ -22,6 +22,7 @@ public Segmented()
         this.DefaultStyleKey = typeof(Segmented);
 
         RegisterPropertyChangedCallback(SelectedIndexProperty, OnSelectedIndexChanged);
+        RegisterPropertyChangedCallback(OrientationProperty, OnSelectedIndexChanged);
     }
 
     /// <inheritdoc/>
@@ -154,4 +155,15 @@ private void OnSelectedIndexChanged(DependencyObject sender, DependencyProperty
             _internalSelectedIndex = SelectedIndex;
         }
     }
+
+    private void OnOrientationChanged()
+    {
+        for (int i = 0; i < Items.Count; i++)
+        {
+            if (ContainerFromIndex(i) is SegmentedItem item)
+            {
+                item.UpdateOrientation(Orientation);
+            }
+        }
+    }
 }

components/Segmented/src/Segmented/Segmented.xaml

@@ -1,4 +1,4 @@
-<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     xmlns:local="using:CommunityToolkit.WinUI.Controls"
                     xmlns:tk="using:CommunityToolkit.WinUI"
@@ -48,6 +48,7 @@
             <Setter Property="HorizontalAlignment" Value="Left" />
             <Setter Property="VerticalAlignment" Value="Center" />
             <Setter Property="SelectionMode" Value="Single" />
+            <Setter Property="Orientation" Value="Horizontal" />
             <Setter Property="IsItemClickEnabled" Value="False" />
             <win:Setter Property="SingleSelectionFollowsFocus"
                         Value="False" />
@@ -58,6 +59,7 @@
                     <ItemsPanelTemplate>
                         <local:EqualPanel HorizontalAlignment="{Binding (tk:FrameworkElementExtensions.Ancestor).HorizontalAlignment, RelativeSource={RelativeSource Self}}"
                                           tk:FrameworkElementExtensions.AncestorType="local:Segmented"
+                                          Orientation="{Binding (tk:FrameworkElementExtensions.Ancestor).Orientation, RelativeSource={RelativeSource Self}}"
                                           Spacing="{ThemeResource SegmentedItemSpacing}" />
                     </ItemsPanelTemplate>
                 </Setter.Value>
@@ -91,7 +93,8 @@
             <Setter Property="ItemsPanel">
                 <Setter.Value>
                     <ItemsPanelTemplate>
-                        <StackPanel Orientation="Horizontal"
+                        <StackPanel tk:FrameworkElementExtensions.AncestorType="local:Segmented"
+                                    Orientation="{Binding (tk:FrameworkElementExtensions.Ancestor).Orientation, RelativeSource={RelativeSource Self}}"
                                     Spacing="{ThemeResource SegmentedItemSpacing}" />
                     </ItemsPanelTemplate>
                 </Setter.Value>
@@ -111,7 +114,8 @@
             <Setter Property="ItemsPanel">
                 <Setter.Value>
                     <ItemsPanelTemplate>
-                        <StackPanel Orientation="Horizontal"
+                        <StackPanel tk:FrameworkElementExtensions.AncestorType="local:Segmented"
+                                    Orientation="{Binding (tk:FrameworkElementExtensions.Ancestor).Orientation, RelativeSource={RelativeSource Self}}"
                                     Spacing="{ThemeResource ButtonItemSpacing}" />
                     </ItemsPanelTemplate>
                 </Setter.Value>