控制用于内容/内容模板的可重用容器?

时间:2012-12-21 16:14:04

标签: wpf controltemplate

我正在创建一个容器,其样式将在整个应用程序中使用。它本质上是一个“弹出”,但不会在新窗口中产生。我的应用程序的一般结构是一个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和其他控件不允许模板化。我应该使用什么控制?

如何实施此模板并允许消费者在模板中定义自己的内容?

1 个答案:

答案 0 :(得分: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>