CODEWITHSUNDEEP
c#uwp
Mg Bhadurudeen
Mg Bhadurudeen

Reputation: 1434

How to show Command bar menu at desired position?

We can expand flyout menut at desired position as.. 

FrameworkElement senderElement = sender as FrameworkElement;
myFlyout.ShowAt(sender as UIElement, e.GetPosition(sender as UIElement));

But, How to expand Command bar menu at desired position? Any workaround? IsOpen propery opens the commandbar only at its default right/left/top of the app! I want to open it near my desired control/position.

Upvotes: 0

Views: 329

Answers (1)

Jayden
Jayden

Reputation: 3286

The CommandBar does not provide ShowAt method to show the Command bar menu placed in relation to the specified element.

If you want to expand Command bar menu at desired position, you should be able to put the AppBarButton in the Flyout instead of put AppBarButton in the CommandBar.SecondaryCommands.

You can add Opening event of the CommandBar and use ShowAt method to show the Flyout in the event. When you set the IsOpen propery of CommandBar to true, the Opening event will be fired.

For example:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <CommandBar x:Name="MyCommandBar"  Width="800" HorizontalAlignment="Center" VerticalAlignment="Center" Opening="MyCommandBar_Opening">
        <CommandBar.Resources>
            <Flyout x:Name="MyBtnFly" Placement="Right">
                <StackPanel>
                    <AppBarButton x:Name="CommandBarAppBarButton" Icon="Like" Label="Like" />
                    <AppBarButton Icon="Dislike" Label="Dislike" />
                </StackPanel>
            </Flyout>
        </CommandBar.Resources>
        <AppBarToggleButton Icon="Shuffle" Label="Shuffle"  />
        <AppBarToggleButton Icon="RepeatAll" Label="Repeat" />
        <AppBarSeparator/>
        <AppBarButton Icon="Back" Label="Back" />
        <AppBarButton Icon="Stop" Label="Stop" />
        <AppBarButton Icon="Play" Label="Play" />
        <AppBarButton Icon="Forward" Label="Forward" />
        <CommandBar.Content>
            <TextBlock Text="Now playing..." Margin="12,14"/>
        </CommandBar.Content>
    </CommandBar>
    <TextBlock x:Name="MyText" Tapped="Button_Click" HorizontalAlignment="Center" VerticalAlignment="Bottom" Text="Click"></TextBlock>
</Grid>

Code behind:

private void Button_Click(object sender, TappedRoutedEventArgs e)
{
    MyCommandBar.IsOpen = true;
}

private void MyCommandBar_Opening(object sender, object e)
{
    FrameworkElement senderElement = MyText as FrameworkElement;
    MyBtnFly.ShowAt(senderElement);
}

Upvotes: 1

Related Questions