动画AppBarButtons，如Windows 8.1中的电子邮件应用程序

Question

Windows 8.1中的电子邮件应用程序在AppBar中有一个很好的动画。如果未启用按钮，则按钮将消失，并且左侧的按钮将移动以填充空白区域。如果在应用程序中选择了几封电子邮件，就会发生这种情况。

我应该怎么做才能在我的应用程序中添加它？

编辑：以下是我正在谈论的动画。右边的第二个按钮不再可用，因此缩小，然后其他按钮移动到空白区域。

Answer 1

AppBar控件对其中的网格使用StackPanel控件。因此，当添加一个按钮时，它会自动重新定位所有其他按钮。好吧，即使我不知道电子邮件应用程序如何处理你发布的动画，我绝对可以告诉你它的方式。希望它能给出一个想法。

以下是AppBar的XAML：

<Page.BottomAppBar >
         <AppBar  IsSticky="True" Name="AppBar" IsOpen="True" FlowDirection="RightToLeft">
              <StackPanel Name="bottomAppBar"  Orientation="Horizontal" >
                  <AppBarButton Name="btnOptions"  Icon="Setting" Width="100" Label="Options" />
                  <AppBarButton Name="btnHelp" Icon="Help" Width="100" Label="Help" />
                  <AppBarButton Name="btnExit"  Icon="Import" Width="100" Label="Exit" />
              </StackPanel>
         </AppBar>
    </Page.BottomAppBar>

假设您有一个隐藏按钮的按钮，您不想要。在这种情况下，让我们说btnHelp。

按钮应如下所示：

    <Button Content="Button" HorizontalAlignment="Left" Margin="170,79,0,0"
        VerticalAlignment="Top" Height="66" Width="131" Click="Hide_Help_Click"/>

所以点击事件应该是这样的

private async void Hide_Help_Click(object sender, RoutedEventArgs e)
{

    while (true)
    {

        await Task.Delay(1);
        if( btn.Width > 0 )
        {    
            btnHelp.Width = btnHelp.Width - 2;
        }
        else
        {
                break;
        }
     }
     btnHelp.Visibility = Visibility.Collapsed;
 }

这样，退出按钮就会出现在“帮助”按钮的顶部，所以可能它有点难看，但这就像你需要的那样。所以稍微改变一下，也许你添加一些动画，它应该与你发布的相同。