I'm trying to implement a custom popup menu for one of my app bar icon button (something like the PhoneFlipMenu tool). I'm using a vertical StackPanel for that:
<StackPanel x:Name="popupMenuListCommands" Grid.Row="1"
Orientation="Vertical" VerticalAlignment="Bottom"
Background="{StaticResource PhoneDisabledBrush}"
Visibility="Collapsed">
<TextBlock Text="menu item 1" Style="{StaticResource PopupMenuListCommand}" />
<TextBlock Text="menu item 2" Style="{StaticResource PopupMenuListCommand}" />
</StackPanel>
It is shown when the user presses the app bar button:
void appBarIconButtonList_Click(object sender, EventArgs e)
{
popupMenuListCommands.Visibility = Visibility.Visible;
ApplicationBar.IsVisible = false;
}
There are 2 problems:
1) How can I retrieve the effective color of the application bar to use it in my stack panel? ApplicationBar.BackgroundColor returns #00000000, but obviously the effective color of the app bar background is not this. For instance, it is a dark gray when the dark phone theme is on.
If we cannot retrieve this color dynamically, perhaps, we just need to hard code 2 color values for the dark and white themes. Then the question is what are their values?
2) How to use the color retrieved on the previous step to make the stack panel non-transparent? Now I see the main content under it even if I specify the background brush explicitly.
You can get the application bar color from the app resource named "PhoneChromeBrush". So all you need to do is set the stack panel background to this brush.
<StackPanel x:Name="popupMenuListCommands" Grid.Row="1"
Orientation="Vertical" VerticalAlignment="Bottom"
Background="{StaticResource PhoneChromeBrush}"
Visibility="Collapsed">
<TextBlock Text="menu item 1" Style="{StaticResource PopupMenuListCommand}" />
<TextBlock Text="menu item 2" Style="{StaticResource PopupMenuListCommand}" />
This way you don't have to worry about the phone dark or light theme.