Question

I modified a toggle switch so I can use an icon ontop of it. Then I added a custom property which holds the image information and it’s rotation. The definition of my image looks somewhat like this:

<Image x:Name="SwitchKnobActive" Source="{Binding Path=(common:FilterSwitchImageHolder.ActiveImage), RelativeSource={RelativeSource TemplatedParent}}" Width="50" Visibility="{Binding IsOn, RelativeSource={RelativeSource Mode=TemplatedParent}, Converter={StaticResource BoolToVisibilityConverter}, ConverterParameter=True}" RenderTransformOrigin="0.5, 0.5">
    <Image.RenderTransform>
        <TransformGroup>
            <TranslateTransform x:Name="KnobActiveTranslateTransform"/>
            <RotateTransform Angle="{Binding Path=(common:FilterSwitchImageHolder.Angle), RelativeSource={RelativeSource TemplatedParent}}" />
        </TransformGroup>
    </Image.RenderTransform>
</Image>

Now when I select the image I want to scale it by the factor of two, when I do this I loose the rotation. I tried setting the rotation again like above but it got ignored.. Is there a way how I can keep an existing transformation?

---

Edit:

The transformation on click XAML:

<VisualState x:Name="Pressed">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="RenderTransform" Storyboard.TargetName="SwitchKnobActive">
            <DiscreteObjectKeyFrame KeyTime="0">
                <DiscreteObjectKeyFrame.Value >
                    <ScaleTransform ScaleX="2" ScaleY="2"></ScaleTransform>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>

FYI: All this code is within a control template of a toggle switch.

Answer 1

How are you applying scale transform?

Usual pattern for this would be to add dummy scale transform to the transform group and modify it later. This way all other transforms are not being replaced.

<Image.RenderTransform>
    <TransformGroup>
        <ScaleTransform x:Name="myScaleTransform" ScaleX="1.0" ScaleY="1.0">
        <TranslateTransform x:Name="KnobActiveTranslateTransform"/>
        <RotateTransform Angle="{Binding Path=(common:FilterSwitchImageHolder.Angle), RelativeSource={RelativeSource TemplatedParent}}" />
    </TransformGroup>
</Image.RenderTransform>

You can later access it from xaml storyboard like this:

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
  Storyboard.TargetName="SwitchKnobActive"
  Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
  <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>