コントロールテンプレートのテンプレートバインディング

Question

次のコントロールテンプレートがあります。

コントロール テンプレートのイメージコントロールのソースプロパティをテンプレートバインディングを使用して設定したいとします。

しかし、これはボタンコントロールのコントロールテンプレートであり、ボタンコントロールは ソースプロパティを持たないため、この場合はTemplateBindingを使用できません。

<ControlTemplate x:Key="BtnTemplate" TargetType="Button"> 
     <Border CornerRadius="5" Margin="15" Cursor="Hand"> 
      <StackPanel> 
       <Image Name="Img" Style="{StaticResource ImageStyle}" Source="temp.jpg" Height="100" Width="100" Margin="5"></Image> 
       <Label Content="{TemplateBinding Content}" Background="Transparent" Margin="2"></Label> 
      </StackPanel> 
     </Border> 
    </ControlTemplate> 

ボタンのインスタンスごとに異なるイメージを設定する必要があるため、パスもハードコードできません。

このような状況に対処する方法を教えてください。

Answer 1

を私は、例えば、動的なリソースを使用することをお勧めしたいです次のようにテンプレートを定義します。

<ControlTemplate x:Key="buttonTemplate" TargetType="Button"> 
    <Border CornerRadius="5" Margin="15" Cursor="Hand"> 
     <StackPanel Orientation="Horizontal" Background="Yellow"> 
      <Image Source="{DynamicResource ResourceKey=Img}" Height="100" Width="100" Margin="5"></Image> 
      <Label Content="{TemplateBinding Content}" Background="Transparent" Margin="2"></Label> 
     </StackPanel> 
    </Border> 
</ControlTemplate> 

そして、このようにそれを使用します。

<Button Content="Button" Template="{StaticResource ResourceKey=buttonTemplate}"> 
    <Button.Resources> 
     <ImageSource x:Key="Img">SomeUri.png/</ImageSource> 
    </Button.Resources> 
</Button> 

Answer 2

ボタンの消費者がどのようにソースを設定すると思われるかは、実際には述べていません。たとえば、Button.Tagプロパティを使用して、テンプレート内のプロパティにバインドすることができます。それとも、独自のコントロール定義することができます。

public class ImageButton : Button 
{ 
    // add Source dependency property a la Image 
} 

をそしてテンプレート：

<ControlTemplate TargetType="ImageButton"> 
    <Border CornerRadius="5" Margin="15" Cursor="Hand"> 
     <StackPanel> 
      <Image Name="Img" Style="{StaticResource ImageStyle}" Source="{TempateBinding Source}" Height="100" Width="100" Margin="5"></Image> 
      <Label Content="{TemplateBinding Content}" Background="Transparent" Margin="2"></Label> 
     </StackPanel> 
    </Border> 
</ControlTemplate> 

Answer 3

TemplateBindingのは軽量な「結合」、それは、このような自動的に入力するように、伝統的なバインディングの一部の機能をサポートしていないです（文字列URIをBitmapSourceインスタンスに変換するなど）対象のプロパティに関連付けられている既知の型コンバータを使用して変換します。

次のコードが正常に動作することができます：

<Window x:Class="GridScroll.Window2" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="Window2"> 
<Window.Resources> 
    <Style TargetType="{x:Type Button}" x:Key="ButtonStyle"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Button"> 
        <Border CornerRadius="5" Margin="15" Cursor="Hand" Background="Red"> 
         <StackPanel Orientation="Horizontal" Background="White"> 
          <Image Name="Img" Source="{Binding Path=Tag, RelativeSource={RelativeSource TemplatedParent}}" Margin="5"></Image> 
          <Label Content="{TemplateBinding Content}" Margin="2"></Label> 
         </StackPanel> 
        </Border> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 


</Window.Resources> 
<StackPanel Orientation="Horizontal"> 
    <Button Style="{StaticResource ButtonStyle}" Tag="a.jpeg" Content="a"/> 
    <Button Style="{StaticResource ButtonStyle}" Tag="b.png" Content="b"/> 
</StackPanel> 

Answer 4

を私は非常によくあなたの問題を理解していることはよく分からないが、なぜあなたはのContentPresenterを使用していませんか？画像のコードをより高いレベルで移動することができます。

<ControlTemplate x:Key="BtnTemplate" TargetType="Button"> 
    ... 
    <ContentPresenter/> 
</ControlTemplate> 
... 
<Button Template="{StaticResource BtnTemplate}"> 
    <Image .../> 
</Button>