We Keep Coding

How to rotate a bitmap inside a polygon?

I defined a Polygon like this:
<!-- Draws a hexagon by specifying the vertices of a polygon -->
<Polygon x:Name="polygon"
Points="0,50 0,120 50,170 120,170 170,120 170,50 120,0 50,0"
Margin="25, 0, 25, 25"
Stroke="Red"
RenderTransformOrigin="0.5,0.5">
<Polygon.RenderTransform>
<CompositeTransform />
</Polygon.RenderTransform>
<Polygon.Fill>
<ImageBrush x:Name="imageBrush"
ImageSource="Assets/image1.jpg"
Stretch="Fill">
</ImageBrush>
</Polygon.Fill>
</Polygon>
I also defined a storyboard like this:
<Storyboard x:Name="Storyboard2">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)"
Storyboard.TargetName="polygon">
<EasingDoubleKeyFrame KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:2"
Value="-360" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
I start the polygon rotation like this:
Storyboard2.BeginTime = new TimeSpan( 0 );
Storyboard2.Begin();
The above code rotate the whole polygon as expected. However I would like to modify it, and to have the polygon stationary and just to rotate the bitmap inside the polygon.
How do I do that?
Thx

To rotate the image inside your polygon, you can try with ImageBrush.RelativeTransform property like following:
<Polygon x:Name="polygon"
Margin="25, 0, 25, 25"
Points="0,50 0,120 50,170 120,170 170,120 170,50 120,0 50,0"
Stroke="Red">
<Polygon.Fill>
<ImageBrush x:Name="imageBrush" ImageSource="Assets/Capture.PNG" Stretch="Fill">
<ImageBrush.RelativeTransform>
<CompositeTransform CenterX="0.5" CenterY="0.5" />
</ImageBrush.RelativeTransform>
</ImageBrush>
</Polygon.Fill>
</Polygon>
And change your Storyboard like following:
<Storyboard x:Name="Storyboard2">
<DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
Storyboard.TargetName="imageBrush"
Storyboard.TargetProperty="(Brush.RelativeTransform).(CompositeTransform.Rotation)">
<EasingDoubleKeyFrame KeyTime="0" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="-360" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
Here, as the target is ImageBrush, so we need to change Storyboard.TargetProperty to (Brush.RelativeTransform).(CompositeTransform.Rotation). And as the animation targets Brush.RelativeTransform, so it's a dependent animation. We need to set EnableDependentAnimation property to true to enable this animation. For more info about dependent animation, please see Dependent and independent animations.
After this, you can call Storyboard2.Begin(); to start the animation.

Since I can't test on a UWP enviro at the moment, here's how it's done in WPF, same concept...but I'm thinking the syntax may be a little different, hence why I wanted to test.
Storyboard:
<Storyboard x:Key="SpinThisBugger" RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(Brush.RelativeTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="polygon">
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="360"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
Trigger to start it:
<Window.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource SpinThisBugger}"/>
</EventTrigger>
</Window.Triggers>
The Poly:
<Polygon x:Name="polygon"
Points="0,50 0,120 50,170 120,170 170,120 170,50 120,0 50,0"
HorizontalAlignment="Center" VerticalAlignment="Center"
Stroke="Red"
RenderTransformOrigin="0.5,0.5">
<Polygon.Fill>
<ImageBrush x:Name="imageBrush"
ImageSource="Images/learn-hypnosis.jpg"
Stretch="Fill">
<ImageBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterY="0.5" CenterX="0.5"/>
<SkewTransform CenterY="0.5" CenterX="0.5"/>
<RotateTransform CenterY="0.5" CenterX="0.5"/>
<TranslateTransform/>
</TransformGroup>
</ImageBrush.RelativeTransform>
</ImageBrush>
</Polygon.Fill>
</Polygon>
...and the image I used, since it was nifty lol:

Pause/Resume WPF storyboard

I've read about a dozen articles on how to pause and resume an WPF storyboard, but I just can't get it to work.
Here's my problem: I have a User control with a storyboard. The storyboard looks like this:
<UserControl.Resources>
<Storyboard x:Key="TheStoryboard" RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="Arc1">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="90"/>
<EasingDoubleKeyFrame KeyTime="0:0:4" Value="180"/>
<EasingDoubleKeyFrame KeyTime="0:0:6" Value="270"/>
<EasingDoubleKeyFrame KeyTime="0:0:8" Value="360"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
Simple enough, it makes an ark spin forever.
Now in the code behind I have a dependency property which is bound to a Boolean value indicating when the animation should be spinning or stopped. This triggers a method which should, in theory, pause or resume the animation.
It looks something like this:
private void SetStoryBoardActivity(bool play)
{
var storyboard = (Storyboard)this.Resources["TheStoryboard"];
if (play)
{
storyboard.Resume();
}
else
{
storyboard.Pause();
}
}
The execution path enters the method as intended, however the animation doesn't stop when calling Pause(); I've tried
storyboard.Stop();
storyboard.Stop(this);
storyboard.Stop(this.Arc1);
storyboard.Freeze();
storyboard.Pause();
storyboard.Pause(this);
storyboard.Pause(this.Arc1);
but nothing seems to work. Does anyone know what I'm doing wrong?

So the Answer in my case seems to be visual states.
I manged to make this work in the following manner:
I moved the storyboard to a visual state manager like this:
<Grid x:Name="LayoutRoot">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="Animation">
<VisualState x:Name="On">
<Storyboard RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="Arc1">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="90"/>
<EasingDoubleKeyFrame KeyTime="0:0:4" Value="180"/>
<EasingDoubleKeyFrame KeyTime="0:0:6" Value="270"/>
<EasingDoubleKeyFrame KeyTime="0:0:8" Value="360"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Off"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ed:Arc x:Name="Arc1" ArcThickness="15" ArcThicknessUnit="Pixel" StartAngle="30" EndAngle="150" Fill="#C0375E77" HorizontalAlignment="Center" Height="200" Width="200" Margin="0,0,0,0" Stretch="None" Stroke="#FF204050" StrokeThickness="2" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5" >
<ed:Arc.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</ed:Arc.RenderTransform>
</ed:Arc>
</Grid>
Please note that the visual state manager is not placed in the control's resources, but in the control's main container.
Where ed is:
xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
And the SetStoryBoardActivity method becomes:
private void SetStoryBoardActivity()
{
VisualStateManager.GoToState(this, this.AnimationActive ? "On" : "Off", true);
}
Where this.AnimationActive is the dependency property mentioned in my question.

How about trying out with:
Storyboard storyboard = (Storyboard)this.Resources["TheStoryboard"];
private void BeginStoryBoard()
{
storyboard.begin(this, true);
}
private void SetStoryBoardActivity(bool play)
{
if (play)
{
storyboard.Resume(this);
}
else
{
storyboard.Pause(this);
}
}

issue in Deleting Storyboard in wpf

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="QWERTY.animation"
x:Name="Window"
Title="animation"
Width="640" Height="480">
<Window.Resources>
<Storyboard x:Key="Animation">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.FontSize)" Storyboard.TargetName="btn_1">
<EasingDoubleKeyFrame KeyTime="0" Value="11"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="10.667"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.FontWeight)" Storyboard.TargetName="btn_1">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<FontWeight>Normal</FontWeight>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.3">
<DiscreteObjectKeyFrame.Value>
<FontWeight>Bold</FontWeight>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="btn_1">
<EasingColorKeyFrame KeyTime="0" Value="#FFEAF0ED"/>
<EasingColorKeyFrame KeyTime="0:0:0.3" Value="#FF106285"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Grid x:Name="LayoutRoot">
<Button x:Name="btn_2" Content="B" Height="55" Margin="236,98,0,0" VerticalAlignment="Top" Click="btn_2_Click" HorizontalAlignment="Left" Width="72" />
<Button x:Name="btn_1" Content="A" Height="55" Margin="115,98,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="72" Click="btn_1_Click">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="#FFEAF0ED" Offset="0.9"/>
</LinearGradientBrush>
</Button.Background>
</Button>
<Button Content="Remove" HorizontalAlignment="Left" Margin="173,179,0,217" Width="75" Click="Button_Click" />
</Grid>
The design will be like below
public partial class animation : Window
{
Storyboard SB;
public animation()
{
this.InitializeComponent();
}
public void Animate(string name)
{
SB = (Storyboard)(FindResource("Animation"));
Storyboard.SetTargetName(SB.Children[0], name);
Storyboard.SetTargetName(SB.Children[1], name);
Storyboard.SetTargetName(SB.Children[2], name);
SB.Begin();
}
private void btn_1_Click(object sender, RoutedEventArgs e)
{
Button Btn_1 = (Button)sender;
Animate(btn_1.Name);
}
private void btn_2_Click(object sender, RoutedEventArgs e)
{
Button Btn_2 = (Button)sender;
Animate(Btn_2.Name);
}
private void Button_Click(object sender, RoutedEventArgs e)
{
SB.Remove();
}
}
It's output will be like below
The above result is after i clicked two buttons one by one.Then I clicked the remove button,only the button B animation is removed. But i want to remove button A and button B animation by clicking of remove button.

You can have only one TargetName at a Time assigned to the Storyboard. By using SetTargetName you are Transfering the Target to the new Button. Then when you click remove, you remove the last one you added. Take a look at this Blog its for SilverLight but should apply here. Your only other option would to be to use Style.Triggers and put your animation in the Style.
From above Link:
In this example, it might not be desirable to stop an animation on one rectangle so that the animation can start on another rectangle. Perhaps you want both animations to run at the same time. However, you cannot use the same animation object to run two separate animations at the same time, because there is only one TargetName. This does not mean that you are back to creating a separate Storyboard for every object. Instead, you need one Storyboard for each animation that you want to run concurrently (synchronously).

How to do a flip panel?

This is XAML code till now
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Flip_Panel.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="750"
Height="550"
Loaded="Window_Loaded">
<StackPanel x:Name="Panel">
<Grid Margin="10"
x:Name="Flip"
Height="480"
Width="750">
<StackPanel x:Name="Front">
<Image x:Name="Vinodh_Object"></Image>
</StackPanel>
<StackPanel x:Name="Back"
Height="480"
Width="750">
<Image x:Name="Thilak_Object"></Image>
</StackPanel>
</Grid>
<Button x:Name="FlipButton"
Width="100"
Height="25"
Content="Flip to Back"
HorizontalAlignment="Center"
Margin="0,-50,0,0"></Button>
<Button x:Name="FlipButton1"
Width="100"
Height="25"
Content="Flip to Front"
HorizontalAlignment="Center"
Margin="0,-50,0,0"></Button>
</StackPanel>
</Window>
Now When the first click event occurs I want the panel to flip and then when I again after clicking I want the panel to flip again to show the first image ?
How do i proceed from here on ?
Thanks

I use something that gives the impression of flipping. You'll want to add your own variables names but this might help you get started.
<Storyboard Name="sbFlip"
x:Key="sbFlip">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="frontSideContainer"
Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
<SplineDoubleKeyFrame KeyTime="00:00:00.2"
Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00.2"
Storyboard.TargetName="backPanel"
Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3"
Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Name="sbReverse"
x:Key="sbReverse">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="backPanel"
Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
<SplineDoubleKeyFrame KeyTime="00:00:00.2"
Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00.2"
Storyboard.TargetName="frontSideContainer"
Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3"
Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
Effectively it's changing the height of one panel and bringing into view another. It will give you a flip effect.
If you want to execute this is C# you could use something like the following:
public void Flip()
{
if (!Reversed)
{
Storyboard sbFlip = Resources["sbFlip"] as Storyboard;
sbFlip.Begin();
Reversed = true;
}
else
{
Reversed = false;
Storyboard sbReverse = Resources["sbReverse"] as Storyboard;
sbReverse.Begin();
}
}

Shrink Panel in Silverlight Storyboard

I would like to have an item's width shrink on a click of a button.
Right now I have two objects basically, when you click the button on objectA, a storyboard starts that rotates it around the x-axis and collapses it. Then it shows objectB by setting it's visibility to visible and rotates it around into view.
All I want to add is setting the width smaller while the storyboard is happening to objectA and objectB and then setting it back to normal at the end of the storyboard.
I tried setting the Thickness but I got a compile-time error complaining that it was readonly.
<ObjectAnimationUsingKeyFrames
BeginTime="00:00:00"
Storyboard.TargetName="objectA"
Storyboard.TargetProperty="(UIElement.Margin)">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Thickness Left="10" Right="10"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
I have a simple layout for now...
Here is my UI XAML:
<StackPanel>
<Border x:Name="objectA" BorderBrush="Blue" BorderThickness="1" Height="100" Width="100">
<StackPanel>
<TextBox Margin="10"></TextBox>
<Button Width="50" x:Name="btn1" Content="Flip" Click="btn1_Click"/>
</StackPanel>
<Border.Projection>
<PlaneProjection RotationX="0"></PlaneProjection>
</Border.Projection>
</Border>
<Border Visibility="Collapsed" x:Name="objectB" BorderBrush="Red" BorderThickness="1" Height="100" Width="100">
<StackPanel>
<TextBox Margin="10"></TextBox>
<Button Width="50" x:Name="btn2" Content="Flip" Click="btn2_Click"/>
</StackPanel>
<Border.Projection>
<PlaneProjection RotationX="90"></PlaneProjection>
</Border.Projection>
</Border>
Here is the storyboard...
<Storyboard x:Name="Storyboardtest">
<DoubleAnimation BeginTime="00:00:00"
Storyboard.TargetName="objectA"
Storyboard.TargetProperty="(UIElement.Projection).(RotationX)"
From="0" To="-90">
</DoubleAnimation>
<ObjectAnimationUsingKeyFrames
BeginTime="00:00:01"
Storyboard.TargetName="objectA"
Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
BeginTime="00:00:01"
Storyboard.TargetName="objectB"
Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation BeginTime="00:00:01"
Storyboard.TargetName="objectB"
Storyboard.TargetProperty="(UIElement.Projection).(RotationX)"
From="90" To="0">
</DoubleAnimation>
</Storyboard>

If it is just the visual width you want to affect, add the following to your storyboard. It will give the appearance of the controls moving into the distance and back as it flips:
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="objectA">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.5"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="objectB">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.5"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
</DoubleAnimationUsingKeyFrames>
you will also need to add the following as I used Expression blend to add the animation and it adds any required elements automatically:
<Border x:Name="objectA" BorderBrush="Blue" BorderThickness="1" Height="100" Width="100" RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<CompositeTransform/>
</Border.RenderTransform>
[Snip]
<Border Visibility="Collapsed" x:Name="objectB" BorderBrush="Red" BorderThickness="1" Height="100" Width="100" RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<CompositeTransform/>
</Border.RenderTransform>

The problem is that both the Width and Margin properties are not DependencyProperties so they can not be animated. On workaround method to accomplish this involves adding some custom DependencyProperties to your user control code-behind which can be hooked up to the storyboard and can in turn manipulate the actual properties of the objects.
For example you could add this DependencyProperty to your UserControl which basically allow the setting of the Width property of object A:
public static readonly DependencyProperty ObjectWidthProperty = DependencyProperty.Register(
"ObjectWidth",
typeof(double),
typeof(MainPage),
new PropertyMetadata(50.0, new PropertyChangedCallback(OnObjectWidthChanged)));
public double ObjectWidth
{
get { return (double)GetValue(ObjectWidthProperty); }
set { SetValue(ObjectWidthProperty, value); }
}
private static void OnObjectWidthChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
((MainPage)d).OnObjectWidthChanged(e);
}
private void OnObjectWidthChanged(DependencyPropertyChangedEventArgs e)
{
this.objectA.Width = this.ObjectWidth;
}
You could then add the following to your storyboard which would animate the width of objectA from 50 pixels down to 0:
<DoubleAnimation BeginTime="00:00:00"
Storyboard.TargetName="MyControl"
Storyboard.TargetProperty="ObjectWidth"
From="50" To="0"/>
The would also require you to add x:Name="MyControl" to your top-level UserControl. It's a little bit hacky, but it works to animate some of the underlying properties of elements that don't happen to be DependencyPropertys.