Add LayoutTransformer Sample

ghost1372 · Jan 9, 2025 · 3c480b1 · 3c480b1
1 parent 0cdd6e0
commit 3c480b1
Show file tree

Hide file tree

Showing 8 changed files with 77 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -150,6 +150,7 @@ Install-Package DevWinUI
 ## 🔥 DevWinUI.Controls 🔥
 ### ⚡ What’s Inside? ⚡
 
+- ✨ StepBar
 - ✨ GoToTop
 - ✨ FlexPanel
 - ✨ HoneycombPanel
@@ -261,6 +262,12 @@ Install-Package DevWinUI.ContextMenu
 
 ## 🕰️ History 🕰️
 
+### StepBar
+![DevWinUI](https://raw.githubusercontent.com/ghost1372/DevWinUI-Resources/refs/heads/main/DevWinUI-Docs/StepBar.gif)
+
+### LayoutTransformer
+![DevWinUI](https://raw.githubusercontent.com/ghost1372/DevWinUI-Resources/refs/heads/main/DevWinUI-Docs/LayoutTransformer.gif)
+
 ### GoToTop
 ![DevWinUI](https://raw.githubusercontent.com/ghost1372/DevWinUI-Resources/refs/heads/main/DevWinUI-Docs/GoToTop.gif)
 

diff --git a/dev/DevWinUI.Controls/Themes/Generic.xaml b/dev/DevWinUI.Controls/Themes/Generic.xaml
@@ -1693,6 +1693,12 @@ Themes\Styles\Win2D\Watermark.xaml
       <ItemsPresenter />
     </Grid>
   </ControlTemplate>
+  <ItemsPanelTemplate x:Key="StepBarHorizontalItemsPanelTemplate">
+    <local:UniformGrid Rows="1" />
+  </ItemsPanelTemplate>
+  <ItemsPanelTemplate x:Key="StepBarVerticalItemsPanelTemplate">
+    <local:UniformGrid Columns="1" />
+  </ItemsPanelTemplate>
   <Storyboard x:Key="Right2LeftTransition">
     <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" From="50" To="0" Duration="0:0:0.4">
       <DoubleAnimation.EasingFunction>
@@ -5806,7 +5812,7 @@ Themes\Styles\Win2D\Watermark.xaml
             <Border x:Name="PART_Border" Height="40" MinWidth="40" HorizontalAlignment="Center" Background="{ThemeResource ControlSolidFillColorDefaultBrush}" BorderBrush="{ThemeResource StepBarItemInActiveBorderBrush}" BorderThickness="2" CornerRadius="90">
               <TextBlock x:Name="PART_Number" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="{ThemeResource TextFillColorPrimaryBrush}" Style="{StaticResource BaseTextBlockStyle}" Text="{Binding Index, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
             </Border>
-            <ContentPresenter x:Name="PART_Content" Margin="0,5,0,0" HorizontalAlignment="Center" Foreground="{ThemeResource TextFillColorPrimaryBrush}" />
+            <ContentPresenter x:Name="PART_Content" Margin="0,5,0,0" HorizontalAlignment="Center" ContentTemplate="{Binding ItemTemplate, RelativeSource={RelativeSource Mode=TemplatedParent}}" Foreground="{ThemeResource TextFillColorPrimaryBrush}" />
           </StackPanel>
         </ControlTemplate>
       </Setter.Value>
@@ -5894,7 +5900,7 @@ Themes\Styles\Win2D\Watermark.xaml
             <Border x:Name="PART_Border" Height="40" MinWidth="40" Background="{ThemeResource ControlSolidFillColorDefaultBrush}" BorderBrush="{ThemeResource StepBarItemInActiveBorderBrush}" BorderThickness="2" CornerRadius="90">
               <TextBlock x:Name="PART_Number" HorizontalAlignment="Center" VerticalAlignment="Center" FlowDirection="LeftToRight" Foreground="{ThemeResource TextFillColorPrimaryBrush}" Style="{StaticResource BaseTextBlockStyle}" Text="{Binding Index, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
             </Border>
-            <ContentPresenter x:Name="PART_Content" Margin="5,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center" Foreground="{ThemeResource TextFillColorPrimaryBrush}" />
+            <ContentPresenter x:Name="PART_Content" Margin="5,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center" ContentTemplate="{Binding ItemTemplate, RelativeSource={RelativeSource Mode=TemplatedParent}}" Foreground="{ThemeResource TextFillColorPrimaryBrush}" />
           </StackPanel>
         </ControlTemplate>
       </Setter.Value>
@@ -6992,6 +6998,7 @@ Themes\Styles\Win2D\Watermark.xaml
     <Setter Property="Padding" Value="10" />
     <Setter Property="ItemContainerStyle" Value="{StaticResource StepBarItemHorizontalStyle}" />
     <Setter Property="Template" Value="{StaticResource StepBarHorizontalControlTemplate}" />
+    <Setter Property="ItemsPanel" Value="{StaticResource StepBarHorizontalItemsPanelTemplate}" />
   </Style>
   <Style BasedOn="{StaticResource DefaultDevWinUITextBoxStyle}" TargetType="local:TextBox" />
   <Style BasedOn="{StaticResource DefaultSettingsCardStyle}" TargetType="local:SettingsCard" />

diff --git a/dev/DevWinUI.Gallery/Assets/Fluent/RepeatButton.png b/dev/DevWinUI.Gallery/Assets/Fluent/RepeatButton.png
diff --git a/dev/DevWinUI.Gallery/Assets/NavViewMenu/AppData.json b/dev/DevWinUI.Gallery/Assets/NavViewMenu/AppData.json
@@ -108,6 +108,13 @@
           "IsNew": true,
           "ImagePath": "ms-appx:///Assets/Fluent/NumberBox.png"
         },
+        {
+          "UniqueId": "DevWinUIGallery.Views.LayoutTransformerPage",
+          "Title": "LayoutTransformer",
+          "Subtitle": "Represents a control that applies a layout transformation to its Content.",
+          "IsNew": true,
+          "ImagePath": "ms-appx:///Assets/Fluent/RepeatButton.png"
+        },
         {
           "UniqueId": "DevWinUIGallery.Views.GoToTopPage",
           "Title": "GoToTop",

diff --git a/dev/DevWinUI.Gallery/ControlPagesSampleCode/Features/LayoutTransformer_xaml.txt b/dev/DevWinUI.Gallery/ControlPagesSampleCode/Features/LayoutTransformer_xaml.txt
@@ -0,0 +1,6 @@
+<dev:LayoutTransformer>
+    <Rectangle Width="200" Height="100" Fill="{ThemeResource SystemFillColorCriticalBrush}" RenderTransformOrigin="0.5,0.5" />
+    <dev:LayoutTransformer.RenderTransform>
+        <RotateTransform Angle="90" />
+    </dev:LayoutTransformer.RenderTransform>
+</dev:LayoutTransformer>
diff --git a/dev/DevWinUI.Gallery/T4Templates/NavigationPageMappings.cs b/dev/DevWinUI.Gallery/T4Templates/NavigationPageMappings.cs
@@ -27,6 +27,7 @@ public partial class NavigationPageMappings
         {"DevWinUIGallery.Views.BubblePage", typeof(DevWinUIGallery.Views.BubblePage)},
         {"DevWinUIGallery.Views.GooeyPage", typeof(DevWinUIGallery.Views.GooeyPage)},
         {"DevWinUIGallery.Views.StepBarPage", typeof(DevWinUIGallery.Views.StepBarPage)},
+        {"DevWinUIGallery.Views.LayoutTransformerPage", typeof(DevWinUIGallery.Views.LayoutTransformerPage)},
         {"DevWinUIGallery.Views.GoToTopPage", typeof(DevWinUIGallery.Views.GoToTopPage)},
         {"DevWinUIGallery.Views.FlexPanelPage", typeof(DevWinUIGallery.Views.FlexPanelPage)},
         {"DevWinUIGallery.Views.HoneycombPanelPage", typeof(DevWinUIGallery.Views.HoneycombPanelPage)},

diff --git a/dev/DevWinUI.Gallery/Views/Pages/Features/LayoutTransformerPage.xaml b/dev/DevWinUI.Gallery/Views/Pages/Features/LayoutTransformerPage.xaml
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<Page x:Class="DevWinUIGallery.Views.LayoutTransformerPage"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:dev="using:DevWinUI"
+      xmlns:local="using:DevWinUIGallery"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      mc:Ignorable="d">
+
+    <ScrollViewer>
+        <StackPanel Margin="10"
+                    dev:PanelAttach.ChildrenTransitions="Default"
+                    Spacing="10">
+            <local:ControlExample DocPage="controls/layoutTransformer"
+                                  XamlSource="Features/LayoutTransformer_xaml.txt">
+                <local:ControlExample.Pane>
+                    <StackPanel Spacing="10">
+                        <Slider x:Name="SliderSample"
+                                Maximum="360"
+                                Minimum="-360"
+                                Value="0" />
+                    </StackPanel>
+                </local:ControlExample.Pane>
+                <dev:LayoutTransformer x:Name="LayoutTransformerSample"
+                                       Height="300"
+                                       RenderTransformOrigin="0.5,0.5">
+                    <Rectangle Width="200"
+                               Height="100"
+                               Fill="{ThemeResource SystemFillColorCriticalBrush}" />
+                    <dev:LayoutTransformer.RenderTransform>
+                        <CompositeTransform Rotation="{x:Bind SliderSample.Value, Mode=OneWay}" />
+                    </dev:LayoutTransformer.RenderTransform>
+                </dev:LayoutTransformer>
+            </local:ControlExample>
+        </StackPanel>
+    </ScrollViewer>
+</Page>
diff --git a/dev/DevWinUI.Gallery/Views/Pages/Features/LayoutTransformerPage.xaml.cs b/dev/DevWinUI.Gallery/Views/Pages/Features/LayoutTransformerPage.xaml.cs
@@ -0,0 +1,9 @@
+namespace DevWinUIGallery.Views;
+
+public sealed partial class LayoutTransformerPage : Page
+{
+    public LayoutTransformerPage()
+    {
+        this.InitializeComponent();
+    }
+}