I have this:
<Border.Triggers>
<EventTrigger RoutedEvent="Border.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard TargetProperty="Background">
<ColorAnimation From="Red" To="Green" Duration="0:0:2" AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Border.Triggers>
I want to change the background when hovering over with mouse, like gradientstop or simple colors, but I get errors. And where to lookup which dependency properties I have to use at TargetProperty.
for example this doesnt work either
<Grid.Triggers>
<EventTrigger RoutedEvent="Grid.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard TargetProperty="Background.GradientStops[1].Color">
<ColorAnimation From="Red"
To="Green"
Duration="0:0:2"
AutoReverse="True"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
<BeginStoryboard>
<Storyboard TargetProperty="Background.GradientStops[1].Offset">
<DoubleAnimation From="0"
To="1"
Duration="0:0:2"
AutoReverse="True"
RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Grid.Triggers>
You should set the Background property of the Border to the Brush that you want to animate. If there is no brush there is nothing to animate. The following markup works. It animates the Color property of the SolidColorBrush that is set as the Background of the Border:
<Border Background="Transparent">
<Border.Triggers>
<EventTrigger RoutedEvent="Border.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard TargetProperty="(Border.Background).(SolidColorBrush.Color)">
<ColorAnimation From="Red" To="Green" Duration="0:0:2" AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Border.Triggers>
<TextBlock>Border....</TextBlock>
</Border>
for example this doesnt work either
Same thing here. If you want to animate the Color property of a GradientStop you need to make sure that there actually is a GradientStop to animate, i.e. you should set the Background property of the Grid to a LinearGradientBrush. This works:
<Grid>
<Grid.Background>
<LinearGradientBrush>
<GradientStop />
<GradientStop />
</LinearGradientBrush>
</Grid.Background>
<Grid.Triggers>
<EventTrigger RoutedEvent="Grid.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard TargetProperty="Background.GradientStops[0].Color">
<ColorAnimation From="Red"
To="Green"
Duration="0:0:2"
AutoReverse="True"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
<BeginStoryboard>
<Storyboard TargetProperty="Background.GradientStops[1].Offset">
<DoubleAnimation From="0"
To="1"
Duration="0:0:2"
AutoReverse="True"
RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Grid.Triggers>
<TextBlock>Grid...</TextBlock>
</Grid>
Related
How can I make Storyboard.TargetProperty=“Width” From 100 To fullscreen to adapt all screen?
I want to set it to fullscreen, not 500.
<Window.Triggers>
<EventTrigger RoutedEvent="Window.Loaded" >
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="00:00:02" Storyboard.TargetProperty="Width" From="500" To="100" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Window.Triggers>
Instead of 500 use
{Binding Source={x:Static SystemParameters.FullPrimaryScreenWidth}}
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>
I have problem, while writing a program for drawing figures from a text file. My program is currently reading figures from a text file and drawing them on the canvas, but I have problem with MouseEnter and MouseLeave Events.
I would like the polygon to change colour if there is the mouse over it. How can I do this?
The app is written in WPF, using the Canvas control.
You could use event triggers for this. For example:
<Canvas>
<Canvas.Resources>
<Style TargetType="Polygon">
<Style.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.1"
Storyboard.TargetProperty="(Polygon.Fill).(SolidColorBrush.Color)"
To="Yellow"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.1"
Storyboard.TargetProperty="(Polygon.Fill).(SolidColorBrush.Color)"
To="Blue"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Canvas.Resources>
<Polygon Fill="Blue" Canvas.Left="100" Canvas.Top="50">
<Polygon.Points>
<Point>0,0</Point>
<Point>20,0</Point>
<Point>25,5</Point>
<Point>20,20</Point>
<Point>0,20</Point>
<Point>0,0</Point>
</Polygon.Points>
</Polygon>
</Canvas>
I have multiple points and I want to draw lines connecting that points with WPF, but I want to see them drawing slowly, and I need to do that programmatically, how can I do that?
Thanks.
You can try something like this:
<Grid>
<Grid.Triggers>
<EventTrigger RoutedEvent="MouseDown">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard TargetName="MyLine">
<DoubleAnimation Storyboard.TargetProperty="X2" To="100" Duration="0:0:5"/>
<DoubleAnimation Storyboard.TargetProperty="Y2" To="100" Duration="0:0:5"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Grid.Triggers>
<Line X1="10" Y1="10" X2="20" Y2="20" Stroke="Black" Name="MyLine"/>
</Grid>
When you click on the line, you'll see it grow. You can attach starting this storyboard to whatever event or code you want, I just used a mousedown for demonstration purposes.
If you want to draw multiple lines, you can do something like this:
<Grid>
<Grid.Triggers>
<EventTrigger RoutedEvent="Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Line1" Storyboard.TargetProperty="X2" To="100" Duration="0:0:5"/>
<DoubleAnimation Storyboard.TargetName="Line1" Storyboard.TargetProperty="Y2" To="100" Duration="0:0:5"/>
<DoubleAnimation Storyboard.TargetName="Line2" Storyboard.TargetProperty="X2" To="200" Duration="0:0:5" BeginTime="0:0:5"/>
<DoubleAnimation Storyboard.TargetName="Line2" Storyboard.TargetProperty="Y2" To="0" Duration="0:0:5" BeginTime="0:0:5"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Grid.Triggers>
<Line X1="10" Y1="10" X2="10" Y2="10" Stroke="Black" Name="Line1"/>
<Line X1="100" Y1="100" X2="100" Y2="100" Stroke="Black" Name="Line2"/>
</Grid>
And, of course, it's quite possible to construct these storyboards on the fly if you can't declare them ahead of time in XAML.
I want to apply a Storyboard to my Rectangle Fill like this:
<Rectangle Name="MyRectangle"
Width="100"
Height="100">
<Rectangle.Fill>
<SolidColorBrush x:Name="MySolidColorBrush" Color="Blue" />
</Rectangle.Fill>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="MySolidColorBrush"
Storyboard.TargetProperty="Color"
From="Blue" To="Red" Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
But I want to insert the Storyboard in a Style, i tried this:
<Style xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:s="clr-namespace:System;assembly=mscorlib"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
TargetType="{x:Type Rectangle}">
<Style.Triggers>
<EventTrigger RoutedEvent="Shape.Loaded">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="MySolidColorBrush"
Storyboard.TargetProperty="Color"
From="Blue" To="Red" Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
<Setter Property="Shape.Fill" Value="Blue" x:Name="MySolidColorBrush"/>
</Style>
Using this code:
var rect = new Rectangle();
using (FileStream stream = new FileStream("myStyle.xaml", FileMode.Open))
rect.Style = XamlReader.Load(stream) as Style;
But it does not work and throws an exception. How I have to change my Style?
Change this in your Storyboard
Storyboard.TargetProperty="Color"
to
Storyboard.TargetProperty="Fill.Color"
and remove
Storyboard.TargetName="MySolidColorBrush"