在WPF中滑动面板的最佳方式是什么?
我有一个相当简单的用户控件(请原谅我的Xaml,我只是在学习WPF),我想把它从屏幕上滑下来。为此,我制作了一个平移变换的动画(我还尝试将面板制作为画布的子对象,并使用相同的结果制作X位置的动画),但是面板移动非常不平稳,即使在相当快的新计算机上也是如此。最好的滑入滑出方式是什么(最好是使用键槽,这样它会随着惯性移动),而不会产生抖动。我只有8个按钮在面板上,所以我不认为这会是一个太大的问题 这是我正在使用的Xaml,它在Kaxaml中运行良好,但它非常急促而缓慢(在WPF应用程序中编译时也非常急促而缓慢)在WPF中滑动面板的最佳方式是什么?,wpf,performance,xaml,animation,Wpf,Performance,Xaml,Animation,我有一个相当简单的用户控件(请原谅我的Xaml,我只是在学习WPF),我想把它从屏幕上滑下来。为此,我制作了一个平移变换的动画(我还尝试将面板制作为画布的子对象,并使用相同的结果制作X位置的动画),但是面板移动非常不平稳,即使在相当快的新计算机上也是如此。最好的滑入滑出方式是什么(最好是使用键槽,这样它会随着惯性移动),而不会产生抖动。我只有8个按钮在面板上,所以我不认为这会是一个太大的问题 这是我正在使用的Xaml,它在Kaxaml中运行良好,但它非常急促而缓慢(在WPF应用程序中编译时也非常
如果您使用WPF动画的时间足够长,您会发现大面积控件实际上以一种您称之为“急促”的方式移动。即使是需要在屏幕上水平移动的小按钮,我也遇到了这个问题,我当然已经放弃了移动任何大的东西(例如窗口)。我发现,当不使用位图效果时,动画的WPF性能显著提高。在您的示例中尝试禁用它们。我用带有渐变填充的半透明实体区域替换了阴影,性能得到了提高
我还听说一些位图效果在较新版本(可能是3.5 SP1?)中提高了性能,因为更多的渲染被推到了硬件上。到目前为止,看起来最好的解决方案是使用视觉画笔,在滑入和滑出面板时移动两个静态图像。这篇博文中描述了与此类似的内容:
(切换到web archive,但这是从2008年开始的,因此无法保证它是否仍然是最好的技术)。Hi,提到的链接已断开:错误404-对我来说不起作用。转到JAPF-Blog归档:“在WPF应用程序中使用动画导航页面”@PaduMerloti在发布Junior的评论后,链接被修复。在答案中加入相关的代码片段/解释将是一个更持久的对抗link rot的对抗代理。link现在尝试显示,但由于其php代码中存在致命错误而无效。
<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="1002" Height="578">
<UserControl.Resources>
<Style TargetType="Button">
<Setter Property="Control.Padding" Value="4"/>
<Setter Property="Control.Margin" Value="10"/>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Name="backgroundGrid" Width="210" Height="210" Background="#00FFFFFF">
<Grid.BitmapEffect>
<BitmapEffectGroup>
<DropShadowBitmapEffect x:Name="buttonDropShadow" ShadowDepth="2"/>
<OuterGlowBitmapEffect x:Name="buttonGlow" GlowColor="#A0FEDF00" GlowSize="0"/>
</BitmapEffectGroup>
</Grid.BitmapEffect>
<Border x:Name="background" Margin="1,1,1,1" CornerRadius="15">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0" Color="#FF0062B6"/>
<GradientStop Offset="1" Color="#FF0089FE"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
</Border>
<Border Margin="1,1,1,0" BorderBrush="#FF000000" BorderThickness="1.5" CornerRadius="15"/>
<ContentPresenter HorizontalAlignment="Center" Margin="{TemplateBinding Control.Padding}"
VerticalAlignment="Center" Content="{TemplateBinding ContentControl.Content}"
ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Canvas>
<Grid x:Name="Panel1" Height="578" Canvas.Left="0" Canvas.Top="0">
<Grid.RenderTransform>
<TransformGroup>
<TranslateTransform x:Name="panelTranslate" X="0" Y="0"/>
</TransformGroup>
</Grid.RenderTransform>
<Grid.RowDefinitions>
<RowDefinition Height="287"/>
<RowDefinition Height="287"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="Panel1Col1"/>
<ColumnDefinition x:Name="Panel1Col2"/>
<ColumnDefinition x:Name="Panel1Col3"/>
<ColumnDefinition x:Name="Panel1Col4"/>
<!-- Set width to 0 to hide a column-->
</Grid.ColumnDefinitions>
<Button x:Name="Panel1Product1" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click" SourceName="Panel1Product1">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation BeginTime="00:00:00.6" Duration="0:0:3" From="0" Storyboard.TargetName="panelTranslate" Storyboard.TargetProperty="X" To="-1000"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Button.Triggers>
</Button>
<Button x:Name="Panel1Product2" Grid.Column="0" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Button x:Name="Panel1Product3" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Button x:Name="Panel1Product4" Grid.Column="1" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Button x:Name="Panel1Product5" Grid.Column="2" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Button x:Name="Panel1Product6" Grid.Column="2" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Button x:Name="Panel1Product7" Grid.Column="3" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Button x:Name="Panel1Product8" Grid.Column="3" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Canvas>
</UserControl>