Popup Control in WPF

In this article, we will create a PopUp Control In WPF. For this follow these steps:

Step 1: First we create a StackPanel and create a Popup control in it like this:

<StackPanel Name="MyPanel">
            <Popup  Height="Auto" Width="Auto" Name="MyToolTip" StaysOpen="True" AllowsTransparency="True"  >
                <Border BorderThickness="1" Background="Azure" >
                    <StackPanel Margin="30"  Orientation="Horizontal">
                        <TextBlock Text="Total Marks: "/>                   
      <TextBlock  Name="MyFirstPopupTextBlock" />                   
     
     </StackPanel>
</Border>
</Popup>

This is useful to show the Total Marks in the program. Here we set its border and TextBlock to show its result. The output will look like this:



Step 2: Now we create a ListView and set the events in it; when we hover a mouse over the ListView the popup window will be shown. And when we move the mouse out of the Listview the popup window disappears. And we take a Gridview in the listView to show the data.

<ListView ItemsSource="{Binding}">
                <ListView.ItemContainerStyle>
                    <Style TargetType="{x:Type ListViewItem}">
                        <EventSetter Event="Mouse.MouseEnter" Handler="Show_PopupToolTip" />
                        <EventSetter Event="Mouse.MouseLeave" Handler="Hide_PopupToolTip"/>
                    </Style>
                </ListView.ItemContainerStyle>
                <ListView.View>
                    <GridView >
                        <GridView.Columns>
                            <GridViewColumn Header="First Name" DisplayMemberBinding="{Binding Path=fname}" />
                            <GridViewColumn Header="Last Name" DisplayMemberBinding="{Binding Path=lname}" />
                            <GridViewColumn Header="Subject" DisplayMemberBinding="{Binding Path=subject}" />
                        </GridView.Columns>
                    </GridView>
                </ListView.View>
            </ListView>



Step 3: Now we write the code for the .cs page. First we create a class:

public class Student
{
    private string _fname;
    public string fname
    {
        get { return _fname; }
        set { _fname = value; }
    }
    private string _lname;
    public string lname
    {
        get { return _lname; }
        set { _lname = value; }
    }
    private string _marks;
    public string Marks
    {
        get { return _marks; }
        set { _marks = value; }
    }
    private string _sub;
    public string subject
    {
        get { return _sub; }
        set { _sub = value; }
    }
}

Now we use this to set the value in the gridview:

public Window1()
{
    InitializeComponent();
    List<Student> lst = new List<Student>();
    Student sd = new Student();
    sd.fname = "Mahak";
    sd.lname = "Garg";
    sd.subject = "Maths";
    sd.Marks = "91";
    lst.Add(sd);
    sd = new Student();
    sd.fname = "Juhi";
    sd.lname = "Gupta";
    sd.subject = "Maths";
    sd.Marks = "82";
    lst.Add(sd);
    sd = new Student();
    sd.fname = "Khyati";
    sd.lname = "Jindal";
    sd.subject = "Maths";
    sd.Marks = "100";
    lst.Add(sd);
    sd = new Student();
    sd.fname = "Ritu";
    sd.lname = "Garg";
    sd.subject = "Maths";
    sd.Marks = "80";
    lst.Add(sd);
    MyPanel.DataContext = lst;
}

After that we write the event to show the popup window:

private void Show_PopupToolTip(object sender, MouseEventArgs e)

{
    ListViewItem listViewItem = e.Source as ListViewItem;
    Student Student = listViewItem.Content as Student;
    MyFirstPopupTextBlock.Text = Student.Marks;
    MyToolTip.PlacementTarget = listViewItem;
    MyToolTip.Placement = PlacementMode.MousePoint;
    MyToolTip.IsOpen = true;
}
private void Hide_PopupToolTip(object sender, MouseEventArgs e)
{
    MyToolTip.IsOpen = false;
}

Here we set the IsOpen property to false to hide the popup window.

The output will be: