一一显示按钮

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 进行动画处理，并且我添加了 1 秒的初始延迟，否则它太快了我无法注意到。

<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"/>

一一显示按钮

Display buttons one by one

xaml

windows-8.1