locked
Customize PickerFlyoutBase command bar

    Question

  • Is there any way to customize a flyout, PickerFlyoutBase, command bar? I know you can add or remove the confirmation buttons, but what if I want to have different buttons?, or what if I want to disable the "Accept" button?

    Alvaro Rivoir

    Saturday, September 27, 2014 6:19 PM

Answers

All replies

  • Hi,

    I'm creating a custom picker by inheriting PickerFlyoutBase, the content of the picker is returned in the method CreatePresenter correctly. I wonder if there is a way to show the content in the visible area, I mean the whole window minus the area of the status bar. I can set a margin but when the phone is rotated this approach is not good at all. I appreciate your insights.

    Thanks,

    Alvaro.


    Alvaro Rivoir

    Saturday, September 27, 2014 6:24 PM
  • Hi Alvaro,

    I find PickerFlyoutBaseclass is supported in windows phone 8.1 runtime app only, so I assume you are asking windows phone 8.1 runtime app question.

    Microsoft provides some implementations inherited on PickerFlyoutBase class, such as ListPickerFlyout, DatePickerLayout, TimePickerFlyout. There classes provides limited properties to modify the Flyout UI. You can build a new class to inherit the base class and create your own PickerFlyout object.

    An easy way to custom PickerFlyout UI is to define a Flyout in Button, write your own flyout UI in it. Close the flyout UI after the choice. Code looks like the following.

    <Grid>
    
            <StackPanel>
    
                <Button Content="hello">
    
                    <Button.Flyout>
    
                        <Flyout x:Name="flyout1">
    
                            <StackPanel>
    
                                <TextBlock Text="Make your choice?"></TextBlock>
    
                                <Button Content="Yes" Click="Button_Click"></Button>
    
                                <Button Content="No" Click="Button_Click_1"></Button>
    
                                <Button Content="I don't know" Click="Button_Click_2"></Button>
    
                            </StackPanel>
    
                        </Flyout>
    
                       
    
                    </Button.Flyout>
    
                </Button>
    
                <TextBlock x:Name="msg"></TextBlock>
    
            </StackPanel>
    
        </Grid>
    
    
    
    
    
    
    
     private void Button_Click(object sender, RoutedEventArgs e)
    
            {
    
                msg.Text = "you click the yes button";
    
                flyout1.Hide();
    
    
    
            }
    

    If I misunderstand you, please feel free to let me know.

    Regards,


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Monday, September 29, 2014 6:37 AM
    Moderator
  • Hi,

    I know I can add buttons in the flyout, but can I add a command bar? you know the bottom bar with rounded buttons and menu items, like the one in FlyoutPicker, but with customized buttons.

    Regards,

    Alvaro.


    Alvaro Rivoir

    Monday, September 29, 2014 7:50 PM
  • Hi Alvaro,

    I think you cannot add command bar to flyout. Command bar is used to Page.BottomAppBar
    property. You can see example from http://msdn.microsoft.com/en-us/library/windows/apps/xaml/windows.ui.xaml.controls.commandbar.aspx.

    Regards,



    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Wednesday, October 8, 2014 6:15 AM
    Moderator