A failed XAML attempt here - I'm obviously 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 properties of a ScaleTransform from a DataTrigger. Setter.Property obviously doesn't support a property path, but how can I get round this? I can't 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>
You could 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>
Setters work on elements, and Transform doesn't derive from UIElement, so I don't think you're going to be able to do this using a style.
I'd fix this in the view model: implement boolean FlipX and FlipY properties, and expose ScaleX and ScaleY properties that the ScaleTransform can bind to.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With