CODEWITHSUNDEEP
wpfxamlpopupwindows-phone-8.1
Spook
Spook

Reputation: 25927

How to implement popup in Windows Phone

I'm implementing a templated control, which should work as virtual keyboard button - when you hold it, it displays a popup with additional options to choose.

I've implemented the popup more less in the following way:

<Grid>
    <Border>Content</Border>
    <Grid x:Name="gPopup" Visibility="Collapsed">
         <StackPanel x:Name="spSubItems" Orientation="Horizontal" />
    </Grid>
</Grid>

I show the popup by changing visibility to visible and setting negative margins for top and bottom. However, when I do that, and when the popup is actually larger than the control, the control is being resized to match its size - despite fact, that it is not inside: enter image description here enter image description here

How can I implement the popup, such that it won't expand the container it's on? And such that the container will still match size of its contents?

Edit: In response to comments and answers

I'm not sure if I'm understood correctly. Here's an image with explanation:

enter image description here

I'd like to keep the original container's size the same after showing the popup. I'm unsure how WrapPanel or DockPanel could help me with that.

Upvotes: 0

Views: 259

Answers (3)

Rob Caplan - MSFT
Rob Caplan - MSFT

Reputation: 21889

Like spook says, put your gPopup Grid in a Popup element and show it by opening the popup. This won't affect the main visual tree.

The reason the embedded grid embiggens the border is that the outer grid has to expand to hold pGrid and the border expands to fill the outer grid.

Upvotes: 0

Spook
Spook

Reputation: 25927

The solution is simply to use Popup instead of positioned Grid.

Upvotes: 1

Sachin Mehendiratta
Sachin Mehendiratta

Reputation: 1

Sample- Create a grid 

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
   <!-- Setting a Rectangle having transparent background which set the
   Visibility of popup -->
   <Rectangle Name="popupRect" Fill="#80000000" Visibility="Collapsed"/>
   <!—Here in the above Code we are just filling the rectangle With the transparent BackGround -->
   <!—Creating A Border -->
   <Border Name="popupBorder" Background="{StaticResource PhoneChromeBrush}" BorderBrush="Red" BorderThickness="2"
   HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Collapsed">
   <!-- Creating A grid Inside the Border and Rectangle -->
</Grid>

Create event for which popup should appear(for both cancel and appear)-

private void cancelButton_Click(object sender, RoutedEventArgs e)
{
   popupRect.Visibility = Visibility.Collapsed;
   popupBorder.Visibility = Visibility.Collapsed;
}
private void popupButton_Click(object sender, RoutedEventArgs e)
{
   popupRect.Visibility = Visibility.Visible;
   popupBorder.Visibility = Visibility.Visible;
}

It will work, I guess.

Upvotes: 0

Related Questions