wpf - 用于内容/内容模板的可重用容器的控件？

Question

我正在创建一个容器，其样式将在整个应用程序中使用。它本质上是一个“弹出窗口”，但不会在新窗口中生成。我的应用程序的一般结构是一个 NavigationWindow 和许多页面。因此，我开始使用在我的资源字典中定义的以下模板:

<ControlTemplate x:Key="RainbowModalTemplate" TargetType="{x:Type Control}">        
    <Canvas Height="540" Canvas.Left="492" Canvas.Top="296" Width="945">        
        <Border x:Name="Modal" Height="540" Width="945"  Background="#ec2016" BorderBrush="White" BorderThickness="2" CornerRadius="15" Style="{DynamicResource RainbowModalBox}">
            <Border.Clip>
                <RectangleGeometry RadiusX="15" RadiusY="15" Rect="0,0,945,540"/>                   
            </Border.Clip>
                <Image Source="Resources/RainbowModal/rainbow.png" Height="247" Width="947" Margin="0,0,0,0" VerticalAlignment="Bottom" d:LayoutOverrides="Height" Stretch="UniformToFill" Canvas.Left="-2" Canvas.Top="293" ClipToBounds="True" />         
        </Border>               
    </Canvas>
</ControlTemplate>

所以当我想“消费”这个时，我希望能够实现这个控件，但在内部提供我自己的内容(按钮、文本等)。但是，因为我是 WPF 的新手，所以我不确定要使用什么控件，以及将其布局为什么结构。下面是对象的示例“消费者”。有人将单击应用程序中的按钮，这会将此对象的可见性设置为可见:

<Control x:Name="RequestMoreInfoModal" Template="{DynamicResource RainbowModalTemplate}" Canvas.Left="494" Canvas.Top="250" Visibility="Collapsed"></Control>

我知道这可能不是最符合犹太洁食标准的方法，所以我愿意接受建议。我的具体问题:

我知道“控制”不是正确的类型。但我不知道什么是合适的，而且 Canvas 和其他控件似乎不允许模板化。我应该使用什么控件？

我如何实现此模板并允许消费者在模板中定义他们自己的内容？

Answer 1

我最后做的是使用 ControlTemplate 和 ContentPresenter。

这是我的 ResourceDictionary 中可重用内容的定义:

<ControlTemplate x:Key="RainbowModal" TargetType="ContentControl">
    <Canvas>
        <Border x:Name="Modal" Height="540" Width="945"  Background="#ec2016" BorderBrush="White" CornerRadius="15" BorderThickness="2" Style="{DynamicResource RainbowModalBox}">
            <Border.Clip>
                <RectangleGeometry  
                        RadiusX="{Binding CornerRadius.TopLeft, RelativeSource={RelativeSource AncestorType={x:Type Border}}}"
                        RadiusY="{Binding RadiusX, RelativeSource={RelativeSource Self}}" 
                        Rect="0,0,945,540"/>
            </Border.Clip>
            <Canvas>                    
                <Image Source="Resources/RainbowModal/rainbow.png" Height="247" Width="947" Margin="0,0,0,0" VerticalAlignment="Bottom" Stretch="UniformToFill" Canvas.Left="-2" Canvas.Top="293" ClipToBounds="True" />
                <ContentPresenter/>
            </Canvas>
        </Border>
    </Canvas>
</ControlTemplate>

这是该内容的“消费”。

<ContentControl x:Name="RequestMoreInfoModal" Canvas.Left="489" Canvas.Top="122" Template="{StaticResource RainbowModal}" Visibility="Collapsed">
    <Canvas>
        <TextBlock FontSize="78" Foreground="White" Width="903" Canvas.Top="28" Canvas.Left="20" Height="298" Text="Scan your card to receive an email with more information." TextWrapping="Wrap" FontFamily="Serif72 Beta" TextAlignment="Center" />
        <Button Width="250" Height="76" Content="CLOSE" Margin="350,350" Style="{DynamicResource PurpleInfoButton}" FontSize="28" Click="Button_Click_1" ></Button>
     </Canvas>
</ContentControl>