根据绑定的布尔值更改图像源

Question

我有联系人 class:

public class Contact
{
    public Contact(Contact contact)
    {
        this.Username = contact.Username;
        this.GUID = contact.GUID;
        this.Msg = contact.Msg;
        this.Ring = contact.Ring;
    }

    public string Username { get; set; }
    public Guid GUID { get; set; }
    public bool Msg { get; set; }
    public bool Ring { get; set; }
}

这是xaml:

        <ListView Grid.Row="1" Grid.Column="0" Name="ContactsListView" 
                      IsItemClickEnabled="True" 
                      ItemsSource="{x:Bind m_Client.Contacts}">
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="data:Contact">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{x:Bind Username}" VerticalAlignment="Center" />
                    // HERE SHOULD BE THE <Image> THAT SHOULD BE BOUND TO THE Msg PROPERTY
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

我需要完成的是当 Msg boolean 为真时，图像源为一张图像，而当 Msg boolean 为 false 时图像源更改为第二张图像。

编辑： 我创建了这个 class:

namespace ContactsListBinding.Models
{
    public class MyImageConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, string language)
        {
            return (bool)value ? new BitmapImage(new Uri("ms-appx:///Assets/true.png")) : new BitmapImage(new Uri("ms-appx:///Assets/false.png"));
        }

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

这是XAML:

<Page
    x:Class="ContactsListBinding.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ContactsListBinding"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:data="using:ContactsListBinding.Models"
    xmlns:namespace="ContactsListBinding.Models">

    <Page.Resources>
        <data:MyImageConverter x:Key="MyImageConverter" />
    </Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Button Grid.Row="0" Grid.Column="0" Name="AddContactButton" Content="Add Contact" Click="AddContactButton_Click" />
        <ListView Grid.Row="1" Grid.Column="0" Name="ContactsListView" 
                          IsItemClickEnabled="True" 
                          ItemsSource="{x:Bind m_Client.Contacts}">
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="data:Contact">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{x:Bind Username}" VerticalAlignment="Center" />
                        <Image Source="{x:Bind Msg, Converter={StaticResources MyImageConverter}}" />
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</Page>

我做错了什么？

Answer 1

您应该创建实现 IValueConverter 接口的自定义转换器

public class MsgToImagePathCovnerter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        var imagePath = "ms-appx:///Assets/1.jpg";
        var msg = (bool)value;
        if (msg)
        {
            imagePath = "ms-appx:///Assets/2.jpg";
        }

        return imagePath;
    }

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

在XAML中声明：

<local:MsgToImagePathCovnerter x:Key="MsgToImagePathCovnerter"/>

并在您的 DataTemplate 中使用：

        <DataTemplate x:DataType="data:Contact">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{x:Bind Username}" VerticalAlignment="Center" />
                <Image Source="{x:Bind Msg, Converter={StaticResource MsgToImagePathCovnerter}"/>
            </StackPanel>
        </DataTemplate>

Answer 2

创建转换器：

public class MyImageConverter : IValueConverter
{
   public object Convert(object value, Type targetType, object parameter, string language)
   {
      return (bool)value ? new BitmapImage(new Uri("trueImagePath")) : new BitmapImage(new Uri("falseImagePath"));
   }

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

您还需要向页面添加资源：

<Page.Resources>
   <namespace:MyImageConverter x:Key="MyImageConverter" />
</Page.Resources>

然后像这样添加图像控件：

<Image Source="{x:Bind Msg, Converter="{StaticResources MyImageConverter}"}" />

Answer 3

使用Trigger，代码短

<ListView.ItemTemplate>
    <DataTemplate x:DataType="data:Contact">
         <StackPanel Orientation="Horizontal">
               <TextBlock Text="{x:Bind Username}" VerticalAlignment="Center" />
               <Image Source="false.png">
                    <Image.Triggers>
                         <DataTrigger TargetType="Image" Binding="{x:Bind Msg}" Value="True">
                              <Setter Property="Source" Value="true.png" />
                          </DataTrigger>
                     </Image.Triggers>
               </Image>
         </StackPanel>
   </DataTemplate>
</ListView.ItemTemplate>

根据绑定的布尔值更改图像源

Change the image source based on binded boolean

c#

xaml

uwp

uwp-xaml