Mẫu liên kết trong mẫu kiểm soát

Question

Tôi có mẫu kiểm soát sau đây.

Tôi muốn đặt thuộc tính nguồn cho điều khiển hình ảnh trong mẫu kiểm soát bằng cách sử dụng Mẫu Binding.

Nhưng vì đây là mẫu kiểm soát để điều khiển nút và điều khiển nút không có thuộc tính nguồn, tôi không thể sử dụng tính năng Đóng gói mẫu trong trường hợp này.

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

Vì tôi phải đặt hình ảnh khác nhau cho các trường hợp nút khác nhau, tôi cũng không thể mã hóa đường dẫn.

Vui lòng cho tôi biết cách giải quyết tình huống này.

Answer 1

tôi muốn đề nghị sử dụng tài nguyên năng động, ví dụ xác định các mẫu như sau:

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

Và sử dụng nó như thế này:

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

Answer 2

Bạn chưa thực sự nói cách bạn mong đợi người tiêu dùng của nút của bạn đặt nguồn. Ví dụ: bạn có thể sử dụng thuộc tính Button.Tag và sau đó liên kết với thuộc tính đó trong mẫu của bạn. Hoặc bạn có thể xác định kiểm soát của riêng bạn:

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

Và sau đó mẫu:

<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 là một trọng lượng nhẹ "ràng buộc", nó không hỗ trợ một số tính năng của truyền thống Binding, chẳng hạn như tự động gõ chuyển đổi bằng cách sử dụng các trình chuyển đổi kiểu đã biết được liên kết với thuộc tính đích (chẳng hạn như chuyển đổi chuỗi URI thành một thể hiện BitmapSource).

Các mã sau đây có thể làm việc đúng cách:

<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

Tôi không chắc rằng tôi hiểu vấn đề của bạn rất tốt nhưng tại sao bạn không sử dụng ContentPresenter? Nó cho phép di chuyển mã cho hình ảnh của bạn ở cấp độ cao hơn.

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