Question

我有四个按钮：

<Button Grid.Row="0" Grid.Column="0" Style="{StaticResource launchButton}" Content="1" x:Name="b1" Visibility="Collapsed"/>
<Button Grid.Row="0" Grid.Column="1" Style="{StaticResource launchButton}" Content="2" x:Name="b2" Visibility="Collapsed"/>
<Button Grid.Row="1" Grid.Column="0" Style="{StaticResource launchButton}" Content="3" x:Name="b3" Visibility="Collapsed"/>
<Button Grid.Row="1" Grid.Column="1" Style="{StaticResource launchButton}" Content="4" x:Name="b4" Visibility="Collapsed"/>

我需要逐个展示它们。我用这段代码完成了它：

public MainPage()
{
    this.InitializeComponent();
    Display();
}

public async Task Display()
{            
    b1.Visibility = Visibility.Visible;
    await Task.Delay(TimeSpan.FromMilliseconds(300));
    b2.Visibility = Visibility.Visible;
    await Task.Delay(TimeSpan.FromMilliseconds(300));
    b3.Visibility = Visibility.Visible;
    await Task.Delay(TimeSpan.FromMilliseconds(300));
    b4.Visibility = Visibility.Visible;
}

但我想知道有更好的解决方案吗？可能是纯粹的XAML方法吗？

Answer 1

封闭网格中的EventTrigger怎么样（RoutedEvent默认为Loaded）？

Visibility被Opacity取代，因为DoubleAnimation可以轻松制作动画，并且我添加了一秒的初始延迟，因为否则我太快注意到了。

<Grid.Triggers>
    <EventTrigger>
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation
                    Storyboard.TargetName="b1" Storyboard.TargetProperty="Opacity"
                    To="1" Duration="0:0:0" BeginTime="0:0:1"/>
                <DoubleAnimation
                    Storyboard.TargetName="b2" Storyboard.TargetProperty="Opacity"
                    To="1" Duration="0:0:0" BeginTime="0:0:1.3"/>
                <DoubleAnimation
                    Storyboard.TargetName="b3" Storyboard.TargetProperty="Opacity"
                    To="1" Duration="0:0:0" BeginTime="0:0:1.6"/>
                <DoubleAnimation
                    Storyboard.TargetName="b4" Storyboard.TargetProperty="Opacity"
                    To="1" Duration="0:0:0" BeginTime="0:0:1.9"/>
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
</Grid.Triggers>
<Button Grid.Row="0" Grid.Column="0" Content="1" x:Name="b1" Opacity="0"/>
<Button Grid.Row="0" Grid.Column="1" Content="2" x:Name="b2" Opacity="0"/>
<Button Grid.Row="1" Grid.Column="0" Content="3" x:Name="b3" Opacity="0"/>
<Button Grid.Row="1" Grid.Column="1" Content="4" x:Name="b4" Opacity="0"/>

逐个显示按钮

1 个答案: