XAML Defined StoryBoard throws nullpointer when called in C

Question

I'm trying to animate a button so the image enlarges when the user touches it and goes back to normal when he releases It but somehow the XAML Defined StoryBoard throws a nullpointer when called in C#. My code snippets are down here, I've got no clue at all what creates this problem.

XAML:

<UserControl x:Class="Mavie_Base.GUIElements.MenuButton"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
d:DesignHeight="200" d:DesignWidth="140">

<UserControl.Resources>
    <Storyboard x:Name="Enlarge">
        <DoubleAnimation Duration="0:0:1" From="60" To="66" Storyboard.TargetProperty="Height" Storyboard.TargetName="Rectangle"/>
    </Storyboard>
    <Storyboard x:Name="Normalize">
        <DoubleAnimation Duration="0:0:1" From="66" To="60" Storyboard.TargetProperty="Height" Storyboard.TargetName="Rectangle"/>
    </Storyboard>
</UserControl.Resources>
....
</UserControl>

C#:

private void IconContainer_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
    {
        Enlarge.Begin();
    }

    private void IconContainer_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e)
    {
        Normalize.Begin();
    }

Answer 1

+1 @thumbmunkeys

Though if it were me, it sounds like something you might want to add other stuff to later for interaction so I'd just let functionality already built in to handle that and then have room to add to it later if you want to add other stuff to its functionality. I'd also think (not positive, would have to check) if you go tinkering with the height property it may offset other artifacts layed out on the screen as it adjusts causing for a jumpy UI that wouldn't be very pleasing to the user.

Again, if it were me, I would probably just do something like this instead. First, instead of fiddling with the Height/Width properties that might push other parts of the screen around, hit the ScaleTransform.ScaleY (and ScaleX respectively, you'll want to play with the Values I'm sure to get the sizes you want.) for your size changes.

I'd also probably go ahead and make it into a "lookless" and stripped down Button for other options later and to handle my events like Pressed. Something like;

<Style x:Key="GrowOnPressedThingy" TargetType="Button">        
  <Setter Property="HorizontalContentAlignment" Value="Center" />
  <Setter Property="VerticalContentAlignment" Value="Center" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="Button">
        <Grid x:Name="Container"
              RenderTransformOrigin="0.5,0.5">
          <Grid.RenderTransform>
            <TransformGroup>
              <ScaleTransform />
              <SkewTransform />
              <RotateTransform />
              <TranslateTransform />
            </TransformGroup>
          </Grid.RenderTransform>
          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
              <VisualStateGroup.Transitions>
                <!-- Just left for reference -->
              </VisualStateGroup.Transitions>
              <VisualState x:Name="Normal" />
              <VisualState x:Name="MouseOver"/>
              <VisualState x:Name="Pressed">
                <Storyboard>
                  <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Container" 
                                                 Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                    <EasingDoubleKeyFrame KeyTime="0:0:0.01" Value="1.05" />
                  </DoubleAnimationUsingKeyFrames>
                  <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Container" 
                                                 Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                    <EasingDoubleKeyFrame KeyTime="0:0:0.01" Value="1.05" />
                  </DoubleAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="Disabled"/>
            </VisualStateGroup>
            <VisualStateGroup x:Name="FocusStates">
              <VisualState x:Name="Focused"/>
              <VisualState x:Name="Unfocused" />
            </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>

          <ContentControl x:Name="contentPresenter"
                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                          Content="{TemplateBinding Content}"
                          ContentTemplate="{TemplateBinding ContentTemplate}"
                                              IsTabStop="False"/>

        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

This way you could just do a quick... ;

<Button Content="whatever/image/path/blah.png" 
        Style="{StaticResource GrowOnPressedThingy}"/>

...wherever you need it, and you've got it setup to go easily add other neat UI tricks you might think of in the future. Just a shot in the dark, but maybe worth considering.

Anyway, hope this helps. Cheers

Answer 2

Try casting the targetproperty:

Storyboard.TargetProperty="(FrameworkElement.Height)"