CODEWITHSUNDEEP
wpfanimationdatatrigger
Alberto Sartori
Alberto Sartori

Reputation: 27

ImageBrush roration datatrigger

I need to begin a loop rotation on my ImageBrush, which is a style of an Ellipse control:

<Ellipse x:Name="ellStatus" Width="14" Height="14" Stroke="#000000" Style="{StaticResource statusColorStyleEllipse}" />

And this is the Style:

<Style x:Key="statusColorStyleEllipse" TargetType="{x:Type Ellipse}">
    <Setter Property="Margin" Value="0,2" />
    <Style.Triggers>
        <DataTrigger Binding="{Binding Stato}" Value="0">
            <Setter Property="Fill" Value="{StaticResource statusTransparent}" />
        </DataTrigger>
        <DataTrigger Binding="{Binding Stato}" Value="1">
            <Setter Property="Fill" Value="{StaticResource statusYellow}" />
        </DataTrigger>
        <DataTrigger Binding="{Binding Stato}" Value="2">
            <Setter Property="Fill" Value="{StaticResource statusGreen}" />
        </DataTrigger>
        <DataTrigger Binding="{Binding Stato}" Value="3">
            <Setter Property="Fill" Value="{StaticResource statusAzur}" />
        </DataTrigger>
        <DataTrigger Binding="{Binding Stato}" Value="4">
            <Setter Property="Fill" Value="{StaticResource statusGray}" />
        </DataTrigger>

        <DataTrigger Binding="{Binding MyProperty}" Value="0">
            <Setter Property="Fill" Value="{StaticResource spinningIcon}" />
            <Setter Property="Ellipse.Stroke" Value="Transparent" />
            <Setter Property="Ellipse.StrokeThickness" Value="0" />
            <Setter Property="Height" Value="25" />
            <Setter Property="Height" Value="25" />
            <DataTrigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation
                            Storyboard.TargetProperty="(Ellipse.RenderTransform).(RotateTransform.Angle)"
                            From="0.0" To="360" Duration="0:0:10" />
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.EnterActions>
        </DataTrigger>
    </Style.Triggers>
</Style>

This is the "spinningIcon" control:

<ImageBrush x:Key="spinningIcon" ImageSource="pack://application:,,,/Component/Images/Icons/icon.png" RenderOptions.BitmapScalingMode="HighQuality" Stretch="Fill"/>

Basically when "MyProperty" is set to zero, I see correctly the png but I would like to animate (360° rotation). I got no errors but my image are not spinnig. What's wrong?

I tryied to change the style but no effect

Upvotes: 0

Views: 30

Answers (1)

Clemens
Clemens

Reputation: 128013

There is apparently no RotateTransform applied to the RenderTransform of the Ellipse.

Add these Setters to the Style:

<Style x:Key="statusColorStyleEllipse" TargetType="{x:Type Ellipse}">
    <Setter Property="RenderTransform">
        <Setter.Value>
            <RotateTransform/>
        </Setter.Value>
    </Setter>
    <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
    ...
</Style>

You will also notice that the Ellipse's Stroke does not become transparent. That is because you have set Stroke="#000000" directly on the Ellipse, which takes higher precedence than a value from a Style Setter. Move the initial Stroke assignment also to the Style:

<Setter Property="Stroke" Value="Black"/>

Upvotes: 0

Related Questions