I have a progress bar that I have styled to look like the indeterminate windows ui progress bar, with the 5 ellipses going from side to side,
the animation is based inside of a canvas, the problem is my application is resolution and size independent, thus the canvas's width property is dynamic, I want to make the animation's end property (Canvas.Left) to dynamically change to the width of the canvas minus the with of the ellipse. I have tried to bind it somehow (I am still a beginner at binding) so I always get a runtime error...
Can someone please help?
Canvas:
<Canvas Name="canvas" Height="9" HorizontalAlignment="Stretch" VerticalAlignment="Center" Width="{TemplateBinding Width}">
<Ellipse Name="ellipse" Style="{DynamicResource ProgressBarEllipse}" Width="9" Fill="{TemplateBinding Foreground}" Canvas.Left="0" Canvas.Top="0" />
<Ellipse Name="ellipse1" Style="{DynamicResource ProgressBarEllipse}" Width="9" Fill="{TemplateBinding Foreground}" Canvas.Left="0" Canvas.Top="0" />
<Ellipse Name="ellipse2" Style="{DynamicResource ProgressBarEllipse}" Width="9" Fill="{TemplateBinding Foreground}" Canvas.Left="0" Canvas.Top="0" />
<Ellipse Name="ellipse3" Style="{DynamicResource ProgressBarEllipse}" Width="9" Fill="{TemplateBinding Foreground}" Canvas.Left="0" Canvas.Top="0" />
<Ellipse Name="ellipse4" Style="{DynamicResource ProgressBarEllipse}" Width="9" Fill="{TemplateBinding Foreground}" Canvas.Left="0" Canvas.Top="0" />
</Canvas>
And The Story Board:
<Storyboard RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="ellipse">
<SplineDoubleKeyFrame KeyTime="0:0:2" Value="1260" KeySpline="0,1,1,0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="ellipse1">
<SplineDoubleKeyFrame KeyTime="0:0:2" Value="1260" KeySpline="0,0.8,1,0.2" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="ellipse2">
<SplineDoubleKeyFrame KeyTime="0:0:2" Value="1260" KeySpline="0,0.6,1,0.4" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="ellipse3">
<SplineDoubleKeyFrame KeyTime="0:0:2" Value="1260" KeySpline="0,0.4,1,0.6" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="ellipse4">
<SplineDoubleKeyFrame KeyTime="0:0:2" Value="1260" KeySpline="0,0.2,1,0.8" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ellipse">
<EasingDoubleKeyFrame KeyTime="0" Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1" />
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.5" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ellipse1">
<EasingDoubleKeyFrame KeyTime="0" Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1" />
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.5" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ellipse3">
<EasingDoubleKeyFrame KeyTime="0" Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1" />
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.5" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ellipse2">
<EasingDoubleKeyFrame KeyTime="0" Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1" />
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.5" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ellipse4">
<EasingDoubleKeyFrame KeyTime="0" Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1" />
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.5" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
I want to change the storyboard values that are 1260 to the value of the canvas width minus the width of the ellipse
Related
In my MainWindow.xaml is a data grid view and i x:name it "MyList".
System.InvalidOperationException: ''MyList' name cannot be found in
the name scope of 'System.Windows.Controls.Button'.'
Guide me how i name my data grid to able to access it in other pages or how i reference or scope MainWindow.xaml to other pages / usercontrols
Edit:
this is my data grid Named MyList and it is in MainWindow : ```
VerticalGridLinesBrush="White"
BorderThickness="1"
CanUserResizeColumns="False"
CanUserResizeRows="False"
ClipboardCopyMode="IncludeHeader"
AllowDrop="True"
SelectionMode="Extended"
Foreground="#FF434343"
AlternatingRowBackground="#FFEFF0DD"
CanUserAddRows="False" Background="White" RenderTransformOrigin="0.5,0.5" BorderBrush="{x:Null}"
>
<DataGrid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</DataGrid.RenderTransform>
<DataGrid.Columns>
<DataGridTextColumn Header="ردیف" Width="75" FontSize="16" Binding="{Binding Path=id}" IsReadOnly="True" ></DataGridTextColumn>
<DataGridTextColumn Header="نام" Width="200" FontSize="16" Binding="{Binding Path=name}" IsReadOnly="True"></DataGridTextColumn>
<DataGridTextColumn Header="تعداد" Width="auto" FontSize="16" Binding="{Binding Path=tedad}" IsReadOnly="True"></DataGridTextColumn>
</DataGrid.Columns>
</DataGrid>```
now here is app.xaml and i need to reference mainwindow to here but i dont know how t add it in xaml :```
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="MainWindow.xaml">
<!--#region User Control Add-->
<!--#region Anime Open Add-->
<Storyboard x:Key="anmOpenAdd">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="AddPage">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="-350"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-350"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="-320"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<!--#endregion-->
<!--#region Anime Close Add-->
<Storyboard x:Key="anmCloseAdd">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="AddPage">
<EasingDoubleKeyFrame KeyTime="0" Value="-320"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="-350"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="20"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<!--#endregion-->
<!--#endregion-->
<!--#region Edit User Control-->
<!--#region Edit Open Up-->
<Storyboard x:Key="anmEditOpen">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="EditPage">
<EasingDoubleKeyFrame KeyTime="0" Value="-320"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="anmMyListEditOpen">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="MyList">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="320"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<!--#endregion-->
<!--#region Edit Close Up-->
<Storyboard x:Key="anmEditClose">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="EditPage">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-340"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="anmMyListEditClose">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="{Binding ElementName=MyList}">
<EasingDoubleKeyFrame KeyTime="0" Value="320"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<!--#endregion-->
<!--#endregion-->
<!--#region Resource Disctionary-->
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Grey.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />
</ResourceDictionary.MergedDictionaries>
<!--#endregion-->
</ResourceDictionary>
When I use progress bar(IsIndertiminate=true) inside a Grid of width say 120, then the progress bar animation seems quite weird. The progress dot seems to be moving sidebyside without any proper spacing in between them. Also, due to this(less width), the effect of dots getting moving away/getting closer at start and end respectively is not quite visible.
So, how can I make the progressBar look better when I am displaying it in limited width.
I tried to search and make some changes in progressBar's property myself but couldn't reach a satisfactory state.
EDIT: Inside my grid.row, by setting the width of my progressBar to "auto" I was able to achieve desirable spacing/look (it's still not perfect but will work for me).
It just requires some customizing of that controls Style Template to make some adjustments to the shapes that act as the ProgressBar itself.
I don't have a default Style template for the WP7 ProgressBar in front of me at the moment, but if you open your proj in Expression Blend, right-click it and choose "Edit Template -> Edit A Copy (OR Edit Original) to expose the Style Template, you'll see the shapes and I think even the Storyboard animation(s) driving it ready to be edited to your hearts desire.
If you provide a copy of the default template I'm sure we could whip out a solution for you pretty quick if you don't get it yourself. Hope this helps :)
It's default style of progress bar, and you can modify each Rectangle!
<Style x:Key="PerformanceProgressBarStyle1" TargetType="toolkit:PerformanceProgressBar">
<Setter Property="IsIndeterminate" Value="False"/>
<Setter Property="Foreground" Value="{StaticResource PhoneAccentBrush}"/>
<Setter Property="Background" Value="{StaticResource PhoneAccentBrush}"/>
<Setter Property="IsHitTestVisible" Value="False"/>
<Setter Property="Padding" Value="{StaticResource PhoneHorizontalMargin}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:PerformanceProgressBar">
<ProgressBar x:Name="EmbeddedProgressBar" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" IsIndeterminate="{TemplateBinding ActualIsIndeterminate}" Padding="{TemplateBinding Padding}">
<ProgressBar.Template>
<ControlTemplate TargetType="ProgressBar">
<toolkitPrimitives:RelativeAnimatingContentControl HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
<toolkitPrimitives:RelativeAnimatingContentControl.Resources>
<ExponentialEase x:Key="ProgressBarEaseOut" EasingMode="EaseOut" Exponent="1"/>
<ExponentialEase x:Key="ProgressBarEaseIn" EasingMode="EaseIn" Exponent="1"/>
</toolkitPrimitives:RelativeAnimatingContentControl.Resources>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Determinate"/>
<VisualState x:Name="Indeterminate">
<Storyboard Duration="00:00:04.4" RepeatBehavior="Forever">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="IndeterminateRoot">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00.0" Storyboard.TargetProperty="X" Storyboard.TargetName="R1TT">
<LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="0.1"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseOut}" KeyTime="00:00:00.5" Value="33.1"/>
<LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="66.1"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseIn}" KeyTime="00:00:02.5" Value="100.1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00.2" Storyboard.TargetProperty="X" Storyboard.TargetName="R2TT">
<LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="0.1"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseOut}" KeyTime="00:00:00.5" Value="33.1"/>
<LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="66.1"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseIn}" KeyTime="00:00:02.5" Value="100.1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00.4" Storyboard.TargetProperty="X" Storyboard.TargetName="R3TT">
<LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="0.1"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseOut}" KeyTime="00:00:00.5" Value="33.1"/>
<LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="66.1"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseIn}" KeyTime="00:00:02.5" Value="100.1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00.6" Storyboard.TargetProperty="X" Storyboard.TargetName="R4TT">
<LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="0.1"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseOut}" KeyTime="00:00:00.5" Value="33.1"/>
<LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="66.1"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseIn}" KeyTime="00:00:02.5" Value="100.1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00.8" Storyboard.TargetProperty="X" Storyboard.TargetName="R5TT">
<LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="0.1"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseOut}" KeyTime="00:00:00.5" Value="33.1"/>
<LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="66.1"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseIn}" KeyTime="00:00:02.5" Value="100.1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="R1">
<DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
<DiscreteDoubleKeyFrame KeyTime="00:00:02.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00.2" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="R2">
<DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
<DiscreteDoubleKeyFrame KeyTime="00:00:02.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00.4" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="R3">
<DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
<DiscreteDoubleKeyFrame KeyTime="00:00:02.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00.6" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="R4">
<DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
<DiscreteDoubleKeyFrame KeyTime="00:00:02.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00.8" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="R5">
<DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
<DiscreteDoubleKeyFrame KeyTime="00:00:02.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="IndeterminateRoot" Margin="{TemplateBinding Padding}">
<Grid HorizontalAlignment="Left">
<Rectangle x:Name="R1" CacheMode="BitmapCache" Fill="{TemplateBinding Foreground}" Height="4" IsHitTestVisible="False" Opacity="0" Width="4">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="R1TT"/>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="R2" CacheMode="BitmapCache" Fill="{TemplateBinding Foreground}" Height="4" IsHitTestVisible="False" Opacity="0" Width="4">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="R2TT"/>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="R3" CacheMode="BitmapCache" Fill="{TemplateBinding Foreground}" Height="4" IsHitTestVisible="False" Opacity="0" Width="4">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="R3TT"/>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="R4" CacheMode="BitmapCache" Fill="{TemplateBinding Foreground}" Height="4" IsHitTestVisible="False" Opacity="0" Width="4">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="R4TT"/>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="R5" CacheMode="BitmapCache" Fill="{TemplateBinding Foreground}" Height="4" IsHitTestVisible="False" Opacity="0" Width="4">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="R5TT"/>
</Rectangle.RenderTransform>
</Rectangle>
</Grid>
</Border>
</toolkitPrimitives:RelativeAnimatingContentControl>
</ControlTemplate>
</ProgressBar.Template>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisibilityStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.25" To="Normal"/>
<VisualTransition GeneratedDuration="0:0:0.75" To="Hidden"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="Hidden">
<Storyboard>
<DoubleAnimation To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="EmbeddedProgressBar"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</ProgressBar>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
For example just set Widht = "2" Height = "2" May be it's what you need!
<Rectangle x:Name="R1" CacheMode="BitmapCache" Fill="{TemplateBinding Foreground}" Height="2" IsHitTestVisible="False" Opacity="0" Width="2">
You also can use any shape, not only rectangles.
Do not forget assign this style for your ProgresBar.
Hope its help.
i am trying to create an animation in Expression blend for a Windows Store App.
I want the animation to represent rainfall. The animations consists of 2 pictures and im trying to have 3 scenarions.
1) Lite rainfall: animate with a cloud and 1 drop as in picture 1. This works fine
2) Medium rainfall: Here i want to use the same cloud but add 1 more drop
3) Heavy rain: here i want to use the same cloud but add a third drop
My problem is when i trye to create the two last scenarios it effects the first 1 and the new objects will also show on the first 1. So i cannot have these 3 scenarios at the same storyboard it seems like. Is there anyway i can split the storyboard up to multiple layers, so i can hide some of the objects when ever i want? From the msdn website i found i article saying i can create layers by clicking tools => create new layer.
However i dont have that option in my expression blend, and im using the last version.
Animation 1
Animation 2
Animation 3
I would create three separate storyboards, one for each scenario. This would allow you more control over when to do what.
In each Storyboard you can then handle and animate your objects after your need.
You can then use different easings to achieve different speeds of the falling raindrops.
I've created a solution in Expression Blend demonstrating this for you and placed it on my Skydrive: http://sdrv.ms/12IbxrR and there's a blogpost covering how it's done here.
Example code with each button stopping and starting the right animation.
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<Storyboard
x:Name="MediumRainAnimation"
RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="path">
<EasingDoubleKeyFrame
KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.3"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.7"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:1"
Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="path1">
<EasingDoubleKeyFrame
KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.3"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.7"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:1"
Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase
EasingMode="EaseIn" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="path2">
<EasingDoubleKeyFrame
KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.3"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.7"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:1"
Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<CubicEase
EasingMode="EaseInOut" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="path">
<EasingDoubleKeyFrame
KeyTime="0"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:1"
Value="200">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="path1">
<EasingDoubleKeyFrame
KeyTime="0"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:1"
Value="200">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase
EasingMode="EaseIn" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="path2">
<EasingDoubleKeyFrame
KeyTime="0"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:1"
Value="200">
<EasingDoubleKeyFrame.EasingFunction>
<CubicEase
EasingMode="EaseInOut" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="path">
<EasingDoubleKeyFrame
KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.3"
Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="path1">
<EasingDoubleKeyFrame
KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.3"
Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="path2">
<EasingDoubleKeyFrame
KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.3"
Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard
x:Name="StrongRainAnimation"
RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="path">
<EasingDoubleKeyFrame
KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.18"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.42"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.6"
Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="path1">
<EasingDoubleKeyFrame
KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.18"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.42"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.6"
Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase
EasingMode="EaseIn" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="path2">
<EasingDoubleKeyFrame
KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.18"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.42"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.6"
Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<CubicEase
EasingMode="EaseInOut" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="path">
<EasingDoubleKeyFrame
KeyTime="0"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.6"
Value="200">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="path1">
<EasingDoubleKeyFrame
KeyTime="0"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.6"
Value="200">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase
EasingMode="EaseIn" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="path2">
<EasingDoubleKeyFrame
KeyTime="0"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.6"
Value="200">
<EasingDoubleKeyFrame.EasingFunction>
<CubicEase
EasingMode="EaseInOut" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="path">
<EasingDoubleKeyFrame
KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.18"
Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="path1">
<EasingDoubleKeyFrame
KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.18"
Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="path2">
<EasingDoubleKeyFrame
KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.18"
Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard
x:Name="SlowRainAnimation"
RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="path">
<EasingDoubleKeyFrame
KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.51"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:1.19"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:1.7"
Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="path1">
<EasingDoubleKeyFrame
KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.51"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:1.19"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:1.7"
Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase
EasingMode="EaseIn" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="path2">
<EasingDoubleKeyFrame
KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.51"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:1.19"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:1.7"
Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<CubicEase
EasingMode="EaseInOut" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="path">
<EasingDoubleKeyFrame
KeyTime="0"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:1.7"
Value="200">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="path1">
<EasingDoubleKeyFrame
KeyTime="0"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:1.7"
Value="200">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase
EasingMode="EaseIn" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="path2">
<EasingDoubleKeyFrame
KeyTime="0"
Value="1" />
<EasingDoubleKeyFrame
KeyTime="0:0:1.7"
Value="200">
<EasingDoubleKeyFrame.EasingFunction>
<CubicEase
EasingMode="EaseInOut" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="path">
<EasingDoubleKeyFrame
KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.51"
Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="path1">
<EasingDoubleKeyFrame
KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.51"
Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="path2">
<EasingDoubleKeyFrame
KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame
KeyTime="0:0:0.51"
Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Page.Resources>
<Grid
Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Path
x:Name="path"
Data="F1M35.116,42.866C35.116,52.426 27.367,60.174 17.808,60.174 8.249,60.174 0.5,52.426 0.5,42.866 0.5,33.307 17.808,1.058 17.808,1.058 17.808,1.058 35.116,33.307 35.116,42.866"
Fill="#FF93B6F1"
Height="60.673"
Width="35.616"
UseLayoutRounding="False"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="0,0,100,0"
RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<CompositeTransform />
</Path.RenderTransform>
</Path>
<Path
x:Name="path1"
Data="F1M35.116,42.866C35.116,52.426 27.367,60.174 17.808,60.174 8.249,60.174 0.5,52.426 0.5,42.866 0.5,33.307 17.808,1.058 17.808,1.058 17.808,1.058 35.116,33.307 35.116,42.866"
Fill="#FF93B6F1"
Height="60.673"
Width="35.616"
UseLayoutRounding="False"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<CompositeTransform />
</Path.RenderTransform>
</Path>
<Path
x:Name="path2"
Data="F1M35.116,42.866C35.116,52.426 27.367,60.174 17.808,60.174 8.249,60.174 0.5,52.426 0.5,42.866 0.5,33.307 17.808,1.058 17.808,1.058 17.808,1.058 35.116,33.307 35.116,42.866"
Fill="#FF93B6F1"
Height="60.673"
Width="35.616"
UseLayoutRounding="False"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="0,0,-100,0"
RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<CompositeTransform />
</Path.RenderTransform>
</Path>
<Path
Data="F1M207.885,33.885C202.225,33.885 196.732,34.596 191.485,35.924 184.27,15.299 164.651,0.5 141.564,0.5 117.399,0.5 97.034,16.714 90.718,38.852 82.291,34.586 72.771,32.167 62.679,32.167 28.339,32.167 0.5,60.006 0.5,94.346 0.5,128.687 28.339,156.526 62.679,156.526 72.489,156.526 81.764,154.246 90.015,150.2 94.9,169.883 112.678,184.474 133.872,184.474 151.986,184.474 167.603,173.812 174.811,158.426 184.56,164.01 195.844,167.218 207.885,167.218 244.704,167.218 274.552,137.37 274.552,100.552 274.552,63.733 244.704,33.885 207.885,33.885"
Fill="White"
Height="184.974"
Width="275.052"
UseLayoutRounding="False"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
<StackPanel>
<Button
Tapped="Button_Tapped">Play slow rain</Button>
<Button
Tapped="Button_Tapped_1">Play Medium rain</Button>
<Button
Tapped="Button_Tapped_2">Play Strong rain</Button>
</StackPanel>
</Grid>
</Page>
I created an animation with a logo in Blend 4 and I want it to be in my WinfForms like a user control how do I Incorporate the WPF with WinForms(vb.net) so that it would be like a user-control that gets triggered when ever I want it to?
so far i tried adding it as a new item but it doesn't work!
links are greatly appreciated
This is the xaml for the wpf
<Window
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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
x:Class="MainWindow"
x:Name="Window"
Title="MainWindow"
Width="300" Height="150">
<Window.Resources>
<Storyboard x:Key="OnLoaded1"/>
<Storyboard x:Key="OnLoaded2">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="ellipse">
<EasingDoubleKeyFrame KeyTime="0" Value="-42"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="38"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="118"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="198"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ellipse">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="ellipse_Copy">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-42"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="38"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="118"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="198"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ellipse_Copy">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="ellipse_Copy1">
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="-42"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="38"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="118"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.9" Value="198"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ellipse_Copy1">
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.9" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter" SourceName="Window">
<BeginStoryboard x:Name="OnLoaded2_BeginStoryboard1" Storyboard="{StaticResource OnLoaded2}"/>
</EventTrigger>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard x:Name="OnLoaded2_BeginStoryboard" Storyboard="{StaticResource OnLoaded2}"/>
</EventTrigger>
</Window.Triggers>
<Grid x:Name="LayoutRoot" Background="#FF00A7FF">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="ellipse">
<EasingDoubleKeyFrame KeyTime="0" Value="-42"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="38"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="118"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="198"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ellipse">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="ellipse_Copy">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-42"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="38"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="118"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="198"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ellipse_Copy">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="ellipse_Copy1">
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="-42"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="38"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="118"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.9" Value="198"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ellipse_Copy1">
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.9" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
</Grid.ColumnDefinitions>
<Grid x:Name="grid" Margin="10.333,32.333,-4.333,-26.333">
<Ellipse x:Name="ellipse" HorizontalAlignment="Left" Margin="-7.337,32.805,0,0" StrokeThickness="0" Width="15" RenderTransformOrigin="0.5,0.5" Height="15" VerticalAlignment="Top">
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="0.5" ScaleY="0.5"/>
<SkewTransform/>
<RotateTransform Angle="79"/>
<TranslateTransform X="-42"/>
</TransformGroup>
</Ellipse.RenderTransform>
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse x:Name="ellipse_Copy" HorizontalAlignment="Left" Margin="-7.337,32.805,0,0" StrokeThickness="0" Width="15" RenderTransformOrigin="0.5,0.5" Height="15" VerticalAlignment="Top">
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="0.5" ScaleY="0.5"/>
<SkewTransform/>
<RotateTransform Angle="79"/>
<TranslateTransform X="-42"/>
</TransformGroup>
</Ellipse.RenderTransform>
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse x:Name="ellipse_Copy1" HorizontalAlignment="Left" Margin="-7.337,32.805,0,0" StrokeThickness="0" Width="15" RenderTransformOrigin="0.5,0.5" Height="15" VerticalAlignment="Top">
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="0.5" ScaleY="0.5"/>
<SkewTransform/>
<RotateTransform Angle="79"/>
<TranslateTransform X="-42"/>
</TransformGroup>
</Ellipse.RenderTransform>
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<TextBlock Margin="7.833,0,0,0" TextWrapping="Wrap" FontSize="26.667" Foreground="White" FontWeight="Bold"><Run FontFamily="Segoe UI Semibold" Text="Kirusoft"/><Run Text=" "/><Run FontFamily="Segoe UI Light" Text="Dev."/></TextBlock>
</Grid>
</Grid>
You are not able to embed another Wpf Window into a Wpf Window, you will need to create an UserControl.
What I have done it the past when I have a Window that I want to convert to a UserControl is to change all references to Windowin the Xaml to UserControl. In your case it would look something like this.
<UserControl
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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
x:Class="WpfApplication2.UserControl1"
x:Name="Logo"
Width="300" Height="150">
<UserControl.Resources>
<Storyboard x:Key="OnLoaded1"/>
<Storyboard x:Key="OnLoaded2">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="ellipse">
<EasingDoubleKeyFrame KeyTime="0" Value="-42"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="38"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="118"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="198"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ellipse">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="ellipse_Copy">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-42"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="38"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="118"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="198"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ellipse_Copy">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="ellipse_Copy1">
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="-42"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="38"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="118"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.9" Value="198"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ellipse_Copy1">
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.9" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter" >
<BeginStoryboard x:Name="OnLoaded2_BeginStoryboard1" Storyboard="{StaticResource OnLoaded2}"/>
</EventTrigger>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard x:Name="OnLoaded2_BeginStoryboard" Storyboard="{StaticResource OnLoaded2}"/>
</EventTrigger>
</UserControl.Triggers>
<Grid x:Name="LayoutRoot" Background="#FF00A7FF">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="ellipse">
<EasingDoubleKeyFrame KeyTime="0" Value="-42"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="38"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="118"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="198"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ellipse">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="ellipse_Copy">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-42"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="38"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="118"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="198"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ellipse_Copy">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="ellipse_Copy1">
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="-42"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="38"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="118"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.9" Value="198"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ellipse_Copy1">
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.9" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
</Grid.ColumnDefinitions>
<Grid x:Name="grid" Margin="10.333,32.333,-4.333,-26.333">
<Ellipse x:Name="ellipse" HorizontalAlignment="Left" Margin="-7.337,32.805,0,0" StrokeThickness="0" Width="15" RenderTransformOrigin="0.5,0.5" Height="15" VerticalAlignment="Top">
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="0.5" ScaleY="0.5"/>
<SkewTransform/>
<RotateTransform Angle="79"/>
<TranslateTransform X="-42"/>
</TransformGroup>
</Ellipse.RenderTransform>
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse x:Name="ellipse_Copy" HorizontalAlignment="Left" Margin="-7.337,32.805,0,0" StrokeThickness="0" Width="15" RenderTransformOrigin="0.5,0.5" Height="15" VerticalAlignment="Top">
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="0.5" ScaleY="0.5"/>
<SkewTransform/>
<RotateTransform Angle="79"/>
<TranslateTransform X="-42"/>
</TransformGroup>
</Ellipse.RenderTransform>
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse x:Name="ellipse_Copy1" HorizontalAlignment="Left" Margin="-7.337,32.805,0,0" StrokeThickness="0" Width="15" RenderTransformOrigin="0.5,0.5" Height="15" VerticalAlignment="Top">
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="0.5" ScaleY="0.5"/>
<SkewTransform/>
<RotateTransform Angle="79"/>
<TranslateTransform X="-42"/>
</TransformGroup>
</Ellipse.RenderTransform>
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<TextBlock Margin="7.833,0,0,0" TextWrapping="Wrap" FontSize="26.667" Foreground="White" FontWeight="Bold"><Run FontFamily="Segoe UI Semibold" Text="Kirusoft"/><Run Text=" "/><Run FontFamily="Segoe UI Light" Text="Dev."/></TextBlock>
</Grid>
</Grid>
</UserControl>
I'm trying to create an animation in one of my apps.
The animation is a Control that has a StoryBoard defined in its Resources and starts this StoryBoard after it's been loaded. Here's the (somewhat stripped) XAML:
<UserControl x:Class="LernInsel.Resources.Assets.Water" x:Name="UserControl">
<UserControl.Resources>
<Storyboard x:Key="BaseAnimation" x:Name="BaseAnimation" RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="waveLeft">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="0.45"/>
<EasingDoubleKeyFrame KeyTime="0:0:2.3" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="waveRight">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="0.45"/>
<EasingDoubleKeyFrame KeyTime="0:0:2.3" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="waveLeft_Copy">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.39"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="waveRight_Copy">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.39"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="waveLeft_Copy1">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0.41"/>
<EasingDoubleKeyFrame KeyTime="0:0:2.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="waveRight_Copy1">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0.41"/>
<EasingDoubleKeyFrame KeyTime="0:0:2.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="waveLeft_Copy2">
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.9" Value="0.35"/>
<EasingDoubleKeyFrame KeyTime="0:0:2.9" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="waveRight_Copy2">
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.9" Value="0.35"/>
<EasingDoubleKeyFrame KeyTime="0:0:2.9" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource BaseAnimation}"/>
</EventTrigger>
</UserControl.Triggers>
<Grid>
<Rectangle x:Name="Background" Fill="#FF0B5FBC" Height="88" VerticalAlignment="Top"/>
<Rectangle x:Name="waveLeft" Fill="{DynamicResource ResourceKey=waveBright}" Height="60" Margin="25.5,6,286.5,0" VerticalAlignment="Top" Opacity="0" RenderTransformOrigin="0.5,0.5"/>
<Rectangle x:Name="waveRight" Fill="{DynamicResource ResourceKey=waveBright}" Height="60" Margin="308.5,6,3.5,0" VerticalAlignment="Top" Opacity="0" RenderTransformOrigin="0.5,0.5"/>
<Rectangle x:Name="waveLeft_Copy" Fill="{DynamicResource ResourceKey=waveBright}" Height="60" Margin="-3.5,15,315.5,0" VerticalAlignment="Top" Opacity="0" RenderTransformOrigin="0.5,0.5"/>
<Rectangle x:Name="waveRight_Copy" Fill="{DynamicResource ResourceKey=waveBright}" Height="60" Margin="279.5,15,32.5,0" VerticalAlignment="Top" Opacity="0" RenderTransformOrigin="0.5,0.5"/>
<Rectangle x:Name="waveLeft_Copy1" Fill="{DynamicResource ResourceKey=waveBright}" Height="60" Margin="45.5,25,266.5,0" VerticalAlignment="Top" Opacity="0" RenderTransformOrigin="0.5,0.5"/>
<Rectangle x:Name="waveRight_Copy1" Fill="{DynamicResource ResourceKey=waveBright}" Height="60" Margin="0,25,-16.5,0" VerticalAlignment="Top" Opacity="0" RenderTransformOrigin="0.5,0.5"/>
<Rectangle x:Name="waveLeft_Copy2" Fill="{DynamicResource ResourceKey=waveBright}" Height="60" Margin="-3.5,38,315.5,0" VerticalAlignment="Top" Opacity="0" RenderTransformOrigin="0.5,0.5"/>
<Rectangle x:Name="waveRight_Copy2" Fill="{DynamicResource ResourceKey=waveBright}" Height="60" Margin="279.5,38,32.5,0" VerticalAlignment="Top" Opacity="0" RenderTransformOrigin="0.5,0.5"/>
</Grid>
</UserControl>
When I create an instance of this on my Window, this looks fine in the designer, even the animation is being displayed. At Runtime, the Control is displayed as a unicolor Box (background color), but the animation never starts. Do you see anything wrong with the way Blend created the Trigger that might keep it from working?
Thanks a lot in advance!
Sebi
Cannot reproduce this, given that waveBright is actually defined in a reachable scope of your UserControl. This might be the only weakness of that code.