WPF popup: how to make a reusable pop-up template?

Question

Since Popup does not infer from Control and does not have a template, how can I define a template so that all pop-ups look the same? I need to develop one that has a certain look and does not want to copy markup every time it is used.

It seems pretty simple, but I can't figure out how to do this. The Child property determines the logical tree, but I do not see how you can pull this into the template and reuse it.

Answer 1

Depends on how you want your pop-ups to behave. If they are only intended to display information in a unified way, than you might want to create a class that comes from Windowthat has standard formats and a style wrapped around it ContentPresenter, then binds the contents of the presenter to a property that can represent user information for each pop-up window.

Then it's just a matter of inserting any custom content you want programmatically before the popup appears.

Hope this helps.

Answer 2

I wanted to do the same, and here is what I came up with:

ContentPresenter, , , ContentPresenter Popup 2 , , .

:

using System.Windows;
using System.Windows.Controls;

namespace CustomControls
{
    [TemplatePart(Name = PART_PopupHeader, Type = typeof(TextBlock))]
    [TemplatePart(Name = PART_PopupContent, Type = typeof(TextBlock))]

    public class CustomPopupControl : ContentControl
    {
        private const string PART_PopupHeader = "PART_PopupHeader";
        private const string PART_PopupContent = "PART_PopupContent";

        private TextBlock _headerBlock = null;
        private TextBlock _contentBlock = null;

        static CustomPopupControl()
        {
            DefaultStyleKeyProperty.OverrideMetadata
                (typeof(CustomPopupControl), 
                new FrameworkPropertyMetadata(typeof(CustomPopupControl)));
        }

        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();
            _headerBlock = GetTemplateChild(PART_PopupHeader) as TextBlock;
            _contentBlock = GetTemplateChild(PART_PopupContent) as TextBlock;
        }

        public static readonly DependencyProperty HeaderTextProperty =
            DependencyProperty.Register("HeaderText", typeof(string), typeof(CustomPopupControl), new UIPropertyMetadata(string.Empty));

        public string HeaderText
        {
            get
            {
                return (string)GetValue(HeaderTextProperty);
            }
            set
            {
                SetValue(HeaderTextProperty, value);
            }
        }

        public static readonly DependencyProperty ContentTextProperty =
            DependencyProperty.Register("ContentText", typeof(string), typeof(CustomPopupControl), new UIPropertyMetadata(string.Empty));

        public string ContentText
        {
            get
            {
                return (string)GetValue(ContentTextProperty);
            }
            set
            {
                SetValue(ContentTextProperty, value);
            }
        }
    }
}

:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"                  
                xmlns:local="clr-namespace:CustomControls">

<Style TargetType="{x:Type local:CustomPopupControl}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:CustomPopupControl}">
                <Border CornerRadius="3" BorderThickness="1" BorderBrush="White">
                    <Border.Background>
                        <SolidColorBrush Color="#4b4b4b" Opacity="0.75"/>
                    </Border.Background>
                    <Border.Effect>
                        <DropShadowEffect ShadowDepth="0"
                            Color="White"
                            Opacity="1"
                            BlurRadius="5"/>
                    </Border.Effect>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <TextBlock Text="{TemplateBinding HeaderText}"
                                   Grid.Row="0"
                                   Foreground="#5095d6"
                                   FontWeight="Bold"
                                   VerticalAlignment="Bottom"
                                   Margin="{TemplateBinding Margin}"
                                   HorizontalAlignment="Left"/>
                        <Rectangle Grid.Row="1" Stroke="AntiqueWhite" Margin="1 0"></Rectangle>
                        <TextBlock Grid.Row="2"
                                   Grid.ColumnSpan="2"                                
                                   x:Name="PART_TooltipContents"
                                   Margin="5, 2"
                                   Text="{TemplateBinding ContentText}"
                                   TextWrapping="Wrap"
                                   MaxWidth="200"/>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

:

<StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Center">
    <Button x:Name="Button1" Content="Button with popup" HorizontalAlignment="Center">
    </Button>
    <Button x:Name="Button2" Content="Another button with popup" HorizontalAlignment="Center">
    </Button>
    <Popup  IsOpen="True"
        FlowDirection="LeftToRight"
        Margin="10"
        PlacementTarget="{Binding ElementName=Button1}" 
        Placement="top" 
        StaysOpen="True">
        <local2:CustomPopupControl HeaderText="Some Header Text" ContentText="Content Text that could be any text needed from a binding or other source" Margin="2">

        </local2:CustomPopupControl>
    </Popup>
    <Popup  IsOpen="True"
        FlowDirection="LeftToRight"
        Margin="10"
        PlacementTarget="{Binding ElementName=Button2}" 
        Placement="Bottom" 
        StaysOpen="True">
        <local2:CustomPopupControl HeaderText="Different header text" ContentText="Some other text" Margin="2">

        </local2:CustomPopupControl>
    </Popup>
</StackPanel>

, , , TemplatePart, :