To show details of a control we mostly use Tooltips. We know how to create custom tooltip templates and styling. Tooltips are only useful to show details of particular entity in application. These entity, eventually, would be control.
Now what if you want a functional tooltip kind of control that should give you functionality of performing any action on the tooltip?
The answer is Popup window. We can use customized Popup window to show details along with controls which can be used to perform any action in application.
Here I am going to discuss how to use Popup window in our WPF application.
You can include content in a popup window using the Popup control, which appears on top of your application.
Below, we define a Popup that includes content within a blue border.
<Window x:Class="WPFPopupWindowDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Popup Window Demo" Height="350" Width="525">
<Window.Resources>
<ImageSource x:Key="Caesar">/WPFPopupWindowDemo;component/Images/King.jpg</ImageSource>
</Window.Resources>
<Grid>
<StackPanel Margin="15" Orientation="Horizontal">
<Button Content="Learn About Caesar"
Margin="5" Padding="10,5"
VerticalAlignment="Center"/>
<Grid>
<TextBlock Text="?" FontWeight="Bold" FontSize="24"
VerticalAlignment="Center"
MouseEnter="question_MouseEnter"/>
<Popup Name="popCaesar" IsOpen="False" Placement="Right">
<Border BorderBrush="Blue" BorderThickness="1"
Background="AliceBlue">
<StackPanel Orientation="Horizontal">
<Image Source="Images\King.jpg" Height="100" Width="100"/>
<StackPanel Orientation="Vertical">
<TextBlock Text="Julius Caesar was a Roman emperor who lived from 100 BC to 44 BC"
Margin="10"
Width="150" TextWrapping="Wrap"/>
<Button Content="OK" Click="btnOK_Click"
HorizontalAlignment="Right" Margin="10"
Padding="5,2"/>
</StackPanel>
</StackPanel>
</Border>
</Popup>
</Grid>
</StackPanel>
</Grid>
</Window>
|
You make a Popup visible by setting its IsOpen property to true. We set the property to true when the user hovers over the question mark and to false when they click on the OK button.
Controlling Whether a Popup Is Open Using Data Binding
You can control whether a popup is open by setting its IsOpen property from your code, using the name of the Popup control. Another approach is to bind the IsOpen property to a boolean value and then to manipulate the boolean value to control whether the popup is open.
XAML Code:
<Window x:Class="WPFPopupWindowDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Popup Window Demo" Height="200" Width="525">
<Window.Resources>
<ImageSource x:Key="Caesar">/WPFPopupWindowDemo;component/Images/King.jpg</ImageSource>
</Window.Resources>
<Grid>
<StackPanel Margin="15" Orientation="Horizontal">
<Button Content="Learn About Caesar"
Margin="5" Padding="10,5"
VerticalAlignment="Center"/>
<Grid>
<TextBlock Text="?" FontWeight="Bold" FontSize="24"
VerticalAlignment="Center"
MouseEnter="question_MouseEnter"/>
<Popup Name="popCaesar" Placement="Right" IsOpen="{Binding PopupOpen}">
<Border BorderBrush="Blue" BorderThickness="1"
Background="AliceBlue">
<StackPanel Orientation="Horizontal">
<Image Source="Images\King.jpg" Height="100" Width="100"/>
<StackPanel Orientation="Vertical">
<TextBlock Text="Julius Caesar was a Roman emperor who lived from 100 BC to 44 BC"
Margin="10"
Width="150" TextWrapping="Wrap"/>
<Button Content="OK" Click="btnOK_Click"
HorizontalAlignment="Right" Margin="10"
Padding="5,2"/>
</StackPanel>
</StackPanel>
</Border>
</Popup>
</Grid>
</StackPanel>
</Grid>
</Window>
|
Code Behind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
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;
using System.ComponentModel;
namespace WPFPopupWindowDemo
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window, INotifyPropertyChanged
{
public MainWindow()
{
InitializeComponent();
this.DataContext = this;
}
// INotifyPropertyChanged
public event PropertyChangedEventHandler PropertyChanged = delegate { };
private void RaisePropertyChanged(string propName)
{
PropertyChanged(this, new PropertyChangedEventArgs(propName));
}
private bool popupOpen;
public bool PopupOpen
{
get { return popupOpen; }
set
{
popupOpen = value;
RaisePropertyChanged("PopupOpen");
}
}
private void question_MouseEnter(object sender, MouseEventArgs e)
{
PopupOpen = true;
}
private void btnOK_Click(object sender, RoutedEventArgs e)
{
PopupOpen = false;
}
}
}
|
No comments:
Post a Comment