Contrôle à utiliser pour le conteneur Réutilisable pour le modèle de contenu/contenu?

Question

Je crée un conteneur dont le style sera utilisé dans toute l'application. Il s'agit essentiellement d'un «pop up», mais ne va pas apparaître dans une nouvelle fenêtre. La structure générale de mon application est une NavigationWindow et de nombreuses pages. Donc, je commence avec le modèle suivant, défini dans ma ressource Dictionnaire:

<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> 

Alors, quand je veux « consommer », je veux être en mesure de mettre en œuvre ce contrôle, mais de fournir mon propre contenu à l'intérieur, (boutons , texte, etc.) Cependant, parce que je suis nouveau sur WPF, je ne suis pas sûr du contrôle ou des contrôles à utiliser, et de la structure à utiliser. Ci-dessous un exemple de «consommateur» de l'objet. Quelqu'un cliquer sur un bouton dans l'application et qui définira cette visibilité des objets Visible:

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

Je sais que ce n'est probablement pas la façon la plus casher de le faire, donc je suis ouvert à la suggestion. Mes préoccupations spécifiques:

Je sais que "Control" n'est pas du bon type. Mais je ne sais pas ce qui est approprié et il semble que Canvas et d'autres contrôles ne permettent pas de Templating. Quel contrôle devrais-je utiliser?

Comment implémenter ce modèle et permettre au consommateur de définir son propre contenu dans le modèle?

Answer 1

Ce que j'ai fait en utilisant un ControlTemplate et ContentPresenter.

Voici la définition du contenu réutilisable dans mon 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> 

Et voici la « consommation » de ce contenu.

<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>