From a3bd88128aaa6a28e944d2226a46ff677b5700e8 Mon Sep 17 00:00:00 2001
From: Max Katz <maxkatz6@outlook.com>
Date: Sun, 4 Jul 2021 03:46:45 -0400
Subject: [PATCH] Update RenderDemo

---
 samples/RenderDemo/Pages/AnimationsPage.xaml  | 78 +++++++++++++++++
 samples/RenderDemo/Pages/TransitionsPage.xaml | 84 ++++++++++++++++++-
 2 files changed, 158 insertions(+), 4 deletions(-)

diff --git a/samples/RenderDemo/Pages/AnimationsPage.xaml b/samples/RenderDemo/Pages/AnimationsPage.xaml
index 21c7d68b5d..48fca61d09 100644
--- a/samples/RenderDemo/Pages/AnimationsPage.xaml
+++ b/samples/RenderDemo/Pages/AnimationsPage.xaml
@@ -161,6 +161,81 @@
           </Animation>
         </Style.Animations>
       </Style>
+
+      <Style Selector="Border.Rect7">
+        <Style.Animations>
+          <Animation Duration="0:0:3"
+                     IterationCount="Infinite"
+                     PlaybackDirection="Alternate">
+            <KeyFrame Cue="0%">
+              <Setter Property="Background">
+                <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,100%">
+                  <GradientStop Offset="0" Color="Red"/>
+                  <GradientStop Offset="1" Color="Blue"/>
+                </LinearGradientBrush>
+              </Setter>
+            </KeyFrame>
+            <KeyFrame Cue="100%">
+              <Setter Property="Background">
+                <LinearGradientBrush StartPoint="100%,0%" EndPoint="0%,100%">
+                  <GradientStop Offset="0" Color="Green"/>
+                  <GradientStop Offset="1" Color="Yellow"/>
+                </LinearGradientBrush>
+              </Setter>
+            </KeyFrame>
+          </Animation>
+        </Style.Animations>
+      </Style>
+
+      <Style Selector="Border.Rect8">
+        <Style.Animations>
+          <Animation Duration="0:0:3"
+                     IterationCount="Infinite"
+                     PlaybackDirection="Alternate">
+            <KeyFrame Cue="0%">
+              <Setter Property="Background">
+                <ConicGradientBrush Center="50%,50%" Angle="0">
+                  <GradientStop Offset="0" Color="Red"/>
+                  <GradientStop Offset="1" Color="Blue"/>
+                </ConicGradientBrush>
+              </Setter>
+            </KeyFrame>
+            <KeyFrame Cue="100%">
+              <Setter Property="Background">
+                <ConicGradientBrush Center="70%,70%" Angle="90">
+                  <GradientStop Offset="0" Color="Green"/>
+                  <GradientStop Offset="1" Color="Yellow"/>
+                </ConicGradientBrush>
+              </Setter>
+            </KeyFrame>
+          </Animation>
+        </Style.Animations>
+      </Style>
+
+      <Style Selector="Border.Rect9">
+        <Style.Animations>
+          <Animation Duration="0:0:3"
+                     IterationCount="Infinite"
+                     PlaybackDirection="Alternate">
+            <KeyFrame Cue="0%">
+              <Setter Property="Background">
+                <RadialGradientBrush Center="50%,50%" Radius="0.5">
+                  <GradientStop Offset="0" Color="Red"/>
+                  <GradientStop Offset="1" Color="Blue"/>
+                </RadialGradientBrush>
+              </Setter>
+            </KeyFrame>
+            <KeyFrame Cue="100%">
+              <Setter Property="Background">
+                <RadialGradientBrush Center="30%,30%" Radius="0.2">
+                  <GradientStop Offset="0" Color="Green"/>
+                  <GradientStop Offset="1" Color="Yellow"/>
+                </RadialGradientBrush>
+              </Setter>
+            </KeyFrame>
+          </Animation>
+        </Style.Animations>
+      </Style>
     </Styles>
   </UserControl.Styles>
   <Grid>
@@ -181,6 +256,9 @@
         <Border Classes="Test Rect6" Background="Red"/>
         <Border Classes="Test Shadow" CornerRadius="10" Child="{x:Null}" />
         <Border Classes="Test Shadow" CornerRadius="0 30 60 0" Child="{x:Null}" />
+        <Border Classes="Test Rect7" Child="{x:Null}" />
+        <Border Classes="Test Rect8" Child="{x:Null}" />
+        <Border Classes="Test Rect9" Child="{x:Null}" />
       </WrapPanel>
     </StackPanel>
   </Grid>
diff --git a/samples/RenderDemo/Pages/TransitionsPage.xaml b/samples/RenderDemo/Pages/TransitionsPage.xaml
index 1985074b0f..71b6ea0713 100644
--- a/samples/RenderDemo/Pages/TransitionsPage.xaml
+++ b/samples/RenderDemo/Pages/TransitionsPage.xaml
@@ -167,13 +167,80 @@
       <Style Selector="Border.Rect11:pointerover">
         <Setter Property="Background" >
           <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,100%">
-            <LinearGradientBrush.GradientStops>
-              <GradientStop Offset="0" Color="Red"/>
-              <GradientStop Offset="1" Color="Blue"/>
-            </LinearGradientBrush.GradientStops>
+            <GradientStop Offset="0" Color="Red"/>
+            <GradientStop Offset="1" Color="Blue"/>
           </LinearGradientBrush>
         </Setter>
       </Style>
+
+      <Style Selector="Border.Rect12">
+        <Setter Property="Transitions">
+          <Transitions>
+            <BrushTransition Property="Background" Duration="0:0:0.5" />
+          </Transitions>
+        </Setter>
+        <Setter Property="Background" >
+          <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,100%">
+            <GradientStop Offset="0" Color="Red"/>
+            <GradientStop Offset="1" Color="Blue"/>
+          </LinearGradientBrush>
+        </Setter>
+      </Style>
+
+      <Style Selector="Border.Rect12:pointerover">
+        <Setter Property="Background" >
+          <LinearGradientBrush StartPoint="100%,0%" EndPoint="0%,100%">
+            <GradientStop Offset="0" Color="Green"/>
+            <GradientStop Offset="1" Color="Yellow"/>
+          </LinearGradientBrush>
+        </Setter>
+      </Style>
+
+      <Style Selector="Border.Rect13">
+        <Setter Property="Transitions">
+          <Transitions>
+            <BrushTransition Property="Background" Duration="0:0:0.5" />
+          </Transitions>
+        </Setter>
+        <Setter Property="Background" >
+          <ConicGradientBrush Center="50%,50%" Angle="0">
+            <GradientStop Offset="0" Color="Red"/>
+            <GradientStop Offset="1" Color="Blue"/>
+          </ConicGradientBrush>
+        </Setter>
+      </Style>
+
+      <Style Selector="Border.Rect13:pointerover">
+        <Setter Property="Background" >
+          <ConicGradientBrush Center="70%,70%" Angle="90">
+            <GradientStop Offset="0" Color="Green"/>
+            <GradientStop Offset="1" Color="Yellow"/>
+          </ConicGradientBrush>
+        </Setter>
+      </Style>
+
+      <Style Selector="Border.Rect14">
+        <Setter Property="Transitions">
+          <Transitions>
+            <BrushTransition Property="Background" Duration="0:0:0.5" />
+          </Transitions>
+        </Setter>
+        <Setter Property="Background" >
+          <RadialGradientBrush Center="50%,50%" Radius="0.5">
+            <GradientStop Offset="0" Color="Red"/>
+            <GradientStop Offset="1" Color="Blue"/>
+          </RadialGradientBrush>
+        </Setter>
+      </Style>
+
+      <Style Selector="Border.Rect14:pointerover">
+        <Setter Property="Background" >
+          <RadialGradientBrush Center="30%,30%" Radius="0.2">
+            <GradientStop Offset="0" Color="Green"/>
+            <GradientStop Offset="1" Color="Yellow"/>
+          </RadialGradientBrush>
+        </Setter>
+      </Style>
     </Styles>
   </UserControl.Styles>
 
@@ -202,6 +269,15 @@
 
         <Border Classes="Test Rect10" />
         <Border Classes="Test Rect11" />
+
+        <Border Classes="Test Rect12" Child="{x:Null}"/>
+        <Border Classes="Test Rect13" Child="{x:Null}"/>
+        <Border Classes="Test Rect14" Child="{x:Null}"/>
+        
+        <Border Classes="Test Rect14" />
+        <Border Classes="Test Rect14" />
+        <Border Classes="Test Rect14" />
+        <Border Classes="Test Rect14" />
       </WrapPanel>
     </StackPanel>
   </Grid>