From a42b42105c3b9eedfc1102f8498a195df0a63fc1 Mon Sep 17 00:00:00 2001
From: Poker <poker_sang@outlook.com>
Date: Thu, 21 Mar 2024 16:26:57 +0800
Subject: [PATCH] Fix wrong property

---
 .../Primitives/samples/StaggeredLayoutSample.xaml.cs  |  2 ++
 .../Primitives/samples/StaggeredPanelSample.xaml      | 11 +++++------
 .../Primitives/samples/StaggeredPanelSample.xaml.cs   |  2 +-
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/components/Primitives/samples/StaggeredLayoutSample.xaml.cs b/components/Primitives/samples/StaggeredLayoutSample.xaml.cs
index f0152c0f..c9580548 100644
--- a/components/Primitives/samples/StaggeredLayoutSample.xaml.cs
+++ b/components/Primitives/samples/StaggeredLayoutSample.xaml.cs
@@ -42,6 +42,8 @@ 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; }
diff --git a/components/Primitives/samples/StaggeredPanelSample.xaml b/components/Primitives/samples/StaggeredPanelSample.xaml
index 40eba9cd..66add5b1 100644
--- a/components/Primitives/samples/StaggeredPanelSample.xaml
+++ b/components/Primitives/samples/StaggeredPanelSample.xaml
@@ -10,24 +10,23 @@
       x:Name="ThisSamplePage">
 
     <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 Width="{x:Bind Width}"
+                        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>
-
         </DataTemplate>
     </Page.Resources>
 
diff --git a/components/Primitives/samples/StaggeredPanelSample.xaml.cs b/components/Primitives/samples/StaggeredPanelSample.xaml.cs
index fdbcdd47..dab37fb0 100644
--- a/components/Primitives/samples/StaggeredPanelSample.xaml.cs
+++ b/components/Primitives/samples/StaggeredPanelSample.xaml.cs
@@ -11,7 +11,7 @@ namespace PrimitivesExperiment.Samples;
 [ToolkitSampleNumericOption("ColumnSpacing", initial: 5, min: 0, max: 50, step: 1, Title = "ColumnSpacing")]
 [ToolkitSampleNumericOption("RowSpacing", initial: 5, min: 0, max: 50, step: 1, Title = "RowSpacing")]
 
-[ToolkitSample(id: nameof(StaggeredPanelSample), "WrapPanel", description: $"A sample for showing how to create and use a {nameof(StaggeredPanel)}.")]
+[ToolkitSample(id: nameof(StaggeredPanelSample), "StaggeredPanel", description: $"A sample for showing how to create and use a {nameof(StaggeredPanel)}.")]
 public sealed partial class StaggeredPanelSample : Page
 {
     public ObservableCollection<ColorItem> ColorsCollection = new();