Silverlight椭圆高度转换

我正在学习WP7的Silverlight，并遇到了一个小问题：我想将高度转换为1并绕中心转换（因此它看起来像旋转））。代码：Silverlight椭圆高度转换

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

来源

2011-09-21 SBoss

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

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

例如

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

希望这会有所帮助。

来源

2011-09-21 11:43:15

谢谢你的工作！但是，你怎样才能将高度设定为50％？所以按钮占50％，边框占50％？似乎不适用于50 * – SBoss

如果您想使用百分比来设置高度，则需要使用Grid作为布局控件。然后设置行高度0.5 *。 –

再次感谢您的帮助。 – SBoss

也许这就是你想要的。

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

来源

2011-09-21 12:00:06

Silverlight椭圆高度转换

回答

相关问题