From 3ccb8b64897506a8f13c29b1909412a79d3e04a6 Mon Sep 17 00:00:00 2001
From: Andreas Schauerte <a.schauerte@swiftconsult.de>
Date: Thu, 27 Jan 2022 10:43:13 +0100
Subject: [PATCH] Simplify sample view.

---
 .../RenderDemo/Pages/Transform3DPage.axaml    | 375 +++++++++---------
 .../ViewModels/Transform3DPageViewModel.cs    |   6 -
 2 files changed, 187 insertions(+), 194 deletions(-)

diff --git a/samples/RenderDemo/Pages/Transform3DPage.axaml b/samples/RenderDemo/Pages/Transform3DPage.axaml
index c8718f8495..fa03c7ba49 100644
--- a/samples/RenderDemo/Pages/Transform3DPage.axaml
+++ b/samples/RenderDemo/Pages/Transform3DPage.axaml
@@ -11,211 +11,210 @@
                     <Grid RowDefinitions="*,*" ColumnDefinitions="*,*" Margin="5">
                         <TextBlock>I'm a text</TextBlock>
                         <Button Grid.Row="0" Grid.Column="1" Content="A Button"></Button>
-                        <Slider Grid.Row="1" 
-                                Grid.Column="0" 
-                                Grid.ColumnSpan="2" 
+                        <Slider Grid.Row="1"
+                                Grid.Column="0"
+                                Grid.ColumnSpan="2"
                                 Value="{Binding Depth}"
                                 Minimum="100"
                                 Maximum="300" />
                     </Grid>
                 </Template>
             </Styles.Resources>
+        </Styles>
+    </UserControl.Styles>
+
+    <Grid ColumnDefinitions="Auto,*,Auto,*" RowDefinitions="*, Auto, Auto, Auto, Auto, Auto, Auto, Auto">
+        <Grid.Clock>
+            <Clock />
+        </Grid.Clock>
+        <Grid.Styles>
             <Style Selector="Border.Test">
                 <Setter Property="Width" Value="200" />
                 <Setter Property="Height" Value="200" />
                 <Setter Property="Child" Value="{StaticResource TestContent}" />
                 <Setter Property="BorderThickness" Value="2" />
                 <Setter Property="BorderBrush" Value="Black" />
+                <Setter Property="Grid.ColumnSpan" Value="2" />
             </Style>
-            <Style Selector="Border.Rect1 TextBlock, Border.Rect2 TextBlock, Border.Rect3 TextBlock">
+            <Style Selector="TextBlock, Label, Slider">
+                <Setter Property="VerticalAlignment" Value="Center" />
+                <Setter Property="Margin" Value="10,0,10,0" />
+            </Style>
+            <Style Selector="Border TextBlock">
                 <Setter Property="Foreground" Value="White" />
             </Style>
-            <Style Selector="Border.Test Button">
+            <Style Selector="Border Button">
                 <Setter Property="Background" Value="White"></Setter>
                 <Setter Property="Foreground" Value="Black" />
             </Style>
-            <Style Selector="Border.Rect1">
-                <Style.Animations>
-                    <Animation Duration="0:0:10"
-                               IterationCount="Infinite">
-                        <KeyFrame Cue="0%">
-                            <Setter Property="Rotate3DTransform.AngleX" Value="0" />
-                            <Setter Property="ZIndex" Value="4" />
-                        </KeyFrame>
-                        <KeyFrame Cue="25%">
-                            <Setter Property="Rotate3DTransform.AngleX" Value="90" />
-                            <Setter Property="ZIndex" Value="1" />
-                        </KeyFrame>
-                        <KeyFrame Cue="100%">
-                            <Setter Property="Rotate3DTransform.AngleX" Value="360" />
-                            <Setter Property="ZIndex" Value="4" />
-                        </KeyFrame>
-                    </Animation>
-                </Style.Animations>
-                <Setter Property="Background" Value="DarkRed" />
-            </Style>
-            <Style Selector="Border.Rect2">
-                <Style.Animations>
-                    <Animation Duration="0:0:10"
-                               IterationCount="Infinite">
-                        <KeyFrame Cue="0%">
-                            <Setter Property="Rotate3DTransform.AngleX" Value="90" />
-                            <Setter Property="ZIndex" Value="1" />
-                        </KeyFrame>
-                        <KeyFrame Cue="25%">
-                            <Setter Property="Rotate3DTransform.AngleX" Value="180" />
-                            <Setter Property="ZIndex" Value="1" />
-                        </KeyFrame>
-                        <KeyFrame Cue="75%">
-                            <Setter Property="Rotate3DTransform.AngleX" Value="360" />
-                            <Setter Property="ZIndex" Value="4" />
-                        </KeyFrame>
-                        <KeyFrame Cue="100%">
-                            <Setter Property="Rotate3DTransform.AngleX" Value="450" />
-                            <Setter Property="ZIndex" Value="1" />
-                        </KeyFrame>
-                    </Animation>
-                </Style.Animations>
-                <Setter Property="Background" Value="DarkGreen" />
-            </Style>
-            <Style Selector="Border.Rect3">
-                <Style.Animations>
-                    <Animation Duration="0:0:10"
-                               IterationCount="Infinite">
-                        <KeyFrame Cue="0%">
-                            <Setter Property="Rotate3DTransform.AngleX" Value="180" />
-                            <Setter Property="ZIndex" Value="1" />
-                        </KeyFrame>
-                        <KeyFrame Cue="50%">
-                            <Setter Property="Rotate3DTransform.AngleX" Value="360" />
-                            <Setter Property="ZIndex" Value="4" />
-                        </KeyFrame>
-                        <KeyFrame Cue="75%">
-                            <Setter Property="Rotate3DTransform.AngleX" Value="450" />
-                            <Setter Property="ZIndex" Value="1" />
-                        </KeyFrame>
-                        <KeyFrame Cue="100%">
-                            <Setter Property="Rotate3DTransform.AngleX" Value="540" />
-                            <Setter Property="ZIndex" Value="1" />
-                        </KeyFrame>
-                    </Animation>
-                </Style.Animations>
-                <Setter Property="Background" Value="DarkBlue" />
-            </Style>
-            <Style Selector="Border.Rect4">
-                <Style.Animations>
-                    <Animation Duration="0:0:10"
-                               IterationCount="Infinite">
-                        <KeyFrame Cue="0%">
-                            <Setter Property="Rotate3DTransform.AngleX" Value="270" />
-                            <Setter Property="ZIndex" Value="1" />
-                        </KeyFrame>
-                        <KeyFrame Cue="25%">
-                            <Setter Property="Rotate3DTransform.AngleX" Value="360" />
-                            <Setter Property="ZIndex" Value="4" />
-                        </KeyFrame>
-                        <KeyFrame Cue="50%">
-                            <Setter Property="Rotate3DTransform.AngleX" Value="450" />
-                            <Setter Property="ZIndex" Value="1" />
-                        </KeyFrame>
-                        <KeyFrame Cue="100%">
-                            <Setter Property="Rotate3DTransform.AngleX" Value="630" />
-                            <Setter Property="ZIndex" Value="1" />
-                        </KeyFrame>
-                    </Animation>
-                </Style.Animations>
-                <Setter Property="Background" Value="Orange" />
-            </Style>
-            <Style Selector="Border.Free">
-                <Setter Property="Width" Value="200" />
-                <Setter Property="Height" Value="200" />
-                <Setter Property="BorderThickness" Value="2" />
-                <Setter Property="BorderBrush" Value="Black" />
-                <Setter Property="Background">
-                    <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
-                        <GradientStop Offset="0" Color="Red"/>
-                        <GradientStop Offset="1" Color="Blue"/>
-                    </LinearGradientBrush>
-                </Setter>
-            </Style>
-            <Style Selector="Label">
-                <Setter Property="VerticalAlignment" Value="Center" />
-            </Style>
-            <Style Selector="Slider">
-                <Setter Property="Width" Value="100" />
-            </Style>
-        </Styles>
-    </UserControl.Styles>
-    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" ClipToBounds="False">
-            <StackPanel.Clock>
-                <Clock />
-            </StackPanel.Clock>
-            <Grid ColumnDefinitions="*,50,*" RowDefinitions="*,Auto">
-                <Canvas Grid.Row="0" Grid.Column="0" ClipToBounds="False" Width="200" Height="200" Margin="20">
-                    <Border Classes="Test Rect1">
-                        <Border.RenderTransform>
-                            <Rotate3DTransform CenterZ="-100"
-                                               Depth="{Binding Depth}"/>
-                        </Border.RenderTransform>
-                    </Border>
-                    <Border Classes="Test Rect2">
-                        <Border.RenderTransform>
-                            <Rotate3DTransform CenterZ="-100"
-                                               Depth="{Binding Depth}"/>
-                        </Border.RenderTransform>
-                    </Border>
-                    <Border Classes="Test Rect3">
-                        <Border.RenderTransform>
-                            <Rotate3DTransform CenterZ="-100"
-                                               Depth="{Binding Depth}"/>
-                        </Border.RenderTransform>
-                    </Border>
-                    <Border Classes="Test Rect4">
-                        <Border.RenderTransform>
-                            <Rotate3DTransform CenterZ="-100"
-                                               Depth="{Binding Depth}"/>
-                        </Border.RenderTransform>
-                    </Border>
-                </Canvas>
-                <Grid Grid.Column="0" Grid.Row="1" RowDefinitions="*,*,*,*,*,*,*" ColumnDefinitions="*,Auto" Margin="20">
-                    <Label  Grid.Row="0" Grid.Column="0">Depth: </Label>
-                    <Slider Width="100" Grid.Row="0" Grid.Column="1" Value="{Binding Depth}" Minimum="100" Maximum="300" />
-                </Grid>
-                <Border Grid.Row="0" Grid.Column="2" Classes="Free">
-                    <Border.RenderTransform>
-                        <Rotate3DTransform Depth="{Binding Depth2}"
-                                           CenterX="{Binding CenterX}"
-                                           CenterY="{Binding CenterY}"
-                                           CenterZ="{Binding CenterZ}"
-                                           AngleX="{Binding AngleX}"
-                                           AngleY="{Binding AngleY}"
-                                           AngleZ="{Binding AngleZ}"/>
-                    </Border.RenderTransform>
-                </Border>
-                <Grid Grid.Column="2" Grid.Row="1" RowDefinitions="*,*,*,*,*,*,*" ColumnDefinitions="*,Auto" Margin="20">
-                    <Label  Grid.Row="0" Grid.Column="0">Depth: </Label>
-                    <Slider Grid.Row="0" Grid.Column="1" Value="{Binding Depth2}" Minimum="100" Maximum="300" />
-                    
-                    <Label Grid.Row="1" Grid.Column="0">Center X: </Label>
-                    <Slider Grid.Row="1" Grid.Column="1" Value="{Binding CenterX}" Minimum="-100" Maximum="100" />
-                    
-                    <Label Grid.Row="2" Grid.Column="0">Center Y: </Label>
-                    <Slider Grid.Row="2" Grid.Column="1" Value="{Binding CenterY}" Minimum="-100" Maximum="100" />
-                    
-                    <Label Grid.Row="3" Grid.Column="0">Center Z: </Label>
-                    <Slider Grid.Row="3" Grid.Column="1" Value="{Binding CenterZ}" Minimum="-100" Maximum="100" />
-                    
-                    <Label Grid.Row="4" Grid.Column="0">Angle X: </Label>
-                    <Slider Grid.Row="4" Grid.Column="1" Value="{Binding AngleX}" Minimum="0" Maximum="360" />
-                    
-                    <Label Grid.Row="5" Grid.Column="0">Angle Y: </Label>
-                    <Slider Grid.Row="5" Grid.Column="1" Value="{Binding AngleY}" Minimum="0" Maximum="360" />
-                    
-                    <Label Grid.Row="6" Grid.Column="0">Angle Z: </Label>
-                    <Slider Grid.Row="6" Grid.Column="1" Value="{Binding AngleZ}" Minimum="0" Maximum="360" />
-                </Grid>
-            </Grid>
-            
-        </StackPanel>
+        </Grid.Styles>
         
+        <Border Background="DarkRed" Classes="Test">
+            <Border.Styles>
+                <Style Selector="Border">
+                    <Style.Animations>
+                        <Animation Duration="0:0:10"
+                                   IterationCount="Infinite">
+                            <KeyFrame Cue="0%">
+                                <Setter Property="Rotate3DTransform.AngleX" Value="0" />
+                                <Setter Property="ZIndex" Value="4" />
+                            </KeyFrame>
+                            <KeyFrame Cue="25%">
+                                <Setter Property="Rotate3DTransform.AngleX" Value="90" />
+                                <Setter Property="ZIndex" Value="1" />
+                            </KeyFrame>
+                            <KeyFrame Cue="100%">
+                                <Setter Property="Rotate3DTransform.AngleX" Value="360" />
+                                <Setter Property="ZIndex" Value="4" />
+                            </KeyFrame>
+                        </Animation>
+                    </Style.Animations>
+                </Style>
+            </Border.Styles>
+            <Border.RenderTransform>
+                <Rotate3DTransform CenterZ="-100"
+                                   Depth="{Binding Depth}" />
+            </Border.RenderTransform>
+        </Border>
+        <Border Grid.Row="0" Grid.Column="0" Classes="Test" Background="DarkGreen">
+            <Border.Styles>
+                <Style Selector="Border">
+                    <Style.Animations>
+                        <Animation Duration="0:0:10"
+                                   IterationCount="Infinite">
+                            <KeyFrame Cue="0%">
+                                <Setter Property="Rotate3DTransform.AngleX" Value="90" />
+                                <Setter Property="ZIndex" Value="1" />
+                            </KeyFrame>
+                            <KeyFrame Cue="25%">
+                                <Setter Property="Rotate3DTransform.AngleX" Value="180" />
+                                <Setter Property="ZIndex" Value="1" />
+                            </KeyFrame>
+                            <KeyFrame Cue="75%">
+                                <Setter Property="Rotate3DTransform.AngleX" Value="360" />
+                                <Setter Property="ZIndex" Value="4" />
+                            </KeyFrame>
+                            <KeyFrame Cue="100%">
+                                <Setter Property="Rotate3DTransform.AngleX" Value="450" />
+                                <Setter Property="ZIndex" Value="1" />
+                            </KeyFrame>
+                        </Animation>
+                    </Style.Animations>
+                </Style>
+            </Border.Styles>
+            <Border.RenderTransform>
+                <Rotate3DTransform CenterZ="-100"
+                                   Depth="{Binding Depth}" />
+            </Border.RenderTransform>
+        </Border>
+        <Border Grid.Row="0" Grid.Column="0" Classes="Test" Background="DarkBlue">
+            <Border.Styles>
+                <Style Selector="Border">
+                    <Style.Animations>
+                        <Animation Duration="0:0:10"
+                                   IterationCount="Infinite">
+                            <KeyFrame Cue="0%">
+                                <Setter Property="Rotate3DTransform.AngleX" Value="180" />
+                                <Setter Property="ZIndex" Value="1" />
+                            </KeyFrame>
+                            <KeyFrame Cue="50%">
+                                <Setter Property="Rotate3DTransform.AngleX" Value="360" />
+                                <Setter Property="ZIndex" Value="4" />
+                            </KeyFrame>
+                            <KeyFrame Cue="75%">
+                                <Setter Property="Rotate3DTransform.AngleX" Value="450" />
+                                <Setter Property="ZIndex" Value="1" />
+                            </KeyFrame>
+                            <KeyFrame Cue="100%">
+                                <Setter Property="Rotate3DTransform.AngleX" Value="540" />
+                                <Setter Property="ZIndex" Value="1" />
+                            </KeyFrame>
+                        </Animation>
+                    </Style.Animations>
+                </Style>
+            </Border.Styles>
+            <Border.RenderTransform>
+                <Rotate3DTransform CenterZ="-100"
+                                   Depth="{Binding Depth}" />
+            </Border.RenderTransform>
+        </Border>
+        <Border Grid.Row="0" Grid.Column="0" Classes="Test" Background="Orange">
+            <Border.Styles>
+                <Style Selector="Border">
+                    <Style.Animations>
+                        <Animation Duration="0:0:10"
+                                   IterationCount="Infinite">
+                            <KeyFrame Cue="0%">
+                                <Setter Property="Rotate3DTransform.AngleX" Value="270" />
+                                <Setter Property="ZIndex" Value="1" />
+                            </KeyFrame>
+                            <KeyFrame Cue="25%">
+                                <Setter Property="Rotate3DTransform.AngleX" Value="360" />
+                                <Setter Property="ZIndex" Value="4" />
+                            </KeyFrame>
+                            <KeyFrame Cue="50%">
+                                <Setter Property="Rotate3DTransform.AngleX" Value="450" />
+                                <Setter Property="ZIndex" Value="1" />
+                            </KeyFrame>
+                            <KeyFrame Cue="100%">
+                                <Setter Property="Rotate3DTransform.AngleX" Value="630" />
+                                <Setter Property="ZIndex" Value="1" />
+                            </KeyFrame>
+                        </Animation>
+                    </Style.Animations>
+                </Style>
+            </Border.Styles>
+            <Border.RenderTransform>
+                <Rotate3DTransform CenterZ="-100"
+                                   Depth="{Binding Depth}" />
+            </Border.RenderTransform>
+        </Border>
+
+        <Label Grid.Column="0" Grid.Row="1">Depth: </Label>
+        <Slider Grid.Column="1" Grid.Row="1" Value="{Binding Depth}" Minimum="100" Maximum="300" />
+
+        <Border Grid.Row="0" Grid.Column="2" Classes="Test" ZIndex="-2">
+            <Border.Background>
+                <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
+                    <GradientStop Offset="0" Color="Red" />
+                    <GradientStop Offset="1" Color="Blue" />
+                </LinearGradientBrush>
+            </Border.Background>
+            <Border.Styles>
+                <Style Selector="Label">
+                    <Setter Property="VerticalAlignment" Value="Center" />
+                </Style>
+                <Style Selector="Slider">
+                    <Setter Property="Width" Value="100" />
+                </Style>
+            </Border.Styles>
+            <Border.RenderTransform>
+                <Rotate3DTransform Depth="{Binding Depth}"
+                                   CenterX="{Binding CenterX}"
+                                   CenterY="{Binding CenterY}"
+                                   CenterZ="{Binding CenterZ}"
+                                   AngleX="{Binding AngleX}"
+                                   AngleY="{Binding AngleY}"
+                                   AngleZ="{Binding AngleZ}" />
+            </Border.RenderTransform>
+        </Border>
+
+        <Label Grid.Row="1" Grid.Column="2">Center X: </Label>
+        <Slider Grid.Row="1" Grid.Column="3" Value="{Binding CenterX}" Minimum="-100" Maximum="100" />
+
+        <Label Grid.Row="2" Grid.Column="2">Center Y: </Label>
+        <Slider Grid.Row="2" Grid.Column="3" Value="{Binding CenterY}" Minimum="-100" Maximum="100" />
+
+        <Label Grid.Row="3" Grid.Column="2">Center Z: </Label>
+        <Slider Grid.Row="3" Grid.Column="3" Value="{Binding CenterZ}" Minimum="-100" Maximum="100" />
+
+        <Label Grid.Row="4" Grid.Column="2">Angle X: </Label>
+        <Slider Grid.Row="4" Grid.Column="3" Value="{Binding AngleX}" Minimum="-180" Maximum="180" />
+
+        <Label Grid.Row="5" Grid.Column="2">Angle Y: </Label>
+        <Slider Grid.Row="5" Grid.Column="3" Value="{Binding AngleY}" Minimum="-180" Maximum="180" />
+
+        <Label Grid.Row="6" Grid.Column="2">Angle Z: </Label>
+        <Slider Grid.Row="6" Grid.Column="3" Value="{Binding AngleZ}" Minimum="-180" Maximum="180" />
+    </Grid>
 </UserControl>
diff --git a/samples/RenderDemo/ViewModels/Transform3DPageViewModel.cs b/samples/RenderDemo/ViewModels/Transform3DPageViewModel.cs
index 2a6bdcb434..c8d1d40e3a 100644
--- a/samples/RenderDemo/ViewModels/Transform3DPageViewModel.cs
+++ b/samples/RenderDemo/ViewModels/Transform3DPageViewModel.cs
@@ -8,7 +8,6 @@ namespace RenderDemo.ViewModels
     {
         private double _depth = 200;
 
-        private double _depth2 = 200;
         private double _centerX = 0;
         private double _centerY = 0;
         private double _centerZ = 0;
@@ -22,11 +21,6 @@ namespace RenderDemo.ViewModels
             set => RaiseAndSetIfChanged(ref _depth, value);
         }
         
-        public double Depth2
-        {
-            get => _depth2;
-            set => RaiseAndSetIfChanged(ref _depth2, value);
-        }
         public double CenterX
         {
             get => _centerX;