Quantcast
Channel: Rotation Animation only using XAML
Viewing all articles
Browse latest Browse all 6

Rotation Animation only using XAML

$
0
0

Hi, I am creating a Circular Gauge control using WPF & MVVM with maximum usage of DataBinding....

 I am using an Ellipse and 'Path' ( for the needle to be rotated). I am setting the the rotation angle dynamically and it varies frequently.... The cod snippet i have used is as follows...

<Path.RenderTransform><RotateTransform Angle="{Binding AngleValue}" CenterX="0" CenterY="0"/></Path.RenderTransform>

I am also using Animation to have a better visual effect for the needle rotation. I am able to achieve the functionality by writing a piece of code in my xaml.cs file. But when I tried it in XAML it doesnt work...

My XAML looks as below...

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525"><Grid>      <Ellipse Height="300" Width="300" Name="dial" StrokeThickness="10" StrokeStartLineCap="Round" Stroke="#FF6F6F70" Fill="#14000000"></Ellipse><Path Name="needle" StrokeThickness="2" 
                              Width="130" 
                              Height="10" HorizontalAlignment="Center"
                              Data="M1,1 L1,10 L156,6 z" Stretch="Fill" RenderTransformOrigin="0,0.5" Margin="165,148,35,148" Fill="#FFC00000"><Path.RenderTransform><RotateTransform Angle="{Binding AngleValue}" CenterX="0" CenterY="0"/></Path.RenderTransform><Path.Style><Style TargetType="Path"><Style.Triggers><Trigger Property="Tag" Value="1"> <!-- Mistake 1 here. Actually I want to trigger everytime the RotationTransform Angle changes or when 'AngleValue' changes --><Trigger.EnterActions><BeginStoryboard><Storyboard><DoubleAnimation Storyboard.TargetProperty="RenderTransform.Angle" To="120" Duration="0:0:1.5"/> <!-- I want to provide a 'To' value at runtime using binding
										Not a static value 120--></Storyboard></BeginStoryboard></Trigger.EnterActions></Trigger></Style.Triggers></Style></Path.Style></Path></Grid></Window>

My problems are as given below...

1. I use {Binding AngleValue} to set RotateTransform Angle. Similar way i need to set for 'Double Animation' 'To' valaue as well... But I get an error"Cannot freeze this Storyboard timeline tree for use across threads."

2. I need to trigger (Irrespective of the AngleValue) when ever 'AngleValue' property in ViewModel changes.. How to do this?

I have seen many example which explains triggering when Page Load event or when value = "SomeGivenValue". But My case is different...

Some one please help me out... Thanks in advance.


Viewing all articles
Browse latest Browse all 6

Latest Images

Trending Articles





Latest Images