Silverlight椭圆高度变换

本文关键字：变换 高度 Silverlight | 更新日期: 2023-09-27 18:09:08

我正在学习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>

Silverlight椭圆高度变换

这是因为容器——Border元素。边框在StackPanel中，它的高度由子元素决定。所以当椭圆的高度下降时，边框的高度也会下降。

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

。

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

也许这就是你想要的。

<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>
相关文章：