按鈕模板中的可變圖像源

Question

如何將Source屬性從按鈕模板轉移到該模板內的圖像？

這是我的XAML如何看起來像：

<Page x:Class="TallShip.MainGallery" 
    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:TallShip" 
    mc:Ignorable="d" 
    d:DesignHeight="1080" d:DesignWidth="1920" 
Title="MainGallery"> 

<Grid> 
    <ScrollViewer Height="958" HorizontalAlignment="Left" Margin="685,87,0,0" Name="GalleryRightScroller" VerticalAlignment="Top" Width="1159" PanningMode="VerticalOnly" VerticalScrollBarVisibility="Auto"> 
     <Grid> 
      <Grid.Resources> 
       <ControlTemplate x:Key="GalleryObject"> 
        <StackPanel Height="Auto" HorizontalAlignment="Left" Margin="{TemplateBinding Margin}" VerticalAlignment="Top" Width="500"> 
         <Image Height="200" Stretch="None" Source="{TemplateBinding local:SourceHolder.Source}" Width="200" /> 
         <Label Content="{TemplateBinding local:SourceHolder.Source}" Height="28" Name="label1" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" /> 
        </StackPanel> 
       </ControlTemplate> 
      </Grid.Resources> 

      <Button Template="{StaticResource GalleryObject}" local:SourceHolder.Source="/TallShip;component/media/91gx2EQ.jpg" Name="object1" Margin="43,21,0,0"/> 
      <Button Template="{StaticResource GalleryObject}" local:SourceHolder.Source="/TallShip;component/media/91gx2EQ.jpg" Name="object2" Margin="43,280,0,0"/> 
     </Grid> 
    </ScrollViewer> 

</Grid> 

這是我創建持有Source屬性自定義控件類：

namespace TallShip { 
public static class SourceHolder 
{ 
    public static readonly DependencyProperty SourceProperty = DependencyProperty.RegisterAttached("Source", 
     typeof(string), typeof(SourceHolder), new FrameworkPropertyMetadata(null)); 

    public static string GetSource(UIElement element) 
    { 
     if (element == null) 
      throw new ArgumentNullException("element"); 
     return (string)element.GetValue(SourceProperty); 
    } 
    public static void SetSource(UIElement element, string value) 
    { 
     if (element == null) 
      throw new ArgumentNullException("element"); 
     element.SetValue(SourceProperty, value); 
    } 
} 
} 

目前，標籤正確顯示傳遞的來源，但圖像不起作用...

如果我在按鈕模板外部的圖像上使用相同的來源，則圖像工作得很好。

Answer 1

選項1：

<Image Height="200" Stretch="None" DataContext="{TemplateBinding local:SourceHolder.Source}" Width="200" Source="{Binding}"></Image> 

選項2： 如果不起作用，使用在圖像使用ValueConverter綁定的其它替代轉換URI到圖像

public class UriToImageConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
     if (value == null) 
      return null; 

     if (value is string) 
      value = new Uri((string)value, UriKind.RelativeOrAbsolute); 

     if (value is Uri) 
     { 
      BitmapImage bi = new BitmapImage(); 
      bi.BeginInit();     
      bi.UriSource = (Uri)value; 
      bi.EndInit(); 
      return bi; 
     } 

     return null; 
    } 

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
     throw new NotImplementedException(); 
    } 
} 

<Window.Resources> 
    <local:UriToImageConverter x:Key="uriToImageConverter"></local:UriToImageConverter> 
</Window.Resources> 

<Image Height="200" Stretch="None" DataContext="{TemplateBinding local:SourceHolder.Source}" Width="200" Source="{Binding Converter={StaticResource ResourceKey=uriToImageConverter}}"></Image>