2011-01-02 6 views
6

새로 만든 ListViewItem에 애니메이션을 지정하고 싶습니다. FadeIn 또는 FadeOut과 같습니다. .XAML의 ListViewItem에 애니메이션 바인딩

<ListView Height="320" HorizontalAlignment="Left" Margin="630,0,0,0" Name="listView1" VerticalAlignment="Top" Width="222" ItemsSource="{Binding}"> 
    <ListView.ItemTemplate> 
     <DataTemplate> 
      <Grid Name="mainGrid"> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition></ColumnDefinition> 
        <ColumnDefinition Width="150"></ColumnDefinition> 
       </Grid.ColumnDefinitions> 
       <Grid.Resources> 

       </Grid.Resources> 
       <Image Name="img" Source="{Binding AvatarSource}" Width="32" Margin="8"></Image> 
       <Image Source="{Binding IconSource}" Width="16" Margin="0,-28,32,0"></Image> 
       <TextBlock Grid.Column="1" Margin="0,8,0,0" TextWrapping="Wrap"> 
        <Run Text="{Binding Name}" FontWeight="Bold"></Run> 
        <LineBreak/> 
        <Run Text="{Binding StatusText}"></Run> 
       </TextBlock> 
      </Grid> 
     </DataTemplate> 
    </ListView.ItemTemplate> 
</ListView> 

jQuery를에 원하는 방식으로 액세스 할 수있는 방법이 있나요 : 나는이 XAML 코드가 $ ('#의 listViewItemId') fadeIn를();

listView1.ItemsSource를 그 안에있는 모든 컨트롤을 볼 수있는 접근 가능한 형태로 다시 바인딩 할 수 있습니까? 그리고 그들을 조작하는 것보다?

또한 C#에서는 수동으로 작업 할 필요가 없지만 ItemTemplate을 사용하여 수행 할 수 없다면 어쨌든 할 것입니다.

XAML을 처음 사용 했으므로 C#으로 XAML을 배우는 좋은 방법을 찾지 못했습니다.

답변

5

다음은 내가 원하는 가장 간단한 코드와 XAML을 게시 한 것입니다. 거기에서 가서 자신의 응용 프로그램에서 작동하게하십시오.

<Window x:Class="ListviewItemLoadedSpike.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="MainWindow" Height="350" Width="525"> 
    <Window.Resources> 
     <Storyboard x:Key="FadeIn"> 
      <DoubleAnimation 
       Storyboard.TargetProperty="Opacity" 
       Duration="0:0:2" From="0" To="1"/> 
     </Storyboard> 
     <Style TargetType="Label" x:Key="FadingLabel"> 
      <Style.Triggers> 
       <EventTrigger RoutedEvent="Loaded"> 
        <BeginStoryboard Storyboard="{StaticResource FadeIn}"/> 
       </EventTrigger> 
      </Style.Triggers> 
     </Style> 
    </Window.Resources> 
    <StackPanel> 
     <ListBox ItemsSource="{Binding Data}"> 
      <ListBox.ItemTemplate> 
       <DataTemplate> 
        <Label Content="{Binding Info}" 
          Style="{StaticResource FadingLabel}"/> 
       </DataTemplate> 
      </ListBox.ItemTemplate> 

     </ListBox> 
     <Button Name="AddButton" 
       Click="AddButton_Click"> 
      Add Item 
     </Button> 
    </StackPanel> 
</Window> 

using System.Collections.ObjectModel; 
using System.Windows; 

namespace ListviewItemLoadedSpike 
{ 
    /// <summary> 
    /// Interaction logic for MainWindow.xaml 
    /// </summary> 
    public partial class MainWindow : Window 
    { 
     private int counter; 
     public MainWindow() 
     { 
      InitializeComponent(); 
      Data=new ObservableCollection<Datum>(); 
      DataContext = this; 
     } 

     private void AddButton_Click(object sender, RoutedEventArgs e) 
     { 
      counter++; 
      Data.Add(new Datum(counter.ToString())); 
     } 

     public ObservableCollection<Datum> Data { get; set; } 
    } 

    public class Datum 
    { 
     public Datum(string info) 
     { 
      Info = info; 
     } 

     public string Info { get; set; } 
    } 
} 

행운을 비네!

+0

고맙습니다. 그렇게 간단합니다, 멋지다. –

+0

은 silverlight의 Fluid UI 동작이이 작업을 대신한다는 것을 언급 할 가치가 있습니다. 나는 Blend가 WPF에서도 이것을 처리 할 것이라고 확신한다. 제시 리버티 여기에 좋은 기사를 작성 http://jesseliberty.com/2009/11/20/silverlight-4-fluid-ui/ – Stimul8d

+0

이것은 좋은 example.but 순서대로 하나씩 listviewitem을 애니메이션 싶어요. 여기에 모든 항목이 동시에 표시됩니다. 아이템이리스 뷰에 추가되면 어떻게 페이드 애니메이션을 구현할 수 있습니까? – Sachin123

관련 문제