How to rotate a bitmap inside a polygon?

Question

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

Answer 1

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.

Answer 2

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: