Use WPF DoubleAnimation multiple times (ReSharper shows error in XAML) - wpf

I want to use a DoubleAnimation multiple times. Here the code:
<Window x:Class="Project.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Window.Resources>
<DoubleAnimation x:Key="LeftAnimation" Storyboard.TargetProperty="(Canvas.Left)" From="0" To="100" />
<DoubleAnimation x:Key="TopAnimation" Storyboard.TargetProperty="(Canvas.Top)" From="0" To="100" />
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<BeginStoryboard>
<Storyboard Storyboard.TargetName="AnimatedBorder1">
<StaticResourceExtension ResourceKey="LeftAnimation" />
</Storyboard>
</BeginStoryboard>
<BeginStoryboard>
<Storyboard Storyboard.TargetName="AnimatedBorder2">
<StaticResourceExtension ResourceKey="LeftAnimation" />
<StaticResourceExtension ResourceKey="TopAnimation" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Window.Triggers>
<Canvas>
<Border x:Name="AnimatedBorder1" Background="Blue" Width="20" Height="20" />
<Border x:Name="AnimatedBorder2" Background="Red" Width="20" Height="20" />
</Canvas>
</Window>
The code works fine, but ReSharper underlines LeftAnimation in line <StaticResourceExtension ResourceKey="LeftAnimation" /> and says: "Invalid resource type: expected type is 'TriggerCollection', actual type is 'DoubleAnimation'."
Is that really a problem or is this a bug in ReSharper (version 9.2)?

Here is an editted solution:
Resources:
<Window.Resources>
<TimelineCollection x:Key="TimelinesCollectionKey1">
<DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" From="0" To="100" />
</TimelineCollection>
<TimelineCollection x:Key="TimelinesCollectionKey2">
<DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)" From="0" To="100" />
</TimelineCollection></Window.Resources>
Triggers:
<Window.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<BeginStoryboard>
<Storyboard Storyboard.TargetName="AnimatedBorder1">
<!--<StaticResourceExtension ResourceKey="LeftAnimation" />-->
<Storyboard.Children>
<ParallelTimeline Children="{StaticResource TimelinesCollectionKey1}"></ParallelTimeline>
</Storyboard.Children>
</Storyboard>
</BeginStoryboard>
<BeginStoryboard>
<Storyboard Storyboard.TargetName="AnimatedBorder2">
<Storyboard.Children>
<ParallelTimeline Children="{StaticResource TimelinesCollectionKey1}"></ParallelTimeline>
<ParallelTimeline Children="{StaticResource TimelinesCollectionKey2}"></ParallelTimeline>
</Storyboard.Children>
</Storyboard>
</BeginStoryboard>
</EventTrigger></Window.Triggers>
Targets:
<Canvas>
<Border x:Name="AnimatedBorder1" Background="Blue" Width="20" Height="20" />
<Border x:Name="AnimatedBorder2" Background="Red" Width="20" Height="20" /></Canvas>
Regards,

Related

Why will some text fade in WPF but some will Not

I am creating a WPF app in visual studio using c#. I am trying to make text fade from one color to another. Some of the text will change color but some just stays one singular color. The code appears to be exactly the same so I do not know what I am doing wrong.
// This is the working code
UserControl x:Class="MiniBiotronWPF2.Home"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:MiniBiotronWPF2"
mc:Ignorable="d"
d:DesignHeight="510" d:DesignWidth="650">
<Grid>
<TextBlock
x:Name="MyChangingColorText"
Margin="41,123,10,261" FontSize="48" FontWeight="Bold" Text="Welcome to Mini Biotron">
<TextBlock.Foreground>
<SolidColorBrush x:Name="MySolidColorBrush" Color="White"/>
</TextBlock.Foreground>
<TextBlock.Triggers>
<EventTrigger RoutedEvent="TextBlock.Loaded">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="MySolidColorBrush"
Storyboard.TargetProperty="Color"
From="#FF383535" To="White" Duration="0:0:3"
AutoReverse="false" RepeatBehavior="0:0:3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</TextBlock.Triggers>
</TextBlock>
<TextBlock
x:Name="MyChangingColorText1"
Margin="188,220,156,168" FontSize="48" FontWeight="Bold" Text="Beta Edition">
<TextBlock.Foreground>
<SolidColorBrush x:Name="MySolidColorBrush1" Color="White"/>
</TextBlock.Foreground>
<TextBlock.Triggers>
<EventTrigger RoutedEvent="TextBlock.Loaded">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="MySolidColorBrush1"
Storyboard.TargetProperty="Color"
From="#FF383535" To="White" Duration="0:0:3"
AutoReverse="false" RepeatBehavior="0:0:3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</TextBlock.Triggers>
</TextBlock>
//This is the rest of the program which does not fade
<TextBlock
x:Name="MyChangingColorText2"
Margin="200,385,255,0" FontSize="16" FontWeight="Bold" Text=" Created by Lane Whitten ">
<TextBlock.Foreground>
<SolidColorBrush x:Name="MySolidColorBrush2" Color="White"/>
</TextBlock.Foreground>
<TextBlock.Triggers>
<EventTrigger RoutedEvent="TextBlock.Loaded">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="MySolidColorBrush1"
Storyboard.TargetProperty="Color"
From="#FF383535" To="White" Duration="0:0:3"
AutoReverse="false" RepeatBehavior="0:0:3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</TextBlock.Triggers>
</TextBlock>
<TextBlock
x:Name="MyChangingColorText3"
Margin="200,432,25,0" FontSize="12" FontWeight="Bold" Text=" Copyright © 2018 UW BIOTRON">
<TextBlock.Foreground>
<SolidColorBrush x:Name="MySolidColorBrush3" Color="White"/>
</TextBlock.Foreground>
<TextBlock.Triggers>
<EventTrigger RoutedEvent="TextBlock.Loaded">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="MySolidColorBrush1"
Storyboard.TargetProperty="Color"
From="#FF383535" To="White" Duration="0:0:3"
AutoReverse="false" RepeatBehavior="0:0:3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</TextBlock.Triggers>
</TextBlock>
<TextBlock
x:Name="MyChangingColorText4"
Margin="71,409,25,0" FontSize="12" FontWeight="Bold" Text=" For questions, concerns or to request new features contact: lanewhitten14#gmail.com ">
<TextBlock.Foreground>
<SolidColorBrush x:Name="MySolidColorBrush4" Color="White"/>
</TextBlock.Foreground>
<TextBlock.Triggers>
<EventTrigger RoutedEvent="TextBlock.Loaded">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="MySolidColorBrush"
Storyboard.TargetProperty="Color"
From="#FF383535" To="White" Duration="0:0:3"
AutoReverse="false" RepeatBehavior="0:0:3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</TextBlock.Triggers>
</TextBlock>
</Grid>
</UserControl>
Your non-working TextBlock are targeting to SolidColorBrush1 which should be MySolidColorBrush2,MySolidColorBrush3....
Instead define a Style as Resource:
<Window.Resources>
<SolidColorBrush x:Key="TextBrush">Black</SolidColorBrush>
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="{StaticResource TextBrush}"/>
<Style.Triggers>
<EventTrigger RoutedEvent="TextBlock.Loaded">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
From="#FF383535" To="White" Duration="0:0:3"
AutoReverse="false" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
Then just define Textblock in the same window:
<TextBlock Text="Text1"/>
In your first example that doesn't work, take a look at
Storyboard.TargetName="MySolidColorBrush1"
This Textblock element can't find MySolidColorBrush1 so it doesn't work correctly. You should put brushes in your UserControl.Resources so that every element in this UserControl can find the Brush resource.

How to add animation to margin property of TextBlock in WPF

I want to make TextBlock like this
But,
aTextBlock.BeginAnimation(Button.MarginProperty, myDoubleAnimation);
get this error
'System.Windows.Media.Animation.DoubleAnimation' cannot be used to animate the 'Margin' property of type 'System.Windows.Thickness'.
I have test in Xaml and get same error:
<Border CornerRadius="8" Background="Red" Margin="352,173,214,368">
<TextBlock x:Name="TestB"
Text="{Binding ElementName=MTxt,Path=Text,NotifyOnSourceUpdated=True}"
Margin="0,0,0,0"
HorizontalAlignment="Center"
Foreground="White"
FontWeight="Bold"
FontSize="16">
<TextBlock.Triggers>
<EventTrigger RoutedEvent="TextBlock.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="TestB"
Storyboard.TargetProperty="(TextBlock.Margin)"
To="2"
Duration="0:0:1" AutoReverse="True"
RepeatBehavior="2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</TextBlock.Triggers>
</TextBlock>
</Border>
What is your idea?
You need to use ThicknessAnimation for this. DoubleAnimation is for properties of Double type.
<TextBlock.Triggers>
<EventTrigger RoutedEvent="TextBlock.Loaded">
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation
Storyboard.TargetName="TestB"
Storyboard.TargetProperty="(TextBlock.Margin)"
To="2"
Duration="0:0:1" AutoReverse="True"
RepeatBehavior="2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</TextBlock.Triggers>

Can't make an animation work WPF

I can't make this animation work:
<Ellipse Opacity="0.7" Width="150" Height="50" StrokeThickness="5">
<Ellipse.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever" AutoReverse="True">
<DoubleAnimation From="0" To="100" Duration="0:0:2" Storyboard.TargetProperty="LayoutTransform.Y" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
Basically it's an Ellipse that translates from a starting point at Y to an ending point of Y. But basically, it doesn't move, and launches a mistake... Any ideas?
Animating the LayoutTransform will not move the object. What you are looking for is an animation of the RenderTransform property:
You have to put a TranslateTransform into Ellipse.RenderTransform and change Storyboard.TargetProperty:
<Ellipse Opacity="0.7" Width="150" Height="50" StrokeThickness="5" Stroke="Black">
<Ellipse.RenderTransform>
<TranslateTransform />
</Ellipse.RenderTransform>
<Ellipse.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever" AutoReverse="True">
<DoubleAnimation From="0" To="100" Duration="0:0:2"
Storyboard.TargetProperty="RenderTransform.Y" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
To keep it simple you can put ellipsis in a canvas :
<Canvas>
<Ellipse Width="30" Height="30" Fill="Purple" Canvas.Top="0" >
<Ellipse.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded" >
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:5" AutoReverse="True" Storyboard.TargetProperty="(Canvas.Top)" To="100" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
</Canvas>

using transformgroup in wpf gives an error

i was searching for combining multiple transform in an object and i found out how but the problem is when i try to put transformgroup, it gives an error "Cannot resolve all property references in the property path 'RenderTransform.ScaleX'. Verify that applicable objects support the properties."
here's my transformation code which i copied from the net ("thanks to those who made this code")
<Window.Resources>
<Storyboard x:Key="expandStoryboard">
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX"
To="1.3" Duration="0:0:0.2" />
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY"
To="1.3" Duration="0:0:0.2" />
</Storyboard>
<Storyboard x:Key="shrinkStoryboard">
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX"
To="1" Duration="0:0:0.2" />
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY"
To="1" Duration="0:0:0.2" />
</Storyboard>
<Storyboard x:Key="shakeStoryBoard">
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.Angle"
From="-5" To="5" Duration="0:0:0.05"
AutoReverse="True"
RepeatBehavior="3x"
FillBehavior="Stop" />
</Storyboard>
and this is my object (button)
<Button RenderTransformOrigin="0.5,0.5" Background="Transparent" Focusable="False" BorderBrush="Transparent" Height="220" HorizontalAlignment="Left" Margin="591,213,0,0" Name="cmdsettings" VerticalAlignment="Top" Width="189">
<StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center" Width="217" Height="220">
<Image HorizontalAlignment="Center" VerticalAlignment="Center" Source="Images/settings.png" Height="192" Width="204" />
<TextBlock VerticalAlignment="center" TextAlignment="center" FontSize="16" Width="123" Foreground="white" FontWeight="Bold" Height="20">Settings</TextBlock>
</StackPanel>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.MouseEnter">
<BeginStoryboard Storyboard="{StaticResource expandStoryboard}" />
</EventTrigger>
<EventTrigger RoutedEvent="Button.MouseLeave">
<BeginStoryboard Storyboard="{StaticResource shrinkStoryboard}" />
</EventTrigger>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard Storyboard="{StaticResource shakeStoryBoard}" />
</EventTrigger>
</Button.Triggers>
<Button.RenderTransform >
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1"/>
<RotateTransform />
</TransformGroup>
</Button.RenderTransform>
</Button>
Since Button.RenderTransform contains a TransformGroup, you would have to access the contained Transforms by its Children property:
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" ... />
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" ... />
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.Children[1].Angle" ... />

How to grow a listbox from 0 to the size of the grid in XAML

I want the value To="200.0" will be equal to the grid size automaticaly
<ListBox HorizontalAlignment="Stretch" Grid.Column="1"
Margin="12,90,12,12"
Name="listBox1"
Opacity="0.6"
VerticalAlignment="Stretch" BorderThickness="0.5" BorderBrush="White">
<ListBox.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="listBox1"
Storyboard.TargetProperty="Width"
From=" 0.0" To="200.0" />
<DoubleAnimation Storyboard.TargetName="listBox1"
Storyboard.TargetProperty="Height"
From="0.0" To="200.0" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ListBox.Triggers>
</ListBox>
try something like this:
<Grid Name="test">
<ListBox HorizontalAlignment="Stretch" Name="listBox1"
VerticalAlignment="Stretch" BorderThickness="0.5" BorderBrush="Black">
<ListBox.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="listBox1"
Storyboard.TargetProperty="Width"
From="0.0" To="{Binding ElementName=test,Path=ActualWidth}" />
<DoubleAnimation Storyboard.TargetName="listBox1"
Storyboard.TargetProperty="Height"
From="0.0" To="{Binding ElementName=test,Path=ActualHeight}" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ListBox.Triggers>
</ListBox>
</Grid>
I used ElementName binding instead of a RelativeSource binding because I can't make RelativeSource to work. I guess because the story board is not part of the same visual/control tree as the listbox.

Resources