Skip to content

Instantly share code, notes, and snippets.

@s-fernandez-v

s-fernandez-v/Main.xaml

Forked from stevenhartin/Main.xaml
Last active June 29, 2022 21:38
Show Gist options
  • Save s-fernandez-v/be17cebb35c57acb3b233db170222e85 to your computer and use it in GitHub Desktop.
Save s-fernandez-v/be17cebb35c57acb3b233db170222e85 to your computer and use it in GitHub Desktop.
Download ZIP
VisualBrush with rotating content
Raw
Main.xaml
<Grid
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid.Resources>
<VisualBrush x:Key="wdgBrush" Visual="{Binding ElementName=wdg}"/>
<ControlTemplate x:Key="Loading_Circle01">
<Viewbox>
<Canvas Name="Document" Width="93.9801" Height="93.9807">
<Canvas Name="Layer_1" Width="800.173" Height="600.134" Canvas.Left="0" Canvas.Top="0">
<Path Data="F1M92.9493,56.7723C93.62,53.615 93.98,50.3443 93.98,46.9896 93.98,44.3109 93.744,41.6883 93.3107,39.131L88.0533,40.0216C88.436,42.291 88.6467,44.615 88.6467,46.9896 88.6467,49.9643 88.328,52.8616 87.7334,55.6617L92.9493,56.7723z" Stretch="Fill" Fill="#FFE4E4E4" Name="Path" Width="6.24664" Height="17.6414" Canvas.Left="87.7334" Canvas.Top="39.131" />
<Path Data="F1M68.3726,11.2567L71.1512,6.70468C68.0872,4.86069,64.7979,3.35934,61.3352,2.24734L59.7073,7.32602C62.7632,8.30734,65.6685,9.63138,68.3726,11.2567z" Stretch="Fill" Fill="#FFE4E4E4" Name="Path_0" Width="11.4439" Height="9.00934" Canvas.Left="59.7073" Canvas.Top="2.24734" />
<Path Data="F1M7.91296,32.5614C13.7943,16.6827 29.0916,5.33334 46.9903,5.33334 48.9222,5.33334 50.8209,5.47736 52.6837,5.73203L53.4316,0.452026C51.3236,0.161346 49.1756,3.05176E-05 46.9903,3.05176E-05 26.7836,3.05176E-05 9.51831,12.82 2.89429,30.7534L7.91296,32.5614z" Stretch="Fill" Fill="#FFE4E4E4" Name="Path_1" Width="50.5374" Height="32.5613" Canvas.Left="2.89429" Canvas.Top="3.05176E-05" />
<Path Data="F1M86.9116,35.1108L92.0236,33.5895C89.337,24.5828,84.0262,16.6975,76.9703,10.8362L73.601,14.9695C79.8383,20.1615,84.5356,27.1388,86.9116,35.1108z" Stretch="Fill" Fill="#FFE4E4E4" Name="Path_2" Width="18.4226" Height="24.2747" Canvas.Left="73.601" Canvas.Top="10.8362" />
<Path Data="F1M21.2098,79.6745L17.9324,83.8772C22.3911,87.3972,27.4924,90.1386,33.0391,91.8665L34.6231,86.7719C29.6951,85.2386,25.1671,82.8026,21.2098,79.6745z" Stretch="Fill" Fill="#FFE4E4E4" Name="Path_3" Width="16.6907" Height="12.192" Canvas.Left="17.9324" Canvas.Top="79.6745" />
<Path Data="F1M83.0469,67.81C75.835,80.2527 62.3776,88.6474 46.9896,88.6474 44.9429,88.6474 42.931,88.4927 40.963,88.206L40.191,93.482C42.4122,93.806 44.6816,93.9807 46.9896,93.9807 64.3483,93.9807 79.5256,84.5127 87.663,70.478L83.0469,67.81z" Stretch="Fill" Fill="#FFE4E4E4" Name="Path_4" Width="47.472" Height="26.1707" Canvas.Left="40.191" Canvas.Top="67.81" />
<Path Data="F1M1.07306,56.9532C2.11841,61.7773,3.90906,66.3225,6.31573,70.4746L10.9318,67.8092C8.80109,64.1319,7.21313,60.1039,6.28644,55.8305L1.07306,56.9532z" Stretch="Fill" Fill="#FFE4E4E4" Name="Path_5" Width="9.8587" Height="14.644" Canvas.Left="1.07306" Canvas.Top="55.8305" />
<Path Data="F1M0.502686,40.1551C0.176025,42.3871 0,44.6684 0,46.9897 0,48.7951 0.113342,50.5764 0.312012,52.3311L5.61066,51.7244C5.43335,50.1698 5.33331,48.5911 5.33331,46.9897 5.33331,44.9337 5.48804,42.9138 5.77734,40.9377L0.502686,40.1551z" Stretch="Fill" Fill="#FFE4E4E4" Name="Path_6" Width="5.77734" Height="12.176" Canvas.Left="0" Canvas.Top="40.1551" />
</Canvas>
</Canvas>
</Viewbox>
</ControlTemplate>
<ControlTemplate x:Key="Loading_Circle02">
<Viewbox>
<Canvas Name="Document" Width="93.982" Height="93.9804">
<Canvas Name="Layer_1" Width="800.19" Height="600.132" Canvas.Left="0" Canvas.Top="0">
<Path Data="F1M69.3082,11.8438L72.1708,7.34641C70.6482,6.37573,69.0708,5.48108,67.4362,4.68774L65.1148,9.48773C66.5628,10.1917,67.9589,10.9837,69.3082,11.8438z" Stretch="Fill" Fill="#FFE4E4E4" Name="Path" Width="7.05603" Height="7.15601" Canvas.Left="65.1148" Canvas.Top="4.68774" />
<Path Data="F1M14.4553,21.0195L10.3007,17.6808C9.38202,18.8261,8.51672,20.0168,7.70605,21.2475L12.166,24.1688C12.8794,23.0821,13.6447,22.0328,14.4553,21.0195z" Stretch="Fill" Fill="#FFE4E4E4" Name="Path_0" Width="6.74927" Height="6.48798" Canvas.Left="7.70605" Canvas.Top="17.6808" />
<Path Data="F1M46.9905,5.33331C48.6159,5.33331,50.2172,5.436,51.7946,5.61865L52.4559,0.328003C50.6613,0.118652 48.8399,0 46.9905,0 43.6746,0 40.4385,0.350647 37.3146,1.00665L38.4119,6.22534C41.1826,5.64267,44.0505,5.33331,46.9905,5.33331z" Stretch="Fill" Fill="#FFE4E4E4" Name="Path_1" Width="15.1413" Height="6.22534" Canvas.Left="37.3146" Canvas.Top="0" />
<Path Data="F1M82.2496,69.1328C81.4643,70.3795,80.6136,71.5795,79.7056,72.7314L83.8937,76.0288C84.9269,74.7168,85.8923,73.3528,86.7843,71.9368L82.2496,69.1328z" Stretch="Fill" Fill="#FFE4E4E4" Name="Path_2" Width="7.07874" Height="6.896" Canvas.Left="79.7056" Canvas.Top="69.1328" />
<Path Data="F1M77.0127,18.1563C79.0407,20.2656,80.85,22.5843,82.4006,25.0816L86.9501,22.3003C85.198,19.4736,83.15,16.851,80.8567,14.463L77.0127,18.1563z" Stretch="Fill" Fill="#FFE4E4E4" Name="Path_3" Width="9.93738" Height="10.6187" Canvas.Left="77.0127" Canvas.Top="14.463" />
<Path Data="F1M93.678,52.2629C93.8727,50.5296 93.9821,48.7736 93.9821,46.9896 93.9821,43.9869 93.6874,41.0549 93.146,38.2069L87.9073,39.2043C88.386,41.7283 88.6487,44.3283 88.6487,46.9896 88.6487,48.5696 88.55,50.1283 88.3781,51.6643L93.678,52.2629z" Stretch="Fill" Fill="#FFE4E4E4" Name="Path_4" Width="6.07471" Height="14.056" Canvas.Left="87.9073" Canvas.Top="38.2069" />
<Path Data="F1M86.3395,60.6407L91.3768,62.3887C92.0275,60.5193,92.5702,58.6006,92.9808,56.6327L87.7595,55.5474C87.3955,57.2874,86.9155,58.986,86.3395,60.6407z" Stretch="Fill" Fill="#FFE4E4E4" Name="Path_5" Width="6.64136" Height="6.84131" Canvas.Left="86.3395" Canvas.Top="55.5474" />
<Path Data="F1M22.0778,80.3568L18.8884,84.6301C20.3618,85.7314,21.9071,86.7382,23.5057,87.6648L26.1711,83.0488C24.7551,82.2261,23.3831,81.3341,22.0778,80.3568z" Stretch="Fill" Fill="#FFE4E4E4" Name="Path_6" Width="7.28265" Height="7.30798" Canvas.Left="18.8884" Canvas.Top="80.3568" />
<Path Data="F1M22.5035,13.3189C24.1742,12.1016,25.9395,11.007,27.7848,10.0429L25.3795,5.28427C23.2781,6.37762,21.2688,7.62292,19.3675,9.00958L22.5035,13.3189z" Stretch="Fill" Fill="#FFE4E4E4" Name="Path_7" Width="8.4173" Height="8.03467" Canvas.Left="19.3675" Canvas.Top="5.28427" />
<Path Data="F1M73.536,79.0677C71.944,80.3878,70.2507,81.5917,68.472,82.6664L71.2227,87.2344C73.2294,86.0224,75.1374,84.665,76.9333,83.1757L73.536,79.0677z" Stretch="Fill" Fill="#FFE4E4E4" Name="Path_8" Width="8.4613" Height="8.16663" Canvas.Left="68.472" Canvas.Top="79.0677" />
<Path Data="F1M46.9905,88.6471C45.3492,88.6471,43.7319,88.5404,42.1385,88.3551L41.5186,93.6511C43.3159,93.8604 45.1385,93.9804 46.9905,93.9804 50.2813,93.9804 53.4932,93.6364 56.5945,92.9897L55.5359,87.7617C52.7759,88.3404,49.9186,88.6471,46.9905,88.6471z" Stretch="Fill" Fill="#FFE4E4E4" Name="Path_9" Width="15.076" Height="6.21869" Canvas.Left="41.5186" Canvas.Top="87.7617" />
<Path Data="F1M11.5153,68.7968L6.96985,71.5835C8.40588,73.9115,10.0419,76.1021,11.8472,78.1381L15.8112,74.5728C14.2206,72.7768,12.7805,70.8475,11.5153,68.7968z" Stretch="Fill" Fill="#FFE4E4E4" Name="Path_10" Width="8.84137" Height="9.34131" Canvas.Left="6.96985" Canvas.Top="68.7968" />
<Path Data="F1M6.63763,36.6315C7.27228,34.1595,8.13629,31.7821,9.19092,29.5101L4.37762,27.2155C3.17493,29.7955,2.19226,32.4968,1.47095,35.3048L6.63763,36.6315z" Stretch="Fill" Fill="#FFE4E4E4" Name="Path_11" Width="7.71997" Height="9.41599" Canvas.Left="1.47095" Canvas.Top="27.2155" />
<Path Data="F1M0.817383,55.6719L6.06403,54.7185C5.5907,52.2119 5.33337,49.6319 5.33337,46.9892 5.33337,45.3985 5.43066,43.8319 5.60535,42.2879L0.309326,41.6679C0.112061,43.4172 0,45.1906 0,46.9892 0,49.9559 0.289368,52.8559 0.817383,55.6719z" Stretch="Fill" Fill="#FFE4E4E4" Name="Path_12" Width="6.06403" Height="14.004" Canvas.Left="0" Canvas.Top="41.6679" />
</Canvas>
</Canvas>
</Viewbox>
</ControlTemplate>
<ControlTemplate x:Key="Spinning_Widget">
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<BeginStoryboard.Storyboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" Storyboard.TargetName="Icon_Loading_Circle1" RepeatBehavior="Forever">
<EasingDoubleKeyFrame KeyTime="0:0:4" Value="360"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" Storyboard.TargetName="Icon_Loading_Circle2" RepeatBehavior="Forever">
<EasingDoubleKeyFrame KeyTime="0" Value="80"/>
<EasingDoubleKeyFrame KeyTime="0:0:3.111" Value="360"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:3.111" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:4" Value="80"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard.Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
<Grid Width="150" Height="150" Background="Transparent">
<Grid Width="100" Height="100">
<Control x:Name="Icon_Loading_Circle1" Template="{StaticResource Loading_Circle01}" RenderTransformOrigin="0.5,0.5">
<Control.RenderTransform>
<RotateTransform/>
</Control.RenderTransform>
</Control>
<Control x:Name="Icon_Loading_Circle2" Template="{StaticResource Loading_Circle02}" RenderTransformOrigin="0.5,0.5">
<Control.RenderTransform>
<RotateTransform Angle="80"/>
</Control.RenderTransform>
</Control>
</Grid>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="Common_Widget">
<Grid Width="100" Height="100" Background="Gray">
<Rectangle Fill="{StaticResource wdgBrush}"/>
</Grid>
</ControlTemplate>
</Grid.Resources>
<Border HorizontalAlignment="Center" VerticalAlignment="Top" Margin="20" Opacity="1">
<Control x:Name="wdg" Template="{StaticResource Spinning_Widget}"/>
</Border>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Control Template="{StaticResource Common_Widget}"/>
<Control Template="{StaticResource Common_Widget}"/>
</StackPanel>
</Grid>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment