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.
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 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>
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 currently have the XAML:
<Grid Name="WindowGrid">
<Grid Height="66" HorizontalAlignment="Stretch" Margin="0" Name="ControlsGrid" VerticalAlignment="Bottom" Background="#B4000000" />
</Grid>
What I want is when the mouse enters the window (or even WindowGrid, preferably), the ControlGrid slides up, and vice versa (when the cursor leaves, it slides down). I have little experience in WPF/XAML, having most experience in WinForms. I understand there is a way to do this with storyboards/triggers, but the examples I've seen are too confusing.
Use event triggers to perform this:
<Grid Name="WindowGrid">
<Grid.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="ControlsGrid"
Storyboard.TargetProperty="(Grid.Height)"
From="0"
To="66"
Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="ControlsGrid"
Storyboard.TargetProperty="(Grid.Height)"
From="66"
To="0"
Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
<!--
This is a sample content to demostrate animation;
Without it 'WindowGrid' will be collapsed.
-->
<ListBox />
<Grid Margin="0" Name="ControlsGrid" VerticalAlignment="Bottom" Background="#B4000000" />
</Grid>