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