如何实现 ImageButtons 的绑定，以便仅在加载图像后显示图像？答案

【问题标题】：How to implement Binding for ImageButtons so that the image is only displayed once the image is loaded?如何实现 ImageButtons 的绑定，以便仅在加载图像后显示图像？
【发布时间】：2021-12-25 03:24:56
【问题描述】：

我有两个 ImageButtons，点击时它们应该会切换它们的图像。

<ImageButton
      Grid.Column="15"
      Grid.Row="20"
      Clicked="Clicked"
      Source="{Binding Game[0], Converter={StaticResource StringToSourceConverter}}"
       >
</ImageButton>

<ImageButton
      Grid.Column="15"
      Grid.Row="20"
      Clicked="Clicked"
      Source="{Binding Game[1], Converter={StaticResource StringToSourceConverter}}"
       >
</ImageButton>

Clicked 方法交换了我的 Game 数组中的 Sources 并激活了 INotifyPropertyChanged。这一切都很好。我只想知道如何实现，只有在加载图像时才应该绑定图像。因为正如您在以下图像中看到的，有一小段时间没有显示图像。它很短，但很烦人。 ImageSource 是一个 EmbeddedResource。

【问题讨论】：

标签： c# xamarin data-binding binding runtime

【解决方案1】：

我想知道您是使用 Embedded images 还是仅使用 Local images ？建议使用本地图片。

此外，这个功能还有另外一种实现方式（点击按钮交换图片）。

在视图模型中添加bool 属性。

public class ViewModel : BaseViewModel
 {
     private bool _isOne;
     public bool isOne { 
         get 
         {
             return _isOne;
         } 
         set 
         {
             _isOne = value;
             NotifyPropertyChanged();
         } 
     }
 }

为两个 ImageButton 添加两个 Converter。

public class FirstConverter : IValueConverter
 {

     public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
     {

         bool isOne = (bool)value;

         return isOne ? "a.jpg" : "b.jpg";

     }

     public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
     {
         return true;
     }
 }
 public class SecondConverter : IValueConverter
 {

     public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
     {

         bool isOne = (bool)value;

         return isOne ? "b.jpg" : "a.jpg";

     }

     public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
     {
         return true;
     }
 }

在 ImageButton 上创建绑定。

<ContentPage.Resources>
     <ResourceDictionary>
         <local:FirstConverter x:Key="first" />
         <local:SecondConverter x:Key="second" />
     </ResourceDictionary>
 </ContentPage.Resources>

 <StackLayout>
     <ImageButton Clicked="ImageButton_Clicked"  Source="{Binding isOne, Converter={StaticResource first}}"/>
     <ImageButton Clicked="ImageButton_Clicked"  Source="{Binding isOne, Converter={StaticResource second}}"/>
 </StackLayout>

更改按钮单击事件中的属性。

private void ImageButton_Clicked(object sender, EventArgs e)
     {
         model.isOne = !model.isOne;
     }

【讨论】：