Question

如何将Source属性从按钮模板传输到该模板中的Image？

这就是我的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：如果这不起作用，请使用在将uri转换为Image

的Image绑定中使用ValueConverter的其他替代方法

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>

按钮模板中的可变图像源

1 个答案: