Skip to content

Instantly share code, notes, and snippets.

@IPRIT

IPRIT/gist:0fded4e172e4565e71e9

Created May 31, 2015 17:07
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save IPRIT/0fded4e172e4565e71e9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save IPRIT/0fded4e172e4565e71e9 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.xml
<ResourceDictionary
x:Class="MyStyle.WindowStyle"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:CustomEase="clr-namespace:CustomEasingFunction"
xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options">
<SolidColorBrush x:Key="TitleBarBackgroundBrush" Color="#99FFFFFF" />
<SolidColorBrush x:Key="WindowBorderBrush" Color="#FFF" />
<SolidColorBrush x:Key="WindowBorderBrushInactive" Color="#777" />
<SolidColorBrush x:Key="WindowStatusForeground" Color="#FFFFFF" />
<SolidColorBrush x:Key="WindowStatusForegroundInactive" Color="#FFFFFF" />
<Style x:Key="WindowStyleTitleBarButton" TargetType="{x:Type Button}">
<Setter Property="Focusable" Value="false" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Border
x:Name="PART_border"
Background="Transparent" CornerRadius="5"
/>
<ContentPresenter />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="PART_border" Property="Background" Value="#FFF" />
<Setter TargetName="PART_border" Property="Opacity" Value="0.5" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="PART_border" Property="Background" Value="#77777777"/>
<Setter TargetName="PART_border" Property="Opacity" Value="1" />
<Setter Property="Foreground" Value="#000"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="WindowStyle" TargetType="{x:Type Window}">
<Setter Property="WindowStyle" Value="None" />
<Setter Property="AllowsTransparency" Value="true" />
<Setter Property="Background" Value="White" />
<Setter Property="ResizeMode" Value="CanResizeWithGrip" />
<Setter Property="WindowChrome.WindowChrome">
<Setter.Value>
<WindowChrome
NonClientFrameEdges="None"
GlassFrameThickness="0"
ResizeBorderThickness="7"
CaptionHeight="32"
/>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}">
<Border
x:Name="PART_Container"
Padding="7 7 7 5"
CornerRadius="5">
<Grid
TextOptions.TextRenderingMode="ClearType"
TextOptions.TextFormattingMode="Display">
<Grid Background="#DDFFFFFF">
<Grid.Effect>
<BlurEffect Radius="2"/>
</Grid.Effect>
</Grid>
<Border
x:Name="PART_Border"
Width="Auto"
Height="Auto"
Background="Transparent"
BorderBrush="{StaticResource WindowBorderBrush}"
BorderThickness="1"
Padding="0" CornerRadius="2">
<DockPanel
HorizontalAlignment="Stretch"
Background="Transparent"
VerticalAlignment="Stretch"
>
<Border
x:Name="TitleBar"
DockPanel.Dock="Top"
Background="{StaticResource TitleBarBackgroundBrush}"
BorderThickness="0"
>
<Grid Height="32">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="36"/>
<ColumnDefinition />
<ColumnDefinition Width="34"/>
<ColumnDefinition Width="34"/>
<ColumnDefinition Width="34"/>
</Grid.ColumnDefinitions>
<Ellipse x:Name="Earth3" Stroke="#FF2F5DDC" Width="10" Height="10"
Margin="20,5,0,0">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="#FF2CC514"/>
<GradientStop Color="#FF2886C0" Offset="0.896"/>
</RadialGradientBrush>
</Ellipse.Fill>
<Ellipse.RenderTransform>
<RotateTransform
x:Name="earth2Transform"
Angle="0"
CenterX="-1"
CenterY="0" />
</Ellipse.RenderTransform>
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="earth2Transform"
Storyboard.TargetProperty="Angle"
From="360.0" To="0.0" Duration="0:0:1"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
<Ellipse x:Name="Earth2" Stroke="#FF2F5DDC" Width="10" Height="10"
Margin="20,5,0,0">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="#FF2CC514"/>
<GradientStop Color="#FF2886C0" Offset="0.896"/>
</RadialGradientBrush>
</Ellipse.Fill>
<Ellipse.RenderTransform>
<RotateTransform
x:Name="earthTransform"
Angle="0"
CenterX="-1"
CenterY="0" />
</Ellipse.RenderTransform>
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="earthTransform"
Storyboard.TargetProperty="Angle"
From="0.0" To="360.0" Duration="0:0:1"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
<Ellipse x:Name="Earth4" Stroke="#FF2F5DDC" Width="10" Height="10"
Margin="20,5,0,0">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="#FF2CC514"/>
<GradientStop Color="#FF2886C0" Offset="0.896"/>
</RadialGradientBrush>
</Ellipse.Fill>
<Ellipse.RenderTransform>
<RotateTransform
x:Name="earth3Transform"
Angle="0"
CenterX="-1"
CenterY="0" />
</Ellipse.RenderTransform>
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="earth3Transform"
Storyboard.TargetProperty="Angle"
From="180.0" To="-180.0" Duration="0:0:1"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
<TextBlock
x:Name="Caption"
Grid.Column="1"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="4,0,0,0"
FontFamily="Segoe UI"
FontSize="12"
Opacity="1"
Foreground="#000"
Text="{Binding Path=Title, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
/>
<Button
x:Name="MinButton"
Grid.Column="2"
VerticalAlignment="Top"
Width="34"
Height="26"
Style="{StaticResource WindowStyleTitleBarButton}"
Click="MinButtonClick"
WindowChrome.IsHitTestVisibleInChrome="True"
>
<Grid MaxHeight="9" MaxWidth="9">
<Path
Stroke="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}"
StrokeThickness="1"
Stretch="None"
RenderOptions.EdgeMode="Aliased"
Data="M0,8 H8 M0,7 H8 M0,6 H8"
/>
</Grid>
</Button>
<Button
Grid.Column="3"
x:Name="MaxButton"
VerticalAlignment="Top"
Width="34"
Height="26"
Style="{StaticResource WindowStyleTitleBarButton}"
Click="MaxButtonClick"
WindowChrome.IsHitTestVisibleInChrome="True"
>
<Grid MaxHeight="9" MaxWidth="9">
<Path
x:Name="PART_MaxButton_Path"
Stroke="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}"
StrokeThickness="1"
Stretch="None"
RenderOptions.EdgeMode="Aliased"
Data="M0,0 H8 V8 H0 V0 M0,1 H8 M0,2 H8"
/>
</Grid>
</Button>
<Button
Grid.Column="4"
x:Name="CloseButton"
VerticalAlignment="Top"
Width="34"
Height="26"
Style="{StaticResource WindowStyleTitleBarButton}"
Click="CloseButtonClick"
WindowChrome.IsHitTestVisibleInChrome="True"
>
<Grid MaxHeight="9" MaxWidth="9">
<Path
Stroke="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}"
StrokeThickness="1.5"
Stretch="None"
Data="M0,0 L8,8 M0,8 L8,0"
/>
</Grid>
</Button>
</Grid>
</Border>
<ContentPresenter />
</DockPanel>
</Border>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="WindowState" Value="Maximized">
<Setter TargetName="PART_MaxButton_Path" Property="Data" Value="M0,3 H5 V8 H0 V3 M0,4 H5 M3,0 H8 V5 H7 M3,1 H8"/>
</Trigger>
<Trigger Property="WindowState" Value="Normal">
<Setter TargetName="PART_Border" Property="Effect">
<Setter.Value>
<DropShadowEffect
Color="black"
Opacity="0.5"
BlurRadius="7"
ShadowDepth="2"
Direction="315"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsActive" Value="False">
<Setter TargetName="PART_Border" Property="BorderBrush" Value="{StaticResource WindowBorderBrushInactive}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Resources>
<Style TargetType="{x:Type StatusBar}">
<Setter Property="Foreground" Value="{StaticResource WindowStatusForeground}" />
<Setter Property="Background" Value="{StaticResource WindowBorderBrush}" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsActive, RelativeSource={RelativeSource AncestorType=Window}}" Value="False">
<Setter Property="Foreground" Value="{StaticResource WindowStatusForegroundInactive}" />
<Setter Property="Background" Value="{StaticResource WindowBorderBrushInactive}" />
</DataTrigger>
</Style.Triggers>
</Style>
<Style TargetType="{x:Type ResizeGrip}">
<Setter Property="WindowChrome.ResizeGripDirection" Value="BottomRight" />
</Style>
</Style.Resources>
</Style>
<ControlTemplate x:Key="SimpleAnimationTemplate">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<StackPanel Margin="10">
<Label
Padding="0,20"
>Исчезновение, появление и изменение размера элементов с разной продолжительностью анимации.</Label>
<Rectangle
Name="MyRectangle1"
Width="100"
Height="100"
Fill="Blue">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyRectangle1"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:5"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
<Ellipse
Name="AnotherElement1"
Margin="0,20,0,0"
Height="100"
Width="100"
Fill="#99FF0000">
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="AnotherElement1"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.5" Duration="0:0:0.1"
AutoReverse="True" RepeatBehavior="Forever" />
<DoubleAnimation
Storyboard.TargetName="AnotherElement1"
Storyboard.TargetProperty="Width"
From="100.0" To="150" Duration="0:0:1"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
</StackPanel>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="SimpleColorAnimationTemplate">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<StackPanel Margin="10">
<Label
Padding="0,20"
>Изменение цвета (щелкните, чтобы запустить анимацию)</Label>
<Button
Name="MyRectangle2"
Width="100"
Height="100"
Background="GreenYellow">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="MyRectangle2"
Storyboard.TargetProperty="Background.Color"
From="Cyan" To="Indigo" Duration="0:0:5"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</StackPanel>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="TargetCadresAnimation">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<StackPanel Margin="10">
<Label
Padding="0,20"
>Анимация по полным кадрам. Линейная интерполяция. (Нажите, чтобы начать)</Label>
<Rectangle Width="50" Height="50" HorizontalAlignment="Left"
Fill="#DDFE6A6A" RadiusX="10" RadiusY="10">
<Rectangle.RenderTransform>
<TranslateTransform
x:Name="MyAnimatedTranslateTransform1"
X="0" Y="0" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="MyAnimatedTranslateTransform1"
Storyboard.TargetProperty="X"
AutoReverse="True"
RepeatBehavior="Forever">
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0" />
<LinearDoubleKeyFrame Value="-100" KeyTime="0:0:1" />
<LinearDoubleKeyFrame Value="-100" KeyTime="0:0:2" />
<LinearDoubleKeyFrame Value="200" KeyTime="0:0:4" />
<LinearDoubleKeyFrame Value="200" KeyTime="0:0:6" />
<LinearDoubleKeyFrame Value="-100" KeyTime="0:0:8" />
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:10" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="MyAnimatedTranslateTransform1"
Storyboard.TargetProperty="Y"
AutoReverse="True"
RepeatBehavior="Forever">
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0" />
<LinearDoubleKeyFrame Value="-100" KeyTime="0:0:1" />
<LinearDoubleKeyFrame Value="150" KeyTime="0:0:2" />
<LinearDoubleKeyFrame Value="150" KeyTime="0:0:4" />
<LinearDoubleKeyFrame Value="-100" KeyTime="0:0:6" />
<LinearDoubleKeyFrame Value="-100" KeyTime="0:0:8" />
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:10" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</StackPanel>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="TargetCadresAnimationSpline">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="10,0">
<ScrollViewer
CanContentScroll="True"
VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Hidden"
MaxHeight="500">
<StackPanel Margin="10">
<Label
Padding="0,20"
FontWeight="Bold"
FontSize="18"
>Анимация по полным кадрам с нестандартной интерполяцией
</Label>
<Label
Padding="0,10"
>Пример использования Clock для анимации
</Label>
<StackPanel Margin="0,0,0,10" Orientation="Horizontal">
<Button
Click="buttonClick1">
Начать анимацию ширины
</Button>
<Slider Visibility="Hidden" Name="trackBar1" Margin="10,0" Width="150" Maximum="1"/>
</StackPanel>
<Rectangle Width="50" Height="50" HorizontalAlignment="Left"
Fill="#DDFE6A6A" RadiusX="10" RadiusY="10" Name="rect1">
<Rectangle.RenderTransform>
<TranslateTransform
x:Name="MyAnimatedTranslateTransform2"
X="0" Y="0" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="MyAnimatedTranslateTransform2"
Storyboard.TargetProperty="X"
AutoReverse="True"
RepeatBehavior="Forever">
<SplineDoubleKeyFrame Value="0" KeyTime="0:0:0" KeySpline="0.5,1.0 1.0,0.5"/>
<SplineDoubleKeyFrame Value="300" KeyTime="0:0:1" KeySpline="0.2,0.5 0.4,0.9"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
<Rectangle Width="50" Height="50" HorizontalAlignment="Left"
Fill="#DDFE6A6A" RadiusX="10" RadiusY="10" Margin="0,10,0,0">
<Rectangle.RenderTransform>
<TranslateTransform
x:Name="MyAnimatedTranslateTransform3"
X="0" Y="0" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="MyAnimatedTranslateTransform3"
Storyboard.TargetProperty="X"
AutoReverse="True"
RepeatBehavior="Forever">
<SplineDoubleKeyFrame Value="0" KeyTime="0:0:0" KeySpline="0.1,1.0 1.0,1.0"/>
<SplineDoubleKeyFrame Value="300" KeyTime="0:0:1" KeySpline="1.0,0.1 0.0,1.0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
<Rectangle Width="50" Height="50" HorizontalAlignment="Left"
Fill="#DDFE6A6A" RadiusX="10" RadiusY="10" Margin="0,10,0,0">
<Rectangle.RenderTransform>
<TranslateTransform
x:Name="MyAnimatedTranslateTransform4"
X="0" Y="0" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="MyAnimatedTranslateTransform4"
Storyboard.TargetProperty="X"
AutoReverse="True"
RepeatBehavior="Forever">
<SplineDoubleKeyFrame Value="0" KeyTime="0:0:0" KeySpline="0.1,1.0 1.0,1.0"/>
<SplineDoubleKeyFrame Value="300" KeyTime="0:0:1" KeySpline="0.0,1.0 1.0,0.0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
<Rectangle Width="50" Height="50" HorizontalAlignment="Left"
Fill="#DDFE6A6A" RadiusX="10" RadiusY="10" Margin="0,10,0,0">
<Rectangle.RenderTransform>
<TranslateTransform
x:Name="MyAnimatedTranslateTransform5"
X="0" Y="0" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="MyAnimatedTranslateTransform5"
Storyboard.TargetProperty="X"
AutoReverse="True"
RepeatBehavior="Forever">
<SplineDoubleKeyFrame Value="150" KeyTime="0:0:0.5" KeySpline="0.0,1.0 1.0,0.0" />
<SplineDoubleKeyFrame Value="250" KeyTime="0:0:0.9" KeySpline="0.0,0.0 1.0,0.0" />
<SplineDoubleKeyFrame Value="300" KeyTime="0:0:1" KeySpline="0.25,0.5 0.75,1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
<Label
Padding="0,20"
>Анимация с собственной интерполирующей функцией (t^7)</Label>
<Rectangle Width="50" Height="50" HorizontalAlignment="Left"
Fill="#DDFE6A6A" RadiusX="10" RadiusY="10" Margin="0,10,0,0">
<Rectangle.RenderTransform>
<TranslateTransform
x:Name="MyAnimatedTranslateTransform6"
X="0" Y="0" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyAnimatedTranslateTransform6"
Storyboard.TargetProperty="X"
AutoReverse="True"
RepeatBehavior="Forever"
Duration="00:00:1"
From="0" To="300">
<DoubleAnimation.EasingFunction>
<CustomEase:CustomSeventhPowerEasingFunction EasingMode="EaseIn"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</StackPanel>
</ScrollViewer>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="TargetCadresAnimationSolarSystem">
<DockPanel Background="#000">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<StackPanel Margin="10">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Ellipse Stroke="#FFF3F3F3" Width="400" Height="400" Opacity="0.3"></Ellipse>
<Ellipse Stroke="#FFF3F3F3" Width="360" Height="360" Opacity="0.3"></Ellipse>
<Ellipse Stroke="#FFF3F3F3" Width="320" Height="320" Opacity="0.3"></Ellipse>
<Ellipse Stroke="#FFF3F3F3" Width="280" Height="280" Opacity="0.3"></Ellipse>
<Ellipse Stroke="#FFF3F3F3" Width="220" Height="220" Opacity="0.3"></Ellipse>
<Ellipse Stroke="#FFF3F3F3" Width="190" Height="190" Opacity="0.3"></Ellipse>
<Ellipse Stroke="#FFF3F3F3" Width="150" Height="150" Opacity="0.3"></Ellipse>
<Ellipse Stroke="#FFF3F3F3" Width="110" Height="110" Opacity="0.3"></Ellipse>
<!-- Солнце -->
<Ellipse x:Name="Solar" Stroke="#FFE2AF2F" Width="50" Height="50">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="#FFFFE502" Offset="0.643"/>
<GradientStop Color="#FFFDB51B" Offset="1"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<!-- Земля -->
<Ellipse x:Name="Earth" Stroke="#FF2F5DDC" Width="10" Height="10"
Margin="185,5,0,0">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="#FF2CC514"/>
<GradientStop Color="#FF2886C0" Offset="0.896"/>
</RadialGradientBrush>
</Ellipse.Fill>
<Ellipse.RenderTransform>
<RotateTransform
x:Name="earthTransform"
Angle="0"
CenterX="-88"
CenterY="0" />
</Ellipse.RenderTransform>
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="earthTransform"
Storyboard.TargetProperty="Angle"
From="0.0" To="360.0" Duration="0:0:7"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
<!-- Меркурий -->
<Ellipse x:Name="Mercury" Stroke="#FF3D290A" Width="5" Height="5"
Margin="110,5,0,0">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="#FFAE8212"/>
<GradientStop Color="#FF715B16" Offset="1"/>
</RadialGradientBrush>
</Ellipse.Fill>
<Ellipse.RenderTransform>
<RotateTransform
x:Name="mercuryTransform"
Angle="0"
CenterX="-53"
CenterY="0" />
</Ellipse.RenderTransform>
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="mercuryTransform"
Storyboard.TargetProperty="Angle"
From="0.0" To="360.0" Duration="0:0:1"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
<!-- Венера -->
<Ellipse x:Name="Venera" Stroke="#FFF0D321" Width="11" Height="11"
Margin="150,5,0,0">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="#FFFFDE12"/>
<GradientStop Color="#FFB79220" Offset="1"/>
</RadialGradientBrush>
</Ellipse.Fill>
<Ellipse.RenderTransform>
<RotateTransform
x:Name="veneraTransform"
Angle="0"
CenterX="-70"
CenterY="3" />
</Ellipse.RenderTransform>
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="veneraTransform"
Storyboard.TargetProperty="Angle"
From="0.0" To="360.0" Duration="0:0:3"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
<!-- Марс -->
<Ellipse x:Name="Mars" Stroke="#FFC25F1F" Width="5" Height="5"
Margin="220,6,0,0">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="#FFFF6500"/>
<GradientStop Color="#FFE03C0F" Offset="1"/>
</RadialGradientBrush>
</Ellipse.Fill>
<Ellipse.RenderTransform>
<RotateTransform
x:Name="marsTransform"
Angle="0"
CenterX="-106"
CenterY="0" />
</Ellipse.RenderTransform>
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="marsTransform"
Storyboard.TargetProperty="Angle"
From="0.0" To="360.0" Duration="0:0:10"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
<!-- Юпитер -->
<Ellipse x:Name="Yupiter" Stroke="#FFCD9135" Width="20" Height="20"
Margin="280,0,0,0">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="#FFFFE184"/>
<GradientStop Color="#FFC8A665" Offset="1"/>
</RadialGradientBrush>
</Ellipse.Fill>
<Ellipse.RenderTransform>
<RotateTransform
x:Name="YupiterTransform"
Angle="0"
CenterX="-130"
CenterY="10" />
</Ellipse.RenderTransform>
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="YupiterTransform"
Storyboard.TargetProperty="Angle"
From="0.0" To="360.0" Duration="0:0:15"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
<!-- Сатурн -->
<Ellipse x:Name="Saturn" Stroke="#FF3D290A" Width="18" Height="18"
Margin="320,0,0,0">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="#FFAE8212"/>
<GradientStop Color="#FF715B16" Offset="1"/>
</RadialGradientBrush>
</Ellipse.Fill>
<Ellipse.RenderTransform>
<RotateTransform
x:Name="SaturnTransform"
Angle="0"
CenterX="-150"
CenterY="10" />
</Ellipse.RenderTransform>
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="SaturnTransform"
Storyboard.TargetProperty="Angle"
From="0.0" To="360.0" Duration="0:0:20"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
<Ellipse x:Name="SaturnCircle" Stroke="#44FFFFFF" StrokeThickness="6" Width="33" Height="38"
Margin="320,0,0,0">
<Ellipse.RenderTransform>
<RotateTransform
x:Name="SaturnCircleTransform"
Angle="0"
CenterX="-143"
CenterY="20" />
</Ellipse.RenderTransform>
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="SaturnCircleTransform"
Storyboard.TargetProperty="Angle"
From="0.0" To="360.0" Duration="0:0:20"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
<!-- Уран -->
<Ellipse x:Name="Uran" Stroke="#FF12989A" Width="14" Height="14"
Margin="360,0,0,0">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="#FFB3F5FF"/>
<GradientStop Color="#FF6AE1F7" Offset="1"/>
</RadialGradientBrush>
</Ellipse.Fill>
<Ellipse.RenderTransform>
<RotateTransform
x:Name="UranTransform"
Angle="0"
CenterX="-172"
CenterY="10" />
</Ellipse.RenderTransform>
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="UranTransform"
Storyboard.TargetProperty="Angle"
From="0.0" To="360.0" Duration="0:0:25"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
<!-- Нептун -->
<Ellipse x:Name="Neptun" Stroke="#FF2F5DDC" Width="14" Height="14"
Margin="400,0,0,0">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="#FF43D3E8"/>
<GradientStop Color="#FF017186" Offset="1"/>
</RadialGradientBrush>
</Ellipse.Fill>
<Ellipse.RenderTransform>
<RotateTransform
x:Name="NeptunTransform"
Angle="0"
CenterX="-192"
CenterY="10" />
</Ellipse.RenderTransform>
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="NeptunTransform"
Storyboard.TargetProperty="Angle"
From="0.0" To="360.0" Duration="0:0:30"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
</Grid>
</StackPanel>
</Grid>
</DockPanel>
</ControlTemplate>
<ControlTemplate x:Key="PathAnimation">
<DockPanel Background="#FFF">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<StackPanel Margin="10">
<Label Padding="0,10">
Анимация с использованием пути (щелкните, чтобы начать)
</Label>
<Rectangle Width="50" Height="50" HorizontalAlignment="Left"
Fill="#DDEE6A6A" RadiusX="10" RadiusY="10">
<Rectangle.RenderTransform>
<MatrixTransform x:Name="RectMatrixTransform" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<MatrixAnimationUsingPath
Storyboard.TargetName="RectMatrixTransform"
Storyboard.TargetProperty="Matrix"
Duration="0:0:5"
RepeatBehavior="Forever"
AutoReverse="True">
<MatrixAnimationUsingPath.PathGeometry>
<PathGeometry
Figures="M -100,100 C 35,0 135,0 160,100 180,190 285,200 310,100"
PresentationOptions:Freeze="True" />
</MatrixAnimationUsingPath.PathGeometry>
</MatrixAnimationUsingPath>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</StackPanel>
</Grid>
</DockPanel>
</ControlTemplate>
</ResourceDictionary>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment