[英]What is the best way to slide a panel in WPF?
我有一個相當簡單的UserControl我已經做了(原諒我的Xaml我只是學習WPF),我想滑出屏幕。 為此,我設置了一個轉換變換動畫(我也嘗試將Panel設置為畫布的子畫面,並使用相同的結果設置X位置的動畫),但即使在相當快的新計算機上,面板也會非常急動。 滑入和滑出的最佳方式是什么(最好使用KeySplines使其隨慣性移動)而不會產生晃動。 我面板上只有8個按鈕,所以我認為這不會是一個太大的問題。
這是我正在使用的Xaml,它在Kaxaml中運行良好,但它非常生澀和緩慢(以及在WPF應用程序中編譯運行時的急躁和緩慢)。
<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>
到目前為止,它看起來是最好的解決方案,是使用Visual Brush並在滑入和滑出面板時移動兩個靜態圖像。 此博客文章中描述了與此類似的內容:
在WPF應用程序中使用動畫導航頁面 (切換到Web存檔,但這是從2008年開始,所以如果它仍然是最好的技術則沒有承諾)。
我發現不使用BitmapEffect
時,動畫的WPF性能BitmapEffect
顯着提高。 嘗試在示例中禁用它們。 我用半透明的實心區域替換了我的陰影,漸變填充和性能得到了改善。
我還聽說一些位圖效果在較新的版本(可能是3.5 SP1?)中提高了性能,因為更多的渲染已被推送到硬件。
如果你使用WPF動畫足夠長的時間,你會發現大面積控件確實會以你所謂的“生澀”方式移動。 即使是需要在屏幕上水平移動的微小按鈕,我也遇到了這個問題,而且我已經放棄了移動任何大的東西(例如,一個窗口)。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.