22

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

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

しかし、これはボタン コントロールのコントロール テンプレートであり、ボタン コントロールには source プロパティがないため、この場合は 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>

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

この状況の対処法を教えてください。

4

4 に答える 4

35

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

<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>
于 2011-01-09T11:09:38.353 に答える
5

TemplateBinding は軽量の "バインディング" であり、ターゲット プロパティに関連付けられた既知の型コンバーターを使用した自動型変換 (文字列 URI を BitmapSource インスタンスに変換するなど) など、従来の Binding の一部の機能をサポートしていません。

次のコードは正しく動作します。

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

于 2011-01-09T11:05:46.093 に答える
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>
于 2011-01-09T10:52:15.970 に答える
1

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

<ControlTemplate x:Key="BtnTemplate" TargetType="Button">
  ...
  <ContentPresenter/>
</ControlTemplate>
...
<Button Template="{StaticResource BtnTemplate}">
  <Image .../>
</Button>
于 2011-01-09T11:21:00.557 に答える