Open a pop-up window where the button is clicked
I am trying to create a popup that opens similar to the window preview option in the Windows 8 taskbar. Basically, when I click or click on a button, it opens a popup with basic information just above the button. Here's an example.
Currently I can open a popup on the far left or far right of the page using the code below.
<Frame x:Name="PopUpFrame" HorizontalAlignment="Left" Visibility="Hidden" Height="400" Margin="10,10,0,0" Grid.Row="1" VerticalAlignment="Bottom" Width="400" Source="/BasicApp;component/StandingOrderPopUp.xaml" NavigationUIVisibility="Hidden"/>
I have 3 different buttons on the button bar so I cannot set a fixed stock. I am trying to set the same in code, but I cannot get the absolute position and convert it to a margin property. I'm not sure if there is a better solution either.
Edit:
Tried using the popup but it doesn't open on button click.
<Popup x:Name="PopUpFrame" Placement="Top" PlacementTarget="{Binding ElementName=StandingOrderButton}" Width="400" Height="400">
<DockPanel Background="#770081a7">
<Canvas DockPanel.Dock="Bottom" x:Name="PopupButtonBar" Height="50" VerticalAlignment="Bottom">
<Button Height="30" Width="125" HorizontalAlignment="Right" VerticalAlignment="Center" Canvas.Top="10" Content="CLOSE" Foreground="White" Background="#ff0081a7" BorderBrush="White" FontFamily="Trebuchet MS" Canvas.Left="10" />
</Canvas>
<Label Margin="5,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" DockPanel.Dock="Top" Content="STANDING ORDERS" Foreground="#ffffffff"></Label>
<Grid DockPanel.Dock="Top">
<Border BorderThickness="2" BorderBrush="#FFff7a00"></Border>
<RichTextBox Margin="2" Foreground="#FF0081a7" FontFamily="Trebuchet MS" IsEnabled="False"/>
</Grid>
</DockPanel>
</Popup>
And here is the event handler.
Private Sub StandingOrder_Click(sender As Object, e As RoutedEventArgs)
PopUpFrame.Visibility = Windows.Visibility.Visible
End Sub
Edit:
Nothing. I'm an idiot. Instead of setting the IsOpen property, I set the visibility. :(
This works great, although I had to copy the entire project from a separate page to this one. Better than nothing. Now the only problem is that if I click on something else, I have to write some code to make sure the popup is closed.
source to share
You can use a control Popup
as well as a property Placement
to display your popup based on the current location of your buttons.
<Popup Placement="Top" PlacementTarget="{Binding ElementName=yourButton}" ... />
Inside, Popup
you can place your own UserControl
or any content element that will act as the pop-up content.
See here for more information on popup placements and here for a tutorial on WPF Popup Menu Controls.
source to share
This is how I defined one of my popups:
<Popup x:Name="btnPowerPopup" Placement="Mouse" StaysOpen="False">
....
</Popup>
you can use the code behind the button click or something:
btnPowerPopup.IsOpen = true;
and when the job is done:
btnPowerPopup.IsOpen = false;
But StaysOpen="False"
will allow you to close PopUp by clicking elsewhere.
source to share