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

Posted 2023-02-23

【中文标题】如何实现 ImageButtons 的绑定，以便仅在加载图像后显示图像？

【英文标题】：How to implement Binding for ImageButtons so that the image is only displayed once the image is loaded?

【发布时间】：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。

【参考方案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;