Update example

CommunityToolkit · Mar 25, 2024 · 38babd0 · 38babd0
1 parent 943fa92
commit 38babd0
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 9 deletions.
diff --git a/components/Primitives/samples/StaggeredLayoutSample.xaml b/components/Primitives/samples/StaggeredLayoutSample.xaml
@@ -9,21 +9,20 @@
       xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
       mc:Ignorable="d">
     <Page.Resources>
-        <DataTemplate x:Key="StaggeredTemplate">
+        <DataTemplate x:Key="StaggeredTemplate" x:DataType="local:ColorItem">
             <Grid Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                   BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                   BorderThickness="1"
                   CornerRadius="{StaticResource ControlCornerRadius}">
-                <Border Width="{Binding Width}"
-                        Height="{Binding Height}"
+                <Border Height="{x:Bind Height}"
                         Margin="4"
                         CornerRadius="{StaticResource ControlCornerRadius}">
                     <Border.Background>
-                        <SolidColorBrush Color="{Binding Color}" />
+                        <SolidColorBrush Color="{x:Bind Color}" />
                     </Border.Background>
                     <TextBlock Margin="6,4,4,4"
                                FontSize="16"
-                               Text="{Binding Index}" />
+                               Text="{x:Bind Index}" />
                 </Border>
             </Grid>
 
@@ -36,6 +35,7 @@
                                 ItemsSource="{x:Bind ColorsCollection, Mode=OneWay}">
                 <muxc:ItemsRepeater.Layout>
                     <controls:StaggeredLayout ColumnSpacing="{x:Bind ColumnSpacing, Mode=OneWay}"
+                                              ItemsStretch="{x:Bind local:StaggeredLayoutSample.ConvertStringToStaggeredLayoutItemsStretch(ItemsStretchProperty), Mode=OneWay}"
                                               DesiredColumnWidth="{x:Bind DesiredColumnWidth, Mode=OneWay}"
                                               RowSpacing="{x:Bind RowSpacing, Mode=OneWay}" />
                 </muxc:ItemsRepeater.Layout>

diff --git a/components/Primitives/samples/StaggeredLayoutSample.xaml.cs b/components/Primitives/samples/StaggeredLayoutSample.xaml.cs
@@ -10,8 +10,9 @@ namespace PrimitivesExperiment.Samples;
 [ToolkitSampleNumericOption("DesiredColumnWidth", initial: 250, min: 50, max: 400, step: 1, Title = "DesiredColumnWidth")]
 [ToolkitSampleNumericOption("ColumnSpacing", initial: 5, min: 0, max: 50, step: 1, Title = "ColumnSpacing")]
 [ToolkitSampleNumericOption("RowSpacing", initial: 5, min: 0, max: 50, step: 1, Title = "RowSpacing")]
+[ToolkitSampleMultiChoiceOption("ItemsStretchProperty", "None", "Fill", Title = "ItemsStretch")]
 
-[ToolkitSample(id: nameof(StaggeredLayoutSample), "StaggeredPanel", description: $"A sample for showing how to create and use a {nameof(StaggeredLayout)}.")]
+[ToolkitSample(id: nameof(StaggeredLayoutSample), "StaggeredLayout", description: $"A sample for showing how to create and use a {nameof(StaggeredLayout)}.")]
 public sealed partial class StaggeredLayoutSample : Page
 {
     public ObservableCollection<ColorItem> ColorsCollection = new();
@@ -24,18 +25,23 @@ public StaggeredLayoutSample()
         random = new Random(DateTime.Now.Millisecond);
         for (int i = 0; i < random.Next(100, 200); i++)
         {
-            var item = new ColorItem { Index = i, Width = random.Next(50, 250), Height = random.Next(50, 250), Color = Color.FromArgb(255, (byte)random.Next(0, 255), (byte)random.Next(0, 255), (byte)random.Next(0, 255)) };
+            var item = new ColorItem { Index = i, Height = random.Next(50, 250), Color = Color.FromArgb(255, (byte)random.Next(0, 255), (byte)random.Next(0, 255), (byte)random.Next(0, 255)) };
             ColorsCollection.Add(item);
         }
     }
+
+    public static StaggeredLayoutItemsStretch ConvertStringToStaggeredLayoutItemsStretch(string itemStretch) => itemStretch switch
+    {
+        "None" => StaggeredLayoutItemsStretch.None,
+        "Fill" => StaggeredLayoutItemsStretch.Fill,
+        _ => throw new System.NotImplementedException(),
+    };
 }
 
 public class ColorItem
 {
     public int Index { get; internal set; }
 
-    public int Width { get; internal set; }
-
     public int Height { get; internal set; }
 
     public Color Color { get; internal set; }