3

アプリケーション全体でスタイルが使用されるコンテナを作成しています。これは基本的に「ポップアップ」ですが、新しいウィンドウには表示されません。私のアプリの一般的な構造は、1 つの 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 を初めて使用するため、どのコントロールを使用するか、またどのような構造でこれをレイアウトするかがわかりません。以下は、オブジェクトの「消費者」のサンプルです。誰かがアプリケーションのボタンをクリックすると、このオブジェクトの可視性が Visible に設定されます:

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

これはおそらくこれを行うための最もコーシャな方法ではないことを私は知っているので、私は提案を受け入れます. 私の具体的な懸念：

「コントロール」が正しいタイプではないことはわかっています。しかし、何が適切なのかわかりません。キャンバスやその他のコントロールではテンプレート化が許可されていないようです。どのコントロールを使用すればよいですか?

このテンプレートを実装し、消費者がテンプレート内で独自のコンテンツを定義できるようにするにはどうすればよいですか?

4

1 に答える 1

2

私がやったことは、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>
于 2012-12-26T19:20:38.507 に答える