如何为新添加的项目设置动画以在wpf的listview中列出

时间:2019-08-27 11:00:55

标签: c# wpf

我正在创建一个动态列表视图function drawLink(l) { //Setup for line ctx.beginPath(); ctx.strokeStyle=colors[l.source.court]; //Draw a line between the nodes ctx.moveTo(l.source.x, l.source.y); ctx.lineTo(l.target.x, l.target.y); ctx.stroke(); ctx.beginPath(); ctx.strokeStyle = "#000"; //Setup for arrow var line_angle = Math.atan2(l.source.y - l.target.y, l.source.x - l.target.x); var x_move = Math.cos(line_angle); var y_move = Math.sin(line_angle); var on_line_x = l.target.x + x_move*11; var on_line_y = l.target.y + y_move*11; var on_line_x_2 = l.target.x + x_move*6; var on_line_y_2 = l.target.y + y_move*6; ctx.moveTo(on_line_x, on_line_y); ctx.lineTo(on_line_x - y_move, on_line_y + x_move); ctx.lineTo(on_line_x_2, on_line_y_2); ctx.lineTo(on_line_x + y_move, on_line_y - x_move); ctx.lineTo(on_line_x, on_line_y); ctx.stroke(); } ,其中包含一个虚拟UserController lstDummies

dummyItem

这是dummyItem XAML:

dummyItem item;
for (int i = 0; i < 100; i++)
{
    item = new dummyItem ();
    lstDummies.Items.Add(item);

}

这是我的XAML:

<UserControl x:Class="Kiosk.control.dummyItem"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300"
         x:Name="dummyItem">
<Grid Background="BurlyWood">
    <TextBox Text="hello world!" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBox>
</Grid>

</UserControl>

现在我希望将新项目添加到lstDummies中时使用淡入淡出效果。

1 个答案:

答案 0 :(得分:2)

这对我来说很好,即Opacity设置为0,然后在ListViewItem加载后进行动画处理:

<ListView x:Name="lstDummies">
    <ListView.Resources>
        <Style TargetType="{x:Type ListViewItem}">
            <Setter Property="Opacity" Value="0" />
            <Style.Triggers>
                <EventTrigger RoutedEvent="Loaded">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:2">
                                </DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </ListView.Resources>
    <ListView.ItemsPanel >
        <ItemsPanelTemplate >
            <UniformGrid VerticalAlignment="Top" HorizontalAlignment="Left" Columns="17"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <ListView.ItemTemplate>
        <DataTemplate>
            <Rectangle Width="50" Height="50" Fill="Green" />
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

如果您希望这些项目一件一件地褪色,则应该在调用Add之间引入延迟:

private async void Button_Click(object sender, RoutedEventArgs e)
{
    for (int i = 0; i < 100; i++)
    {
        lstDummies.Items.Add(new dummyItem());
        await Task.Delay(100);
    }
}