Description
WPF comes with a Popup control to provide the better understanding the end users. This article shows how to create the popup and how to use it in WPF applications. Here XAML source and C# are used.
In XAML source, we can represent popup element like below:
[csharp]<Popup></Popup>[/csharp]
For popup element, one can set Height, Width, Padding, Margin, Background color and Alignments also.
[csharp] <Popup Height="200" Width="200" Margin="10,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"></Popup>[/csharp]
If popup element has to be visible, then set IsOpen property as a True.
Example
In this example, TextBlock control is used with the grid layout to show the Popup.
Create a new window, then go to XAML source and write the following:
[csharp]
<Window x:Class="WPFPopup.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF | PopUp" Height="350" Width="450" Background="LightGray">
<Grid Name="gridlayout">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="90"></ColumnDefinition>
<ColumnDefinition Width="370"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="40"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Height="40" Grid.Row="0" Grid.Column="0" FontWeight="Bold">Description</TextBlock>
<TextBlock Height="40" Grid.Row="0" Grid.Column="1" FontWeight="Bold" Name="txtdesc" MouseEnter="txtdesc_MouseEnter" MouseLeave="txtdesc_MouseLeave" Background="BlanchedAlmond">This is testing popup</TextBlock>
<TextBlock Height="40" Grid.Row="1" Grid.Column="0" FontWeight="Bold">Comments</TextBlock>
<TextBlock Height="40" Grid.Row="1" Grid.Column="1" Name="txtcoments" MouseEnter="txtcoments_MouseEnter" MouseLeave="txtcoments_MouseLeave" Background="Beige" FontWeight="ExtraBlack">This is testing popup</TextBlock>
<Popup Name="popup1" VerticalAlignment="Top">
<TextBlock Name="tbpopup" TextWrapping="Wrap" FontWeight="Black" Background="Green" ></TextBlock>
</Popup>
</Grid>
</Window>
[/csharp]
Now write the run-time code:
[csharp]using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace WPFPopup
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
Textassign();
}
void Textassign()
{
txtdesc.Text = "This is testing whether the popup is working properly or not.";
txtcoments.Text = "This is a testing comment";
}
private void txtdesc_MouseEnter(object sender, MouseEventArgs e)
{
TextBlock tb = new TextBlock();
string text = txtdesc.Text;
tbpopup.Width = 420;
tbpopup.Text = text;
popup1.IsOpen = true;
}
private void txtdesc_MouseLeave(object sender, MouseEventArgs e)
{
popup1.IsOpen = false;
}
private void txtcoments_MouseLeave(object sender, MouseEventArgs e)
{
popup1.IsOpen = false;
}
private void txtcoments_MouseEnter(object sender, MouseEventArgs e)
{
TextBlock tb = new TextBlock();
string text = txtdesc.Text;
tbpopup.Width = 420;
tbpopup.Text = text;
popup1.IsOpen = true;
}
}
}
[/csharp]
Now run the application and the output appears as below.
