WPF में पैनल को स्लाइड करने का सबसे अच्छा तरीका क्या है?

Question

मेरे पास एक काफी सरल उपयोगकर्ता नियंत्रण है जो मैंने बनाया है (माफ़ल माफ़ल मैं सिर्फ डब्ल्यूपीएफ सीख रहा हूं) और मैं स्क्रीन को बंद करना चाहता हूं। ऐसा करने के लिए मैं एक अनुवाद परिवर्तन को एनिमेट कर रहा हूं (मैंने पैनल को कैनवास के बच्चे को बनाने और एक ही परिणाम के साथ एक्स स्थिति को एनिमेट करने का प्रयास किया), लेकिन पैनल काफी तेजी से नए कंप्यूटर पर भी बहुत झटके से चलता है। झटके के बिना अंदर और बाहर स्लाइड करने के लिए सबसे अच्छा तरीका क्या है (अधिमानतः कीस्प्लिंस के साथ ताकि यह जड़ता के साथ आगे बढ़ सके)। मेरे पास पैनल पर केवल 8 बटन हैं, इसलिए मुझे नहीं लगता कि यह एक समस्या का बहुत अधिक होगा।

यहां एक्सएमएल का उपयोग कर रहा है, यह कक्समल में ठीक है, लेकिन यह बहुत झटकेदार और धीमा है (साथ ही साथ डब्लूपीएफ ऐप में संकलित होने पर धीमा और धीमा होना)।

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

Answer 1

यह अब तक का सबसे अच्छा समाधान जैसा दिखता है, दृश्य ब्रश का उपयोग करना और पैनलों को अंदर और बाहर स्लाइड करते समय दो स्थैतिक छवियों को स्थानांतरित करना है। इस के समान कुछ इस ब्लॉग पोस्ट में वर्णित है:

Using animated navigation pages in a WPF application

Answer 2

आप काफी लंबे समय से WPF एनिमेशन के साथ काम करते हैं, तो आप पता लगा लेंगे कि बड़े क्षेत्र नियंत्रण करते हैं, वास्तव में, में एक है कि तुम क्या 'झटकेदार' तरीके से फोन ले जाएँ। मुझे स्क्रीन पर क्षैतिज रूप से स्थानांतरित करने के लिए आवश्यक छोटे बटनों के साथ भी यह समस्या हुई है, और मैंने निश्चित रूप से कुछ भी बड़ा (उदाहरण के लिए, एक खिड़की) को स्थानांतरित करने के लिए छोड़ दिया है।

Answer 3

मुझे BitmapEffect एस का उपयोग न करने पर महत्वपूर्ण रूप से सुधारने के लिए एनिमेशन के WPF प्रदर्शन मिला है। अपने उदाहरण में उन्हें अक्षम करने का प्रयास करें। मैंने अपनी ड्रॉप छाया को अर्ध-पारदर्शी ठोस क्षेत्रों के साथ ढाल भरने और प्रदर्शन में सुधार के साथ बदल दिया।

मैंने यह भी सुना है कि कुछ बिटमैप प्रभावों ने नए संस्करणों (शायद 3.5 एसपी 1?) में प्रदर्शन में वृद्धि की है क्योंकि अधिक प्रतिपादन हार्डवेयर को धक्का दिया गया है।