Custom CommandBar to PickerFlyout

Question

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?

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

        }

Please note that **PickerFlyout** is not supported for use in UWP apps for Windows 10. Instead, use a [**Flyout**](https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.flyout) with a custom UI to present a custom picker control. — Jay Zuo, Apr 26 '16 at 06:38
Yes I'm aware of that. I just wanted to know whether Is it possible in WP 8.1. I dint succeed to implement custom flyout from PickerFlyoutBase also. So if you know please post the answer — Archana, Apr 26 '16 at 07:12

score 1 · Accepted Answer · answered Apr 27 '16 at 10:09

1

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

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

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:

answered Apr 27 '16 at 10:09

Jay Zuo

15,653
2
25
49

Thanks for the code. I ll try it. Is it not possible to implement from PickerFlyoutBase class? – Archana Apr 27 '16 at 10:13
When i try to implement from PickerFlyoutBase i was not able to add content to my custom flyout. Why is it? I edited my question. Please have a look into it,tell me what is the problem – Archana Apr 27 '16 at 11:07
@LovetoCode: I used `Flyout` class for convenience as it already has `Content` property. If you want to use `PickerFlyoutBase` class, you need to implement a property like this and overrid `CreatePresenter` method and `ShouldShowConfirmationButtons` method in your derived class. – Jay Zuo Apr 27 '16 at 11:12
I tried. But dint work. What i have to implement in CreatePresenter,ShouldShowConfirmationButtons methods? – Archana Apr 27 '16 at 11:15
@LovetoCode: `PickerFlyoutBase` class doesn't has `Content` property like `Flyout` class. So you can't set content in XAML directly. Implement from `PickerFlyoutBase` class is a bit more complicated than `Flyout` class. May I know why you want to implement from `PickerFlyoutBase` class? – Jay Zuo Apr 27 '16 at 11:25
Oh. No particular reason. I'm just learning these flyout concepts. – Archana Apr 27 '16 at 11:30
@LovetoCode: You can try to implement a `Content` property and overrid `CreatePresenter` method and `ShouldShowConfirmationButtons` method in your derived class. If you still encounter problems, you can ask a new question about it. I'll also try to implement a custom flyout from `PickerFlyoutBase` class and update my answer once I finished. – Jay Zuo Apr 27 '16 at 12:01
Ok. Thanks for the help – Archana Apr 27 '16 at 12:03
zuo can you answer this http://stackoverflow.com/questions/38770214/wp-8-1-webview-scroll-with-the-page-contents – Archana Aug 05 '16 at 04:56
Could you please look into this question http://stackoverflow.com/questions/39263601/windows-phone-8-1-implement-virtualization-for-custom-variable-sized-gridview? – Archana Sep 01 '16 at 05:54

Custom CommandBar to PickerFlyout

1 Answers1

Linked