आइटम्स कंट्रोल

Question

पर सम्मिलन सम्मिलित करें मैं कभी-कभी WPF को अविश्वसनीय रूप से ढूंढ रहा हूं। निम्नलिखित XAML को देखते हुए, ऑब्जर्जेबल कोलेक्शन टाइमलाइन में जोड़े गए नए आइटम को एनिमेट करने के लिए ट्रिगर कैसे करें (स्लाइड डाउन, फीका)। मैंने सूची बॉक्स के लिए विभिन्न उदाहरण देखे हैं लेकिन आइटम नियंत्रण के लिए कुछ भी नहीं है।

<Grid> 
    <ScrollViewer> 
     <ItemsControl Name="TimelineItem" 
         ItemsSource="{Binding Timeline}" 
         Style="{StaticResource TimelineStyle}" 
         ItemContainerStyle="{StaticResource TweetItemStyle}"> 
      <ItemsControl.ItemTemplate> 
       <DataTemplate> 
        <Grid VerticalAlignment="Top" 
          HorizontalAlignment="Left"> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Style="{StaticResource TweetImageColumnStyle}" /> 
          <ColumnDefinition /> 
         </Grid.ColumnDefinitions> 
         <Grid.RowDefinitions> 
          <RowDefinition /> 
          <RowDefinition /> 
          <RowDefinition /> 
          <RowDefinition /> 
         </Grid.RowDefinitions> 
         <Rectangle Grid.Column="0" 
            Style="{StaticResource TweetImageStyle}"> 
          <Rectangle.Fill> 
           <ImageBrush ImageSource="{Binding ProfileImageUrl}" /> 
          </Rectangle.Fill> 
         </Rectangle> 
         <StackPanel Grid.Column="1"> 
          <Grid> 
           <Grid.ColumnDefinitions> 
            <ColumnDefinition Width="*" /> 
            <ColumnDefinition Width="Auto" /> 
           </Grid.ColumnDefinitions> 
           <TextBlock Grid.Column="0" 
              Style="{StaticResource TweetNameStyle}" 
              Text="{Binding Name}" /> 
           <TextBlock Grid.Column="1" 
              Style="{StaticResource TweetTimeStyle}" 
              Text="{Binding TimeAgo}" /> 
          </Grid> 
          <Controls:TextBlockMarkup Grid.Row="1" 
                 Grid.Column="1" 
                 Markup="{Binding MarkupText}" 
                 Style="{StaticResource TweetStyle}" /> 
         </StackPanel> 
         <Separator Grid.Row="2" 
            Grid.ColumnSpan="2" 
            Style="{StaticResource TweetSeparatorTop}" /> 
         <Separator Grid.Row="3" 
            Grid.ColumnSpan="2" 
            Style="{StaticResource TweetSeparatorBottom}" /> 
        </Grid> 
       </DataTemplate> 
      </ItemsControl.ItemTemplate> 
     </ItemsControl> 
    </ScrollViewer> 
</Grid> 

Answer 1

थोड़ा समय के बाद से मैं WPF एनिमेटेड किया है किया गया है, लेकिन इस लोडेड घटना के लिए ItemsControl की DataTemplate में एक DataTrigger की स्थापना करके काम करना चाहिए।

कुछ नोट:

1. ItemsControl
2. नाम <Grid> DataTemplate अंदर की DataTemplate के लिए निम्न XAML जोड़ें: "MyGrid"
3. MyGrid करने के लिए एक RenderTransformOriginproperty जोड़े स्थापित करने के लिए शीर्ष पर वाई मूल:
   • <Grid x:Name="MyGrid" RenderTransformOrigin="0.5,0">
4. अपने ग्रिड से Grid.RenderTransform जुड़ी संपत्ति शामिल करना न भूलें (नीचे नमूना देखने)

Xaml

<DataTemplate.Resources> 
    <Storyboard x:Key="ItemAnimation" AutoReverse="False"> 
     <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyGrid" Storyboard.TargetProperty="(UIElement.Opacity)"> 
      <EasingDoubleKeyFrame KeyTime="0" Value="0" /> 
      <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1" /> 
     </DoubleAnimationUsingKeyFrames> 
     <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyGrid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"> 
      <EasingDoubleKeyFrame KeyTime="0" Value="0" /> 
      <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1" /> 
     </DoubleAnimationUsingKeyFrames> 
    </Storyboard> 
</DataTemplate.Resources> 

<DataTemplate.Triggers> 
    <EventTrigger RoutedEvent="FrameworkElement.Loaded"> 
     <BeginStoryboard Storyboard="{StaticResource ItemAnimation}" /> 
    </EventTrigger> 
</DataTemplate.Triggers> 

RenderTransform समूहों अपने ग्रिड में जोड़े

<!-- Include in the Grid --> 
<Grid.RenderTransform> 
    <TransformGroup> 
     <ScaleTransform/> 
    </TransformGroup> 
</Grid.RenderTransform> 

यह आपको पर्याप्त करीब ले जाना चाहिए ताकि आप इसे स्वयं अनुकूलित कर सकें। एफडब्ल्यूआईडब्लू: मैंने Timeline ऑब्जेक्ट के ItemTemplate की शैली को संपादित करके एनीमेशन बनाने के लिए ब्लेंड का उपयोग किया।

एक आखिरी नोट: एनीमेशन तब होगा जब विंडो मूल संग्रह में प्रत्येक आइटम के लिए पहली बार आइटम्स कंट्रोल लोड करेगी। और जब संग्रह में जोड़ा जाता है तो एक अलग आइटम के लिए होगा। यह व्यवहार थोड़ा गड़बड़ है, इसलिए आप xaml में ट्रिगर के स्पष्ट बाध्यकारी को हटा सकते हैं और आइटम्स कंट्रोल या विंडो लोड के बाद कोड-बैक में ट्रिगर को बाध्य कर सकते हैं।

संपादित

1. मैं उदाहरण नवीनीकृत किया है, ताकि वह आपकी XAML के साथ अब काम करना चाहिए।
2. नई वस्तु को स्लाइड करने के लिए एक और एनीमेशन जोड़ा गया। असल में, यह वाई अक्ष के शीर्ष से शुरू होने पर 0% से 100% के आकार से बढ़ रहा है।
3. ऊपर से संशोधित नोट # 3 RenderTransformOrigin संपत्ति शामिल करने के लिए।
4. Grid.RenderTransform संलग्न संपत्ति को शामिल करने के लिए नोट # 4 जोड़ा गया।