C# 在Windows Phone 8.1中设置网格高度不“运行”的动画
我正在尝试创建一个简单的动画,其中网格从0高度设置动画,设置值为320。这将给人一种滑动的感觉,同时也从0-1和背面设置不透明度的动画 我创建了两个故事板并给它们起了一个名字,它们是:C# 在Windows Phone 8.1中设置网格高度不“运行”的动画,c#,wpf,xaml,windows-phone-8.1,C#,Wpf,Xaml,Windows Phone 8.1,我正在尝试创建一个简单的动画,其中网格从0高度设置动画,设置值为320。这将给人一种滑动的感觉,同时也从0-1和背面设置不透明度的动画 我创建了两个故事板并给它们起了一个名字,它们是: <Page.Resources> <Storyboard x:Name="OpenSettings" Storyboard.TargetName="SettingGrid"> <DoubleAnimation Storyboard.TargetProperty
<Page.Resources>
<Storyboard x:Name="OpenSettings" Storyboard.TargetName="SettingGrid">
<DoubleAnimation Storyboard.TargetProperty="Height" Storyboard.TargetName="SettingGrid" To="320"/>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SettingGrid" To="1"/>
</Storyboard>
<Storyboard x:Name="CloseSettings">
<DoubleAnimation Storyboard.TargetProperty="Height" Storyboard.TargetName="SettingGrid" To="0"/>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SettingGrid" To="0"/>
</Storyboard>
</Page.Resources>
问题出在动画的高度。它不会更改栅格上的任何高度值。顺便说一句,不透明度动画效果很好
有人知道我怎样才能解决这个问题吗
这是我试图制作动画的网格。请注意,我是如何设置固定的开始值的,这使得动画中的from属性变得不必要
<Grid Opacity="1" Height="0" VerticalAlignment="Top" Name="SettingGrid" Background="#151515">
<CheckBox Margin="10,0,0,0" Content="Use front camera" Height="80"/>
<TextBlock Text="IP Address" Margin="10,70,10,0" FontSize="25" FontWeight="Light" Height="30" VerticalAlignment="Top"/>
<TextBox Text="127.0.0.1" Margin="10,100,10,0" Height="40" VerticalAlignment="Top" Name="IPBox"/>
<TextBlock Text="Port" Margin="10,150,10,0" FontSize="25" FontWeight="Light" Height="30" VerticalAlignment="Top"/>
<TextBox Text="12345" Margin="10,180,10,0" Height="40" VerticalAlignment="Top" Name="PortBox"/>
<Slider Margin="10,230,10,0" Height="45" VerticalAlignment="Top" Name="updateFreq" Value="20"/>
<StackPanel Margin="10,270,0,0" Orientation="Horizontal">
<TextBlock FontSize="25" VerticalAlignment="Top" Margin="10,0,0,0" FontWeight="Light" HorizontalAlignment="Left" Text="{Binding ElementName=updateFreq, Path=Value}"/>
<TextBlock Text=" Times per second" FontSize="25" FontWeight="Light" VerticalAlignment="Top"/>
</StackPanel>
</Grid>
正如我所说,为什么动画对高度没有任何作用?尝试从双动画中的值进行设置,例如:
<Storyboard x:Name="OpenSettings" Storyboard.TargetName="SettingGrid">
<DoubleAnimation Storyboard.TargetProperty="Height" Storyboard.TargetName="SettingGrid" From="0" To="320"/>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SettingGrid" To="1"/>
</Storyboard>
<Storyboard x:Name="CloseSettings">
<DoubleAnimation Storyboard.TargetProperty="Height" Storyboard.TargetName="SettingGrid" From="320" To="0"/>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SettingGrid" To="0"/>
</Storyboard>
编辑:改为使用“FrameworkElement.Height”
尝试从双动画中的值进行设置,例如:
<Storyboard x:Name="OpenSettings" Storyboard.TargetName="SettingGrid">
<DoubleAnimation Storyboard.TargetProperty="Height" Storyboard.TargetName="SettingGrid" From="0" To="320"/>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SettingGrid" To="1"/>
</Storyboard>
<Storyboard x:Name="CloseSettings">
<DoubleAnimation Storyboard.TargetProperty="Height" Storyboard.TargetName="SettingGrid" From="320" To="0"/>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SettingGrid" To="0"/>
</Storyboard>
编辑:改为使用“FrameworkElement.Height”
不要设置高度动画,而是将渲染变换添加到设置网格,并将其设置为从0到1.0的动画。另一个选项是使用一个盒内个性转换,而不是自定义动画。请参见 设置高度动画会影响场景的布局,需要与主UI线程同步。 这称为从属动画。为RenderTransform设置动画将提供非常类似的效果,但不需要额外的布局过程,可以完全在渲染线程上运行。这称为独立动画 只要可能,最好使用独立动画。应避免使用从属动画,默认情况下禁用这些动画。如果确实要继续设置“高度”属性的动画,则需要将该属性设置为true 此场景高度与渲染转换比例是文档中使用的示例 Blend是设置动画的绝佳工具。这里有一个简单的例子。Blend更喜欢CompositeTransform,因为它更灵活。如果您知道只需要缩放,那么可以使用ScaleTransform。如果希望从顶部而不是中间打开RenderTransferMorigin,可以将其更改为0.5,0.0
<Page.Resources>
<Storyboard x:Name="OpenSettings">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="SettingGrid">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="SettingGrid">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Page.Resources>
<Grid x:Name="SettingGrid" Background="{StaticResource ApplicationPageBackgroundThemeBrush}" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<CompositeTransform/>
</Grid.RenderTransform>
</Grid>
不要设置高度动画,而是将渲染变换添加到设置网格,并将其设置为从0到1.0的动画。另一个选项是使用一个盒内个性转换,而不是自定义动画。请参见 设置高度动画会影响场景的布局,需要与主UI线程同步。 这称为从属动画。为RenderTransform设置动画将提供非常类似的效果,但不需要额外的布局过程,可以完全在渲染线程上运行。这称为独立动画 只要可能,最好使用独立动画。应避免使用从属动画,默认情况下禁用这些动画。如果确实要继续设置“高度”属性的动画,则需要将该属性设置为true 此场景高度与渲染转换比例是文档中使用的示例 Blend是设置动画的绝佳工具。这里有一个简单的例子。Blend更喜欢CompositeTransform,因为它更灵活。如果您知道只需要缩放,那么可以使用ScaleTransform。如果希望从顶部而不是中间打开RenderTransferMorigin,可以将其更改为0.5,0.0
<Page.Resources>
<Storyboard x:Name="OpenSettings">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="SettingGrid">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="SettingGrid">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Page.Resources>
<Grid x:Name="SettingGrid" Background="{StaticResource ApplicationPageBackgroundThemeBrush}" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<CompositeTransform/>
</Grid.RenderTransform>
</Grid>
忘了提一下,我已经试过使用From值,但是没有什么不同。好的,你试过使用“FrameworkElement.Height”而不是“Height”吗。我将编辑我的答案,以显示您忘记提及我已尝试使用From值,但没有任何区别。好的,您是否尝试使用“FrameworkElement.Height”而不是“Height”。我将编辑我的答案以向您展示不幸的是缩放动画也缩放边界,这看起来有点奇怪…不幸的是缩放动画也缩放边界,这看起来有点奇怪。。。