Question

我正在为WP7学习Silverlight，并遇到了一个小问题：我想在中心周围将高度转换为1并返回（因此看起来像旋转）（它自动为宽度做）。代码：

<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

这是因为容器--- Border元素。 Border位于StackPanel中，其高度由子元素决定。因此，当椭圆的高度下降时，边界的高度也会下降。

解决方案很简单，给边框一个固定的高度。

e.g。

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

希望这有帮助。

Answer 2

也许这就是你想要的。

<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>

Silverlight椭圆高度转换

2 个答案: