Forums | NoesisGUI

Posted: **23 Jun 2014, 14:51**

Hi,

I am trying to animate a control when it becomes enabled/disabled. This is what I have so far:

<UserControl
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <UserControl.Resources>
   <Style x:Key="AnimationButton" TargetType="Button">
        <Setter Property="Template">
          <Setter.Value>
            <ControlTemplate TargetType="Button">
              <Ellipse Fill="Black" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" x:Name="ellipse" Opacity="1">
                <Ellipse.RenderTransform>
                  <TranslateTransform X="0" x:Name="trans" />
                </Ellipse.RenderTransform>
              </Ellipse>
              <ControlTemplate.Triggers>
                <Trigger Property="IsEnabled" Value="False">
                  <Trigger.EnterActions>
                    <BeginStoryboard>
                      <Storyboard AutoReverse="False">
                        <DoubleAnimation Storyboard.TargetName="ellipse" Storyboard.TargetProperty="Opacity" To="0" Duration="00:00:01"></DoubleAnimation>
                        <DoubleAnimation Storyboard.TargetName="trans" Storyboard.TargetProperty="(TranslateTransform.X)" To="100" Duration="00:00:01"></DoubleAnimation>
                      </Storyboard>
                    </BeginStoryboard>
                  </Trigger.EnterActions>
                  <Trigger.ExitActions>
                    <BeginStoryboard>
                      <Storyboard AutoReverse="False">
                        <DoubleAnimation Storyboard.TargetName="ellipse" Storyboard.TargetProperty="Opacity" To="1" Duration="00:00:01"></DoubleAnimation>
                        <DoubleAnimation Storyboard.TargetName="trans" Storyboard.TargetProperty="(TranslateTransform.X)" To="0" Duration="00:00:01"></DoubleAnimation>
                      </Storyboard>
                    </BeginStoryboard>
                  </Trigger.ExitActions>
                </Trigger>
              </ControlTemplate.Triggers>
            </ControlTemplate>
          </Setter.Value>
        </Setter>
      </Style>
      </UserControl.Resources>
  <Grid>  
    <CheckBox x:Name="chk" IsChecked="True">enabled</CheckBox>
    <Button Width="200" Height="200" 
            IsEnabled="{Binding IsChecked, ElementName=chk}"
            Style="{StaticResource AnimationButton}">
    </Button>
  </Grid>
</UserControl>

This works in WPF (I've tested it in Kaxaml), but in NoesisGUI I get this exception:

Exception: Can't animate path '(TranslateTransform.x)' because root element is frozen
Noesis.Error.Check () (at Assets/Plugins/NoesisGUI/Scripts/Core/NoesisError.cs:60)

What can I do to make this work?

Posted: **27 Jun 2014, 16:19**

Sorry for the late answer

With our current animation architecture is not possible to animate a Freezable object in a template if the animation Target is that same Freezable object.

Until we find a way to fix this problem, you can animate it through the FrameworkElement where that Freezable object is set, like this:

<UserControl
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="White">
  <UserControl.Resources>
   <Style x:Key="AnimationButton" TargetType="Button">
        <Setter Property="Template">
          <Setter.Value>
            <ControlTemplate TargetType="Button">
              <Ellipse Fill="Black" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" x:Name="ellipse" Opacity="1">
                <Ellipse.RenderTransform>
                  <TranslateTransform X="0" />
                </Ellipse.RenderTransform>
              </Ellipse>
              <ControlTemplate.Triggers>
                <Trigger Property="IsEnabled" Value="False">
                  <Trigger.EnterActions>
                    <BeginStoryboard>
                      <Storyboard AutoReverse="False">
                        <DoubleAnimation Storyboard.TargetName="ellipse" Storyboard.TargetProperty="Opacity" To="0" Duration="00:00:01"></DoubleAnimation>
                        <DoubleAnimation Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" To="100" Duration="00:00:01"></DoubleAnimation>
                      </Storyboard>
                    </BeginStoryboard>
                  </Trigger.EnterActions>
                  <Trigger.ExitActions>
                    <BeginStoryboard>
                      <Storyboard AutoReverse="False">
                        <DoubleAnimation Storyboard.TargetName="ellipse" Storyboard.TargetProperty="Opacity" To="1" Duration="00:00:01"></DoubleAnimation>
                        <DoubleAnimation Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" To="0" Duration="00:00:01"></DoubleAnimation>
                      </Storyboard>
                    </BeginStoryboard>
                  </Trigger.ExitActions>
                </Trigger>
              </ControlTemplate.Triggers>
            </ControlTemplate>
          </Setter.Value>
        </Setter>
      </Style>
      </UserControl.Resources>
  <Grid>  
    <CheckBox x:Name="chk" IsChecked="True">enabled</CheckBox>
    <Button Width="200" Height="200" 
            IsEnabled="{Binding IsChecked, ElementName=chk}"
            Style="{StaticResource AnimationButton}">
    </Button>
  </Grid>
</UserControl>

Posted: **30 Jun 2014, 12:42**

Great, this is what I was looking for.

Thanks!

Forums | NoesisGUI

Cannot animate RenderTransform: 'root element is frozen'

Cannot animate RenderTransform: 'root element is frozen'

Re: Cannot animate RenderTransform: 'root element is frozen'

Re: Cannot animate RenderTransform: 'root element is frozen'