11

私が作成したかなり単純な UserControl があり (WPF を学習している Xaml を許してください)、画面からスライドさせたいと思います。そうするために、変換変換をアニメーション化しています (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>
4

3 に答える 3

9

これまでのところ最善の解決策のように見えます。ビジュアルブラシを使用して、パネルをスライドインおよびスライドアウトするときに2つの静止画像を移動することです。これに似たものがこのブログ投稿で説明されています：

WPFアプリケーションでアニメーション化されたナビゲーションページを使用する（Webアーカイブに切り替えましたが、これは2008年のものであるため、それが依然として最良の手法であるかどうかは約束されていません）。

于 2009-01-19T16:36:56.067 に答える
5

を使用しない場合、アニメーションの WPF パフォーマンスが大幅に向上することがわかりましたBitmapEffect。あなたの例でそれらを無効にしてみてください。ドロップ シャドウを、グラデーション塗りつぶしを使用して半透明のソリッド領域に置き換え、パフォーマンスを向上させました。

また、新しいバージョン (おそらく 3.5 SP1?) では、より多くのレンダリングがハードウェアにプッシュされるため、一部のビットマップ エフェクトのパフォーマンスが向上したと聞いています。

于 2009-01-17T16:19:21.693 に答える
4

WPF アニメーションを十分に長く使用すると、大面積のコントロールが実際に、いわゆる「ぎくしゃく」な方法で移動することがわかります。画面上で水平に移動する必要がある小さなボタンでもこの問題が発生しました。また、大きなもの（ウィンドウなど）を移動することを断念しました。

于 2009-01-17T08:43:49.647 に答える