自定义命令栏到PickerFlyout(Custom CommandBar to PickerFly

2019-11-04 06:04发布

默认情况下, PickerFlyout具有commandbar已经完成和取消按钮。 是否有可能以编程方式禁用完成按钮? 如果不是有没有办法来添加自定义命令栏并替换默认的?

随着答案的帮助给我试图从PickerFlyoutBase编写自定义选择器。 但现在我不能够添加内容在XAML来弹出。 给我的错误说custompicker犯规支持直接内容

<Button>
     <Button.Flyout>
                        <local:custompicker>
                            <TextBlock Margin="20" FontSize="30" Text="MyPickerFlyout Test" />
                        </local:custompicker>

                    </Button.Flyout>
    </Button


 public class custompicker:PickerFlyoutBase
        {
            private AppBar OriginalAppBar;

        private CommandBar MyCommandBar;

        private Page CurrentPage;

        public custompicker()
        {
            var cancelButton = new AppBarButton();
            cancelButton.Icon = new SymbolIcon(Symbol.Cancel);
            cancelButton.Label = "Cancel";
            cancelButton.Click += (s, e) =>
            {
                this.Hide();
            };

            MyCommandBar = new CommandBar();
            MyCommandBar.PrimaryCommands.Add(cancelButton);

            this.Closed += MyPickerFlyout_Closed;
            this.Opening += MyPickerFlyout_Opening;
            this.Placement = Windows.UI.Xaml.Controls.Primitives.FlyoutPlacementMode.Full;
        }

        private void MyPickerFlyout_Opening(object sender, object e)
        {
            CurrentPage = (Windows.UI.Xaml.Window.Current.Content as Frame).Content as Page;
            if (CurrentPage != null)
            {
                OriginalAppBar = CurrentPage.BottomAppBar;

                CurrentPage.BottomAppBar = MyCommandBar;
            }
        }

        private void MyPickerFlyout_Closed(object sender, object e)
        {
            if (CurrentPage != null)
            {
                CurrentPage.BottomAppBar = OriginalAppBar;
            }
        }

        }

Answer 1:

PickerFlyout类有ConfirmationButtonsVisible属性 ,我们可以使用这个属性以禁用“完成”和“取消”按钮。

但没有办法禁用只有“完成”按钮。 我们要实现一个自定义“PickerFlyout”。 下面是一个简单的自定义“PickerFlyout”的基础上Flyout ,你可以参考它来实现自己的。

public class MyPickerFlyout : Flyout
{
    private AppBar OriginalAppBar;

    private CommandBar MyCommandBar;

    private Page CurrentPage;

    public MyPickerFlyout()
    {
        var cancelButton = new AppBarButton();
        cancelButton.Icon = new SymbolIcon(Symbol.Cancel);
        cancelButton.Label = "Cancel";
        cancelButton.Click += (s, e) =>
        {
            this.Hide();
        };

        MyCommandBar = new CommandBar();
        MyCommandBar.PrimaryCommands.Add(cancelButton);

        this.Closed += MyPickerFlyout_Closed;
        this.Opening += MyPickerFlyout_Opening;
        this.Placement = Windows.UI.Xaml.Controls.Primitives.FlyoutPlacementMode.Full;
    }

    private void MyPickerFlyout_Opening(object sender, object e)
    {
        CurrentPage = (Windows.UI.Xaml.Window.Current.Content as Frame)?.Content as Page;
        if (CurrentPage != null)
        {
            OriginalAppBar = CurrentPage.BottomAppBar;

            CurrentPage.BottomAppBar = MyCommandBar;
        }
    }

    private void MyPickerFlyout_Closed(object sender, object e)
    {
        if (CurrentPage != null)
        {
            CurrentPage.BottomAppBar = OriginalAppBar;
        }
    }
}

然后你就可以在XAML中使用它,如:

<Button Content="Show Picker">
    <Button.Flyout>
        <local:MyPickerFlyout Closed="PickerFlyout_Closed">
            <TextBlock Margin="20" FontSize="30" Text="MyPickerFlyout Test" />
        </local:MyPickerFlyout>
    </Button.Flyout>
</Button>

它看起来像:



文章来源: Custom CommandBar to PickerFlyout