WPF弹出窗口：如何制作可重用的弹出窗口模板？

Question

由于 Popup 不派生自 Control ，也没有模板，那么我该如何定义一个模板，以便所有弹出窗口看起来都一样呢？我需要设计一个具有特定外观的模板，并且不想每次使用时都复制标记。

这似乎很容易，但我无法想出如何实现。Child 属性定义了逻辑树，但我不知道如何将其提取到模板中并重用。

- dex3703

Answer 1

我也有同样的需求，这是我想到的方法：

我继承了 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，这里是最终结果：

- Ravid Goldenberg

---

我认为您在帖子中忘记了以下规定：对于CustomControl，您的样式应该存在于名为“Generic.xaml”的文件中，该文件应放置在“Themes”文件夹中。（您仍然可以更改默认的Themes文件夹位置），并且您的C#文件应定义用于查找/定位/识别Xaml样式的关键字。来源：https://www.appsloveworld.com/csharp/100/2225/failed-to-create-a-type-from-the-text-localimagebutton - Willy

Answer 2

这取决于你想让弹出窗口如何行为。如果它们只是用于以统一的方式显示信息，那么你可能希望有一个从Window派生的类，该类具有标准格式和样式，包装在ContentPresenter中，然后将演示器的内容绑定到可以表示每个弹出窗口的自定义信息的属性。

然后，只需在显示弹出窗口之前以编程方式插入任何自定义内容即可。

希望能帮到你。

- Val