如何在 uwp win10 中以编程方式将图标传输到 Appbar 的 SecondaryCommands

Question

如何以编程方式将图标传输到 The SecondaryCommands (humberger) UWP Win10 应用栏溢出？

换句话说，

当应用程序栏在 UWP Win10 中溢出时，如何以编程方式删除主要命令中的图标并添加到次要命令（humberger）？我的代码：

 <RelativePanel  VerticalAlignment="Bottom"  Grid.Row="1" >
        <CommandBar x:Name="myappbar" RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True" >
        <AppBarButton Icon="Back"
                      Label="Back" />
        <AppBarButton Icon="Stop"
                      Label="Stop" />
        <AppBarButton Icon="Play"
                      Label="Play" />
        <AppBarButton Icon="Forward"
                      Label="Forward" />

        <CommandBar.SecondaryCommands>
            <AppBarButton Icon="Like"
                          Label="Like" />
            <AppBarButton Icon="Dislike"
                          Label="Dislike" />
        </CommandBar.SecondaryCommands>

            <!--<CommandBar.PrimaryCommands>
                <AppBarButton Icon="Like"
                              Label="Like" />
                <AppBarButton Icon="Dislike"
                              Label="Dislike" />
            </CommandBar.PrimaryCommands>-->

            <CommandBar.Content>
            <StackPanel Orientation="Horizontal">
                <AppBarButton Icon="Home" />
                <AppBarButton Icon="Like" />
            </StackPanel>
        </CommandBar.Content>
    </CommandBar>
    </RelativePanel>

Answer 1

从 Windows10 版本 1607 开始，CommandBar 引入了动态溢出功能。您可以将 IsDynamicOverflowEnabled property 设置为 true 以启用此行为。

1607之前的版本，示例如下：

<CommandBar x:Name="myappbar" VerticalAlignment="Bottom" Opening="myappbar_Opening">
    <AppBarButton Icon="Back"
              Label="Back" />
    <AppBarButton Icon="Stop"
              Label="Stop" />
    <AppBarButton Icon="Play"
              Label="Play" />
    <AppBarButton Icon="Forward"
              Label="Forward" />
    <AppBarButton Icon="Like"
                  Label="Like" />
    <AppBarButton Icon="Dislike"
                  Label="Dislike" />

    <CommandBar.Content>
        <StackPanel Orientation="Horizontal">
            <AppBarButton Icon="Home" />
            <AppBarButton Icon="Like" />
        </StackPanel>
    </CommandBar.Content>
</CommandBar>

隐藏代码：

public BlankPage()
{
    this.InitializeComponent();
    this.Loaded += Page_Loaded;
    this.SizeChanged += Page_SizeChanged;
}

private ItemsControl itemscontrol;
private double width;
private double itemwidth;
private bool commandschanged;

private void Page_Loaded(object sender, RoutedEventArgs e)
{
    itemscontrol = FindChildOfType<ItemsControl>(myappbar);
    var appbarbutton = myappbar.PrimaryCommands.FirstOrDefault() as AppBarButton;
    itemwidth = appbarbutton.ActualWidth;
    width = itemscontrol.ActualWidth;
}

private void Page_SizeChanged(object sender, SizeChangedEventArgs e)
{
    var commands = myappbar.SecondaryCommands;
    if (commands.Count != 0)
        foreach (var command in commands.Reverse())
        {
            var appbarbutton = command as AppBarButton;
            myappbar.SecondaryCommands.Remove(appbarbutton);
            myappbar.PrimaryCommands.Add(appbarbutton);
            appbarbutton.IsEnabled = true;
        }
    commandschanged = false;
}

private void myappbar_Opening(object sender, object e)
{
    var windowwidth = Window.Current.Bounds.Width;
    if (width > windowwidth && !commandschanged)
    {
        var secondarycommandsCount = Math.Ceiling((width - windowwidth) / itemwidth);
        for (int i = 0; i < secondarycommandsCount; i++)
        {
            var command = myappbar.PrimaryCommands.Last() as AppBarButton;
            Debug.WriteLine(command.IsEnabled);
            myappbar.PrimaryCommands.Remove(command);
            myappbar.SecondaryCommands.Add(command);
        }
        commandschanged = true;
    }
}

public static T FindChildOfType<T>(DependencyObject root) where T : class
{
    var queue = new Queue<DependencyObject>();
    queue.Enqueue(root);
    while (queue.Count > 0)
    {
        DependencyObject current = queue.Dequeue();
        for (int i = 0; i < VisualTreeHelper.GetChildrenCount(current); i++)
        {
            var child = VisualTreeHelper.GetChild(current, i);
            var typedChild = child as T;
            if (typedChild != null)
            {
                return typedChild;
            }
            queue.Enqueue(child);
        }
    }
    return null;
}

由于 CommandBar 关闭时我们看不到辅助命令栏，我强制所有 AppbarButton 留在主命令栏中。在 Commandbar 的 Opening 事件中，我将一些 AppbarButton 放入辅助命令栏，这会导致一个问题，如果你想在中找到这些 AppbarButton code behind 后面的code behind，我们可能无法确定这些AppbarButton属于哪个commandbar，为了解决这个问题，你可以使用ItemsControl来找到所有这些AppbarButton s.

如何在 uwp win10 中以编程方式将图标传输到 Appbar 的 SecondaryCommands

how can I transfer the icons to the SecondaryCommands of Appbar programatically in uwp win10

c#

uwp

windows-10-universal