Silverlight Ellipse Height Transformation

Question

I'm learning Silverlight for WP7 and have come across a slight problem: I want to transform the height to 1 and back (so it looks like spinning) around the center (it does it automatically for width). Code:

<StackPanel x:Name="ContentPanel" Grid.Row="2" VerticalAlignment="Bottom">
    <StackPanel.Resources>
        <Storyboard x:Name="UpDownStoryBoard">
            <DoubleAnimation Storyboard.TargetName="FirstEllipse"
                Storyboard.TargetProperty="Height"
                To="1" AutoReverse="True"
                Duration="00:00:02" />
        </Storyboard>
        <Storyboard x:Name="LeftRightStoryBoard">
            <DoubleAnimation Storyboard.TargetName="FirstEllipse"
        Storyboard.TargetProperty="Width"
        To="1" AutoReverse="True"
        Duration="00:00:02" />
        </Storyboard>
    </StackPanel.Resources>
    <Border VerticalAlignment="Top">
        <Ellipse x:Name="FirstEllipse" Fill="Aqua"  Height="150" Width="300" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Border>
    <Grid x:Name="ContentGrid" HorizontalAlignment="Center" VerticalAlignment="Center" Width="438">
                <Grid.RowDefinitions>
                    <RowDefinition Height="33*" />
                    <RowDefinition Height="33*" />
                    <RowDefinition Height="33*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="33*" />
                    <ColumnDefinition Width="33*" />
                    <ColumnDefinition Width="33*" />
                </Grid.ColumnDefinitions>
                <Button Content="&lt;" Height="80" HorizontalAlignment="Center" Name="_lButton" VerticalAlignment="Center" Width="80" Grid.Row="1" Click="StartLeftRightStoryBoard" />
                <Button Content="&gt;" Height="80" HorizontalAlignment="Center" Name="_rButton" VerticalAlignment="Center" Width="80" Grid.Column="2" Grid.Row="1" Click="StartLeftRightStoryBoard" />
                <Button Content="^" Height="80" HorizontalAlignment="Center"  VerticalAlignment="Center" Name="_uButton" Width="80" Grid.Column="1" Click="StartUpDownStoryBoard" />
                <Button Content="v" Height="80" HorizontalAlignment="Center" VerticalAlignment="Center"  Name="_dButton" Width="80" Grid.Column="1" Grid.Row="2" Click="StartUpDownStoryBoard" />
            </Grid>
</StackPanel>

Answer 1

Maybe this is what you want.

<Grid x:Name="ContentPanel">
        <Grid.Resources>
            <Storyboard x:Name="UpDownStoryBoard">
                <DoubleAnimation Storyboard.TargetName="FirstEllipse"
                Storyboard.TargetProperty="Height"
                To="1" AutoReverse="True"
                Duration="00:00:02" />
            </Storyboard>
            <Storyboard x:Name="LeftRightStoryBoard">
                <DoubleAnimation Storyboard.TargetName="FirstEllipse"
        Storyboard.TargetProperty="Width"
        To="1" AutoReverse="True"
        Duration="00:00:02" />
            </Storyboard>
        </Grid.Resources>

        <Grid.RowDefinitions>
            <RowDefinition Height="0.5*" />
            <RowDefinition Height="0.5*" />
        </Grid.RowDefinitions>

        <Border>
            <Ellipse x:Name="FirstEllipse" Fill="Aqua"  Height="150" Width="300" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Border>
        <Grid Grid.Row="1" x:Name="ContentGrid" HorizontalAlignment="Center" VerticalAlignment="Center" Width="438">
            <Grid.RowDefinitions>
                <RowDefinition Height="33*" />
                <RowDefinition Height="33*" />
                <RowDefinition Height="33*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="33*" />
                <ColumnDefinition Width="33*" />
                <ColumnDefinition Width="33*" />
            </Grid.ColumnDefinitions>
            <Button Content="&lt;" Height="80" HorizontalAlignment="Center" Name="_lButton" VerticalAlignment="Center" Width="80" Grid.Row="1" Click="StartLeftRightStoryBoard" />
            <Button Content="&gt;" Height="80" HorizontalAlignment="Center" Name="_rButton" VerticalAlignment="Center" Width="80" Grid.Column="2" Grid.Row="1" Click="StartLeftRightStoryBoard" />
            <Button Content="^" Height="80" HorizontalAlignment="Center"  VerticalAlignment="Center" Name="_uButton" Width="80" Grid.Column="1" Click="StartUpDownStoryBoard" />
            <Button Content="v" Height="80" HorizontalAlignment="Center" VerticalAlignment="Center"  Name="_dButton" Width="80" Grid.Column="1" Grid.Row="2" Click="StartUpDownStoryBoard" />
        </Grid>
    </Grid>

Answer 2

It's because of the container --- Border element. The Border is in a StackPanel, and its Height is decided by the child element. So when the ellipse's height goes down, the Height of the Border goes down too.

Solution is simple, give the Border a fixed Height.

e.g.

<Border VerticalAlignment="Top" Height="400" Width="400">
      <Ellipse x:Name="FirstEllipse" Fill="Aqua"  Height="150" Width="300" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>

Hope this helps.