Geek Answers Handbook

Using a DataTrigger to Set ScaleTransform Properties

The failed XAML attempt here - I obviously am doing something stupid with the Style / Setter syntax. I just want to flip an element based on some bindings by setting the ScaleX and ScaleY a ScaleTransform from a DataTrigger . Setter.Property does not explicitly support the property path, but how can I get around this? I cannot set the whole RenderTransform property because ScaleX and ScaleY are independent. Any ideas?

 <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <StackPanel> <TextBlock FontSize="50" RenderTransformOrigin=".5,.5"> <TextBlock.Style> <Style> <Style.Triggers> <DataTrigger Binding="{Binding IsChecked, ElementName=FlipX}" Value="True"> <Setter Property="RenderTransform.ScaleX" Value="-1"/> </DataTrigger> <DataTrigger Binding="{Binding IsChecked, ElementName=FlipY}" Value="True"> <Setter Property="RenderTransform.ScaleY" Value="-1"/> </DataTrigger> </Style.Triggers> </Style> </TextBlock.Style> <TextBlock.RenderTransform> <ScaleTransform/> </TextBlock.RenderTransform> Hello World </TextBlock> <CheckBox Name="FlipX">Flip x</CheckBox> <CheckBox Name="FlipY">Flip y</CheckBox> </StackPanel> </Page>
+4
source share
3 answers

Setters work with elements, and Transform not obtained from UIElement , so I don’t think you can do it with style.

I will fix this in the view model: I will implement the boolean FlipX and FlipY and set the ScaleX and ScaleY properties with which ScaleTransform can bind.

+2
source

You can use:

 <Style.Triggers> <MultiDataTrigger> <MultiDataTrigger.Conditions> <Condition Binding="{Binding IsChecked, ElementName=FlipX}" Value="True" /> <Condition Binding="{Binding IsChecked, ElementName=FlipY}" Value="True" /> </MultiDataTrigger.Conditions> <Setter Property="RenderTransform"> <Setter.Value> <ScaleTransform ScaleX="-1" ScaleY="-1" /> </Setter.Value> </Setter> </MultiDataTrigger> <MultiDataTrigger> <MultiDataTrigger.Conditions> <Condition Binding="{Binding IsChecked, ElementName=FlipX}" Value="True" /> <Condition Binding="{Binding IsChecked, ElementName=FlipY}" Value="False" /> </MultiDataTrigger.Conditions> <Setter Property="RenderTransform"> <Setter.Value> <ScaleTransform ScaleX="-1" ScaleY="1" /> </Setter.Value> </Setter> </MultiDataTrigger> <MultiDataTrigger> <MultiDataTrigger.Conditions> <Condition Binding="{Binding IsChecked, ElementName=FlipX}" Value="False" /> <Condition Binding="{Binding IsChecked, ElementName=FlipY}" Value="True" /> </MultiDataTrigger.Conditions> <Setter Property="RenderTransform"> <Setter.Value> <ScaleTransform ScaleX="1" ScaleY="-1" /> </Setter.Value> </Setter> </MultiDataTrigger> </Style.Triggers>
+5
source
  • Either use animations, maybe one frame and instant.
  • Or encapsulate part of this structure in the ContentControl Template. You can then name the transform, and you can try customizing it with Setter.TargetName .
0
source

More articles:


All Articles