Why will some text fade in WPF but some will Not - wpf

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.

Related

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

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,

WPF Rectangle Triggers when Visible for DoubleAnimation StoryBoard

I have a DoubleAnimation which fades in/out a Rectangle in WPF
<Canvas>
<Rectangle Height="150" Width="150">
<Rectangle.Fill>
<SolidColorBrush x:Name="OpacityBrush" Color="DarkBlue" />
</Rectangle.Fill>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<StoryBoard>
<DoubleAnimation Storyboard.TargetName="OpacityBrush" Storyboard.TargetProperty="Opacity" From="0.0" To="0.6" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever" />
<DoubleAnimation Storyboard.TargetName="OpacityBrush" Storyboard.TargetProperty="Opacity" From="0.6" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever" />
</StoryBoard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Canvas>
This works fine but I want this to happen only when the rectangle is visible. Currently, it animates (I assume) in the background when it loads.
How can I change it so that it would start animation when it is visible and stop when it is hidden/collapse?
Or does it not matter? I'm just worried that it would take up resources (for the animation) as there are a lot of rectangles in the application and most of the time they are hidden.
Thanks.
Try this
1st Method
<Canvas>
<Rectangle Height="150" Width="150">
<Rectangle.Fill>
<SolidColorBrush x:Name="OpacityBrush" Color="DarkBlue" />
</Rectangle.Fill>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard Name="Anm">
<DoubleAnimation Storyboard.TargetName="OpacityBrush" Storyboard.TargetProperty="Opacity" From="0.0" To="0.6" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever" />
<DoubleAnimation Storyboard.TargetName="OpacityBrush" Storyboard.TargetProperty="Opacity" From="0.6" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
<Rectangle.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding Source={RelativeSource Self}, Path=Visibility}" Value="{x:Static Visibility.Collapsed}">
<DataTrigger.EnterActions>
<StopStoryboard BeginStoryboardName="Anm"/>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
</Canvas>
2nd Method
<Canvas>
<Rectangle Height="150" Width="150">
<Rectangle.Fill>
<SolidColorBrush x:Name="OpacityBrush" Color="DarkBlue" />
</Rectangle.Fill>
<Rectangle.Style>
<Style TargetType="Rectangle">
<Style.Triggers>
<Trigger Property="Visibility" Value="Visible">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard Name="Anm">
<DoubleAnimation Storyboard.TargetProperty="Opacity" From="0.0" To="0.6" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever" />
<DoubleAnimation Storyboard.TargetProperty="Opacity" From="0.6" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<StopStoryboard BeginStoryboardName="Anm"></StopStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
</Canvas>

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>

Smoothly resize an UIElement

I have a set of Ellipses on my Canvas.
For the MouseEnter event on each of the ellipses, I would like to resize the element so as to give a magnifying look and feel.
To make it more attractive, I want to make the change gradual (smooth/animated feeling). Any hints are appreciated.
Try something like this:
<Style x:Key="ScaleStyle" TargetType="{x:Type FrameworkElement}">
<Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform />
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="1.2" Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleX" />
<DoubleAnimation To="1.2" Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleY" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="1.0" Duration="0:0:0.1"
Storyboard.TargetProperty="RenderTransform.ScaleX" />
<DoubleAnimation To="1.0" Duration="0:0:0.1"
Storyboard.TargetProperty="RenderTransform.ScaleY" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Canvas>
<Ellipse Style="{StaticResource ScaleStyle}" Canvas.Left="100" Canvas.Top="100"
Width="200" Height="100" Stroke="Black" StrokeThickness="2" Fill="Transparent" />
</Canvas>

Generic template for Image with style and triggers

I saw this post
Given a WPF Image control, how can I make it bigger through animation on MouseEnter?
and I was wondering if I want to reuse this code on many Images in my project how can I apply a template to do so?
I tried creating a style but i got exception that I cannot use TargetName in Storyboard.TargetName="scale"
The Code:
<Image Width="100" Height="100" Source="...">
<Image.RenderTransform>
<ScaleTransform
x:Name="scale"
CenterX="50"
CenterY="50"
ScaleX="1"
ScaleY="1" />
</Image.RenderTransform>
<Image.Triggers>
<EventTrigger RoutedEvent="Image.MouseEnter">
<BeginStoryboard>
<BeginStoryboard.Storyboard>
<Storyboard Duration="0:0:0.2">
<DoubleAnimation
Storyboard.TargetName="scale"
Storyboard.TargetProperty="ScaleX"
To="1.5" />
<DoubleAnimation
Storyboard.TargetName="scale"
Storyboard.TargetProperty="ScaleY"
To="1.5" />
</Storyboard>
</BeginStoryboard.Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseLeave">
<BeginStoryboard>
<BeginStoryboard.Storyboard>
<Storyboard Duration="0:0:0.2">
<DoubleAnimation
Storyboard.TargetName="scale"
Storyboard.TargetProperty="ScaleX"
To="1" />
<DoubleAnimation
Storyboard.TargetName="scale"
Storyboard.TargetProperty="ScaleY"
To="1" />
</Storyboard>
</BeginStoryboard.Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
this is not the final answer, but I have been trying since this morning (I have to go now :-) ) but I thought this can lead you to find an answer. I still have a runtime error, but it seems to be on the right path.
<Window.Resources>
<ScaleTransform x:Key="Scale"
CenterX="50"
CenterY="50"
ScaleX="1.5"
ScaleY="1.5" />
<Style x:Key="ImageStyle" TargetType="Image">
<Style.Setters>
<Setter Property="Image.RenderTransform" Value="{StaticResource Scale}" />
</Style.Setters>
<Style.Triggers>
<EventTrigger RoutedEvent="Image.MouseEnter">
<BeginStoryboard>
<BeginStoryboard.Storyboard>
<Storyboard Duration="0:0:0.2">
<DoubleAnimation
Storyboard.Target="{DynamicResource Scale}"
Storyboard.TargetProperty="ScaleX"
To="1.5" />
<DoubleAnimation
Storyboard.Target="{DynamicResource Scale}"
Storyboard.TargetProperty="ScaleY"
To="1.5" />
</Storyboard>
</BeginStoryboard.Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Image Grid.Row="2" Width="100" Height="100" Source="C:\WindowPhoneApp7_1.PNG" Style="{StaticResource ImageStyle}">

Resources