XAML 使用 DependencyProperty 将图像属性设置为值

Question

我有一个像这样的模型：

{
    "images": [{
        "image_url": "..........",
        "orientation": "horizontal"
    },
    {
        "image_url": "...............",
        "orientation": "vertical"
    }]
}

和一个 ListView 数据模板

<DataTemplate x:DataType="model:ImageItem">
    <controls:ImageEx Source="{x:Bind cover_image_url}" PlaceholderSource="" PlaceholderStretch="Uniform"/>
</DataTemplate>

现在，我希望 ImageEx 控件的 PlaceholderSource 属性与 orientation 一起更改。

更清楚，当图像属性是水平的，ImageEx会加载一个占位符1。当图像属性是垂直的，ImageEx会加载一个占位符 2.

如何做到这一点。请告诉我。

Answer 1

More clearly, when the image property is horizontal, ImageEx will load a place holder 1. When the image property is vertical, ImageEx will load a place holder 2.

您可以使用 IValueConverter 接口来处理，使用转换器 class 将不同的消息类型转换为 ImageEx 的不同 PlaceholderSource。您可以参考以下ImageConverter。

public class ImageConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        object img = null;

        switch (value.ToString())
        {
            case "horizontal":
                img = new BitmapImage(new Uri("ms-appx:///Assets/holder1.png"));
                break;
            case "vertical":
                img = new BitmapImage(new Uri("ms-appx:///Assets/holder2.png"));
                break;
            default:
                break;
        }

        return img;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

Xaml

<Page.Resources>
        <local:ImageConverter  x:Key="Converter"/>
</Page.Resources>

       ......

<DataTemplate x:DataType="model:ImageItem">
    <controls:ImageEx Source="{x:Bind cover_image_url}" PlaceholderSource="{x:Bind orientation,Converter={StaticResource Converter}}" PlaceholderStretch="Uniform"/>
</DataTemplate>

XAML 使用 DependencyProperty 将图像属性设置为值

XAML set image property to values using DependencyProperty

xaml

uwp

uwp-xaml

XAML 使用 DependencyProperty 将图像 属性 设置为值

XAML set image property to values using DependencyProperty

xaml

uwp

uwp-xaml

XAML 使用 DependencyProperty 将图像属性设置为值