2011-01-31 13 views
10

मैं एक एनीमेशन बनाने की कोशिश कर रहा हूं जहां एक आइकन (एक व्यूबॉक्स-लिपटे कैनवास पर एक xaml वेक्टर ग्राफ़िक) इसके नीचे इसके टेक्स्ट (टेक्स्टब्लॉक) के पास है।डब्ल्यूपीएफ - एक स्टैकपैन के अभिविन्यास में बदलाव को एनिमेट करना?

वर्तमान में मेरे पास क्षैतिज उन्मुख स्टैकपैनल में व्यूबॉक्स और टेक्स्टब्लॉक है। मैं अभिविन्यास को लंबवत में बदल सकता हूं, लेकिन यह एक त्वरित परिवर्तन है (आसानी से एनिमेटेड नहीं)। मैं केवल टेक्स्टब्लॉक की स्थिति को एक अनुवाद ट्रान्सफॉर्म (जिसे एनिमेटेड किया जा सकता है) के साथ सेट कर सकता हूं, लेकिन पुन: प्रयोज्य तरीके से करना मुश्किल है (यानी हार्ड-कोडिंग मानों के बिना)।

क्या कोई मुझे बता सकता है कि स्टैक-पैनल में क्षैतिज से लंबवत अभिविन्यास से संक्रमण को एनिमेट करने के लिए कोई WPF- केंद्रित तरीका है? या किसी अन्य तरीके से मैंने वांछित प्रभाव प्राप्त करने के बारे में सोचा नहीं है?

धन्यवाद सब!

+0

मेरा आंत मुझे बताता है कि आपको कुछ अनुवाद परिवर्तन करने के लिए कुछ कोड लिखना होगा, और यह सुंदर नहीं होगा। यह देखना दिलचस्प होगा कि कोई भी अच्छे तरीके से आता है या नहीं। – Ray

+0

क्या आप इसे व्यूबॉक्स के संबंध में एक निश्चित क्षेत्र में रखने की कोशिश कर रहे हैं ... उदाहरण के लिए आप व्यूबॉक्स आकार या ... के बावजूद इसे हमेशा बाईं ओर और व्यूबॉक्स के नीचे रख सकते हैं? –

+0

यह * वांछित प्रभाव * प्राप्त नहीं कर सकता है, लेकिन इस परिवर्तन को एनिमेट करने का एक आसान तरीका, जो कार्यान्वित करने के लिए कम जटिल हो सकता है, पाठ को फीका कर सकता है और फिर जब आप स्टैकपैनेल के अभिविन्यास को बदलते हैं ('DataTrigger का उपयोग करके) ', उदाहरण के लिए, और इसकी स्टार्ट-/एंड एक्शन, हालांकि मुझे नहीं पता कि आप कितनी आसानी से समय प्राप्त कर सकते हैं ...) –

उत्तर

4

ब्लेंड में एक विशेषता है जिसे FluidLayout कहा जाता है जो यह कर सकता है।

ब्लेंड

  • में एक नए राज्य समूह बनाएं, एक संक्रमण अवधि सेट और तरल पदार्थ लेआउट सक्षम करें।
  • दो राज्यों को क्षैतिज के लिए बनाएं, एक लंबवत के लिए।
  • फिर आप उनके बीच टॉगल करने के लिए एक व्यवहार का उपयोग कर सकते हैं।

क्या आप SDK जो आवश्यक फ़ाइलें Microsoft.Expression.Interactions और System.Windows.Interactivity होना चाहिए डाउनलोड कर सकते हैं मिश्रण नहीं है, तो। इनके संदर्भ जोड़ें और नीचे नमूना आज़माएं।

<Window 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:il="clr-namespace:Microsoft.Expression.Interactivity.Layout;assembly=Microsoft.Expression.Interactions" 
    xmlns:ic="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions" 
    x:Class="WpfApplication4.MainWindow" 
    x:Name="Window" 
    Title="MainWindow" 
    Width="640" Height="480"> 

    <Grid x:Name="LayoutRoot"> 
     <VisualStateManager.CustomVisualStateManager> 
      <ic:ExtendedVisualStateManager/> 
     </VisualStateManager.CustomVisualStateManager> 
     <VisualStateManager.VisualStateGroups> 
      <VisualStateGroup x:Name="Orientation" ic:ExtendedVisualStateManager.UseFluidLayout="True"> 
       <VisualStateGroup.Transitions> 
        <VisualTransition GeneratedDuration="00:00:00.3000000"/> 
       </VisualStateGroup.Transitions> 
       <VisualState x:Name="Vertical"/> 
       <VisualState x:Name="Horizontal"> 
        <Storyboard> 
         <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="stack" Storyboard.TargetProperty="(StackPanel.Orientation)"> 
          <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Orientation.Horizontal}"/> 
         </ObjectAnimationUsingKeyFrames> 
        </Storyboard> 
       </VisualState> 
      </VisualStateGroup> 
     </VisualStateManager.VisualStateGroups> 
     <StackPanel x:Name="stack" Margin="8,49,8,8"> 
      <Button Content="Button"/> 
      <Button Content="Button"/> 
      <Button Content="Button"/> 
      <Button Content="Button"/> 
      <Button Content="Button"/> 
     </StackPanel> 
     <Button HorizontalAlignment="Left" Margin="8,8,0,0" VerticalAlignment="Top" Width="97" Height="25" Content="H"> 
      <i:Interaction.Triggers> 
       <i:EventTrigger EventName="Click"> 
        <ic:GoToStateAction StateName="Horizontal"/> 
       </i:EventTrigger> 
      </i:Interaction.Triggers> 
     </Button> 
     <Button HorizontalAlignment="Left" Margin="109,8,0,0" VerticalAlignment="Top" Width="97" Height="25" Content="V"> 
      <i:Interaction.Triggers> 
       <i:EventTrigger EventName="Click"> 
        <ic:GoToStateAction StateName="Vertical"/> 
       </i:EventTrigger> 
      </i:Interaction.Triggers> 
     </Button> 
    </Grid> 
</Window> 

आप या Grid.Row, rowspan, कर्नल बदलकर तत्वों को स्थानांतरित करने के लिए राज्यों का उपयोग कर आइटम संक्रमण को संभालने के लिए एक ऐसी ही विधि का उपयोग कर सकते हैं। सब कुछ एक साथ बांधने के लिए आपको कुछ कोड की आवश्यकता हो सकती है। यदि मैं मुद्दों को हल करता हूं तो मैं एक और विस्तृत नमूना देख रहा हूं जो मैं पोस्ट करूंगा।

+0

यह ऐसा करने का एक अच्छा तरीका है। +1 –

+0

बिल्कुल सर्वोत्तम दृष्टिकोण – Stimul8d

+0

कैनवास पर तत्वों के लिए मैन्युअल रूप से एनिमेशन बनाने के द्वारा इस प्रभाव को घायल कर दें। हमारी प्रोजेक्ट टीम ब्लेंड का उपयोग नहीं कर रही है, इसलिए तरल पदार्थ एक विकल्प नहीं था। –

संबंधित मुद्दे