ユーザーコントロールで複数のコンテンツを作成しようとしています

Question

以下はカスタムユーザーコントロール用のxamlコードです。私の目標は、OuterBoxにグラフィックを表示するコントロールを作成することですが、InnerBoxセクションを使って上に表示する別のグラフィックを読み込むこともできます。たとえば、最初/下/外のグラフィックは犬の絵である可能性があります。ユーザーがこれをクリックして答えが正しい場合、チェックマークが犬の上に表示されます。間違った答えがあれば、Xが表示されます。これは非常に単純な例ですが、問題を示しています。私のプログラムは、外側と内側のグラフィックの組合せの多くの順列を持っているので、リソース辞書の外側と内側のグラフィックオプションのすべての可能な組み合わせを持つことは実現可能ではありません。

2つのオプションがあります（数字は1が好ましい）。

1. 外部および内部ビューボックスの子コンテンツを個別に設定できるコントロールを作成します。今、私はどちらか一方を行うことができますが、両方を行うことはできません。どちらのコンテンツが最初に設定されているかは、表示される内容です。それも可能ですか？

2. xamlストリングをオンザフライで生成し、内側ストリングを外側ストリング内に挿入して、ネストされたxamlストリングを作成します。私は、リソース辞書からコントロールに入れ子になったxaml文字列を入れることができることを確認しています。これを行うには、事前に辞書に保存できないように、コードで動的に作成されたxaml文字列にビューボックスの子コンテンツを設定するにはどうすればよいですか？これがうまくいけば、2つのxaml文字列（外側と内側の図形）を引っ張り、それらをまとめて入れ子にしたグラフィックを表示することができます。

私はVBでこれをやりたいのですが、必要ならばC＃でうまく動作します。

ご協力いただければ幸いです。

私のコントロールの定義。

<UserControl x:Class="CardBox" 
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
       xmlns:local="clr-namespace:TestingNested" 
       mc:Ignorable="d" 
       d:DesignHeight="300" d:DesignWidth="300"> 


     <Viewbox Name="OuterBox"> 
     <Canvas Width="100" Height="100" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 

      <!-- need outer content dynamically set here --> 


      <Viewbox Name="InnerBox"> 
      <!-- need inner content dynamically set here --> 


      </Viewbox> 

     </Canvas> 
     </Viewbox> 


    </UserControl> 

Answer 1

グリッドを使用して外側のグラフィックの上に内側のグラフィックをオーバーレイし、内側のグラフィックの表示を制御します。 Viewboxは1つの子要素しか持つことができません。グリッドは複数のことができます。より高いZIndexを持つ子供が上に上がります。あなたのコードビハインドで

<UserControl x:Class="CardBox" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:local="clr-namespace:TestingNested" 
    mc:Ignorable="d" 
    d:DesignHeight="300" d:DesignWidth="300" 
    DataContext="{Binding RelativeSource={RelativeSource Self}}"> 

    <Grid Width="100" Height="100"> 
    <Image Source="{Binding Path=OuterGraphic}" 
      Panel.ZIndex="1"/> 
    <Image Source="{Binding Path=InnerGraphic}" 
      Panel.ZIndex="2" 
      Visibility="{Binding Path=InnerGraphicVisibility}"/> 
    </Grid> 
</UserControl> 

、そのようOuterGraphic、InnerGraphic、およびInnerGraphicVisibilityの依存関係プロパティを追加します。

Public Shared ReadOnly OuterGraphicProperty As DependencyProperty = 
    DependencyProperty.Register("OuterGraphic", GetType(ImageSource), GetType(CardBox), New PropertyMetadata(Nothing)) 

    Public Property OuterGraphic As ImageSource 
    Get 
     Return CType(GetValue(OuterGraphicProperty), ImageSource) 
    End Get 
    Set(value As ImageSource) 
     SetValue(OuterGraphicProperty, value) 
    End Set 
    End Property 

次にあなたがOuterGraphicとInnerGraphicプロパティを設定することにより、動的グラフィックスを設定することができるはずですInnerGraphicVisibilityを設定して、内部グラフィックのオン/オフを切り替えます。