Develop Reference

WPF c# XAML ismouseover animation

In my project when program starts polygon is moving on set path
What should I change to stop polygon moving, when the mouse cursor on it (when mouse cursor out of polygon, polygon must continue it's moving)
<Window x:Class="aqua3.MainWindow"
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"
xmlns:local="clr-namespace:aqua3"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<PathGeometry x:Key="pathg">
<PathFigure IsClosed="True">
<PolyLineSegment Points="0,0 200,0 200,80 0,80" />
</PathFigure>
</PathGeometry>
</Window.Resources>
<Grid Background="LightBlue">
<Canvas Margin="10" Background="LightBlue">
<Path Stroke="Red" Data="{StaticResource pathg}" Canvas.Top="10" Canvas.Left="10" />
<Polygon Name="polygon1" Stroke="Yellow" Fill="Yellow" Points="100,150 120,140 120,120 165,150 120,180 120,160 ">
<Polygon.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingPath Storyboard.TargetProperty="(Canvas.Top)"
Duration="0:0:15" RepeatBehavior="Forever"
PathGeometry="{StaticResource pathg}" Source="Y" >
</DoubleAnimationUsingPath>
<DoubleAnimationUsingPath Storyboard.TargetProperty="(Canvas.Left)"
Duration="0:0:15" RepeatBehavior="Forever"
PathGeometry="{StaticResource pathg}" Source="X" >
</DoubleAnimationUsingPath>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Polygon.Triggers>
</Polygon>
</Canvas>
</Grid>

Assign a name to your BeginStoryboard
<BeginStoryboard x:Name="Move">
To pause, add this
<EventTrigger RoutedEvent="MouseEnter">
<PauseStoryboard BeginStoryboardName="Move"/>
</EventTrigger>
To resume, add this
<EventTrigger RoutedEvent="MouseLeave">
<ResumeStoryboard BeginStoryboardName="Move"/>
</EventTrigger>

How to assign the height property of the parent container to the to parameter of DoubleAnimation in xaml?

As the title says, I want to know how to assign the height(or ActualHeight) of the container to the To parameter/attribute of DoubleAnimation in xaml?
Here is my code:
<Canvas Name="animCanvas">
<Rectangle
Name="animSquare"
Canvas.Left="0"
Fill="AliceBlue"
Stroke="Bisque"
StrokeThickness="5"
Width="100"
Height="100"
>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation
Storyboard.TargetName="animSquare"
Storyboard.TargetProperty="(Canvas.Top)"
From="0"
To="500" <!-- I want to set it to the containers height -->
Duration="0:0:1"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Canvas>

You can apply Binding to the To property of double animation like this :
To="{Binding ElementName=animSquare, Path=Height}"
I think this would solve your issue.

How to Zoom in and zoom out through animation

I have set of images which are placed in pivot control.i want zoom in the image to a specific point and then go back to its normal size through animation.how can i do that.Any help will be appreciated.
<StackPanel>
<StackPanel.Resources>
<Storyboard x:Name="story">
<DoubleAnimation Storyboard.TargetName="img"
Storyboard.TargetProperty="Height"
From="300"
To="600"
Duration="0:0:2">
</DoubleAnimation>
</Storyboard>
</StackPanel.Resources>
<Button Height="100" Width="100" Click="Button_Click"></Button>
<Image x:Name="img" Height="300" Width="200" Source="/Assets/10.png"></Image>
</StackPanel>

first tip:-
avoid writing Resources into specific control. Instead define all resources into <Page.Resources>
Now, if you want to animate some control, then you have to use Scaling property of an element.
Check below code. here, I'm pointing out how to zoom the image on any event handler.
XAML code of control
<Image x:Name="img" Source="/Assets/image1.png" RenderTransformOrigin="0.5 0.5" >
<Image.RenderTransform>
<CompositeTransform x:Name="compositeTransform" />
</Image.RenderTransform>
</Image>
Defining Storyborad
<phone:PhoneApplicationPage.Resources>
<Storyboard x:Name="story">
<DoubleAnimation Storyboard.TargetName="compositeTransform"
Storyboard.TargetProperty="ScaleX"
From="0" To="5"
Duration="0:0:2" />
<DoubleAnimation Storyboard.TargetName="compositeTransform"
Storyboard.TargetProperty="ScaleY"
From="0" To="5"
Duration="0:0:2" />
</Storyboard>
</phone:PhoneApplicationPage.Resources>
On any of the event handler
story.Begin();
Hope that helps..

If I understand your problem, then you should use the Storyboard, EventTrigger and ScaleX Instead of Height for Resize image.
Storyboarded and trigger animations
Here is one option for the loaded event.
<StackPanel>
<Button Height="100" Width="100" Click="Button_Click"></Button>
<Image x:Name="img" Height="300" Width="200" Source="/Assets/10.png">
<Image.RenderTransform>
<ScaleTransform x:Name="ImageScale" ScaleX="1" ScaleY="1"/>
</Image.RenderTransform>
<Image.Triggers>
<EventTrigger RoutedEvent="Image.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="ImageScale" Storyboard.TargetProperty="(ScaleTransform.ScaleX)" To="1.5" Duration="0:0:0.7" AutoReverse="True"/>
<DoubleAnimation Storyboard.TargetName="ImageScale" Storyboard.TargetProperty="(ScaleTransform.ScaleY)" To="1.5" Duration="0:0:0.7" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
</StackPanel>

WPF Usercontrol XAML Triggers not working

I am making an UserControl with XAML which is a simple border with a Dock Panel inside it. And inside the Dock there is an image and text bellow as properties ( i got that all figured out already).
However i need the Border that contains everything to change color on the MouseEnter event of the DockPanel and change it again to default when the MouseLeave event is triggered.
It compiles just fine. The problem is that when i use it on a normal window the Triggers are not even working and the mouse cursor doesnt change when i hover the DockPanel.
<UserControl x:Name="StartBtn" x:Class="NMis.Controls.StartCenterButton"
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"
mc:Ignorable="d"
d:DesignHeight="155" d:DesignWidth="155" FontFamily="Open Sans" TextOptions.TextFormattingMode="Display" ScrollViewer.VerticalScrollBarVisibility="Disabled" UseLayoutRounding="True" IsHitTestVisible="False">
<Border BorderThickness="1.5" Height="155" Width="155" CornerRadius="2">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop x:Name="Grad1" Color="#FF151515" Offset="0"/>
<GradientStop x:Name="Grad2" Color="#E54D9EA9" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<DockPanel x:Name="Condominio_Dock" Margin="5,10,5,5" Cursor="Hand" Background="#FFF" MouseDown="DockPanel_MouseDown">
<DockPanel.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter" SourceName="Condominio_Dock">
<BeginStoryboard>
<Storyboard>
<ColorAnimation To="#5fb357" Storyboard.TargetName="Grad1" Duration="0:0:0.5" Storyboard.TargetProperty="Color" From="#FF151515"></ColorAnimation>
<ColorAnimation To="#FF151515" Storyboard.TargetName="Grad2" Duration="0:0:0.5" Storyboard.TargetProperty="Color" From="#E54D9EA9"></ColorAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave" SourceName="Condominio_Dock">
<BeginStoryboard>
<Storyboard>
<ColorAnimation To="#FF151515" Storyboard.TargetName="Grad1" Duration="0:0:0.5" Storyboard.TargetProperty="Color" From="#5fb357"></ColorAnimation>
<ColorAnimation To="#E54D9EA9" Storyboard.TargetName="Grad2" Duration="0:0:0.5" Storyboard.TargetProperty="Color" From="#FF151515"></ColorAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</DockPanel.Triggers>
<Image UseLayoutRounding="True" Stretch="Uniform" Source="{Binding ElementName=StartBtn, Path=Image}" Height="104" DockPanel.Dock="Top"></Image>
<TextBlock Text="{Binding ElementName=StartBtn, Path=Text}" DockPanel.Dock="Top" TextTrimming="WordEllipsis" Margin="0,5,0,0" TextAlignment="Center" FontWeight="SemiBold"></TextBlock>
</DockPanel>
</Border>
</UserControl>

You can also get this problem is the dock panel doesn't have a brush. Because then its transparent it doesn't get found by the hit test.

Fixed it.
Apparently IsHitTestVisible must be true for the DockPanel use Triggers

WPF C# Roulette Game

I want to create roulette game in WPF C# below mentioned code is working properly but I want to stop wheel after 3 second but I am not getting the way to do it. Kindly help me out with same
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="WpfApplication2.MainWindow" Title="MainWindow" WindowState="Maximized">
<Canvas>
<Canvas.Background>
<ImageBrush ImageSource="Image/Background.jpg" AlignmentX="Right" AlignmentY="Bottom" Stretch="None"/>
</Canvas.Background>
<Ellipse Height="250" Width="250" Margin="200,100,-200,-100">
<Ellipse.Fill>
<ImageBrush x:Name="p2" ImageSource="Image/p2.png"/>
</Ellipse.Fill>
<Ellipse.RenderTransform>
<RotateTransform x:Name="TransRotate11" CenterX="125" CenterY="125"/>
</Ellipse.RenderTransform>
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Image.Loaded">
<BeginStoryboard>
<Storyboard x:Uid="s1" TargetProperty="Angle" RepeatBehavior="Forever">
<DoubleAnimation By="360" Duration="0:0:0.1" Storyboard.TargetName="TransRotate11" Storyboard.TargetProperty="Angle" FillBehavior="Stop"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
</Canvas>

If the duration of the animation is 0.1 seconds and you want it to run for 3 seconds, why not simply set its RepeatBehavior to 30 times:
<Storyboard x:Uid="s1">
<DoubleAnimation Storyboard.TargetName="TransRotate11"
Storyboard.TargetProperty="Angle"
By="360" Duration="0:0:0.1"
RepeatBehavior="30x" FillBehavior="Stop" />
</Storyboard>