自定义CommandBar到PickerFlyout [英] Custom CommandBar to PickerFlyout

问题描述

默认情况下，PickerFlyout具有已完成并取消按钮的commandbar.是否可以通过编程禁用完成按钮?如果没有，有什么方法可以添加自定义命令栏并替换默认命令栏?

By default PickerFlyout has commandbar that has done and cancel buttons. Is it possible to disable done button programmatically? If not is there any way to add custom command bar and replace default one?

借助于给出的答案，我尝试从PickerFlyoutBase编写自定义选择器.但是现在我无法在xaml中向弹出页面添加内容.给我一个错误消息，指出 custompicker不支持直接内容

With the help of the answer given i tried to write custom picker from PickerFlyoutBase. But now i'm not able to add content to flyout in xaml. Giving me error saying custompicker doesnt support direct content

<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;
            }
        }

        }

推荐答案

PickerFlyout class has a ConfirmationButtonsVisible property, we can use this property to disable both "Done" and "Cancel" button.

但是无法仅禁用完成"按钮.我们必须实现一个自定义的"PickerFlyout".以下是基于 Flyout ，您可以引用它来实现自己的.

But there is no way to disable only "Done" button. We have to implement a custom "PickerFlyout". Following is a simple custom "PickerFlyout" based on Flyout, you can refer to it to implement your own.

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中使用它，例如:

Then you can use it in XAML like:

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

它看起来像:

And it looks like:

这篇关于自定义CommandBar到PickerFlyout的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！