Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using a DataTrigger to set the properties of a ScaleTransform

Tags:

wpf

xaml

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>
like image 272
Tim Rogers Avatar asked Aug 18 '11 16:08

Tim Rogers


2 Answers

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>
like image 168
CodeNaked Avatar answered Nov 15 '22 06:11

CodeNaked


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.

like image 24
Robert Rossney Avatar answered Nov 15 '22 08:11

Robert Rossney