Как реализовать привязку для кнопок изображений, чтобы изображение отображалось только после загрузки изображения?

#c# #xamarin #data-binding #binding #runtime

Вопрос:

У меня есть две кнопки изображений, которые должны переключать свои изображения при нажатии.

 <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 меняет местами источники в моем игровом массиве и активирует INotifyPropertyChanged. Все это прекрасно работает. Я просто хотел бы знать, как реализовать, чтобы изображение привязывалось только в том случае, если изображение загружено. Потому что, как вы видите на следующих изображениях, есть короткий период, когда изображение не отображается. Это коротко, но это раздражает. Источник изображений является встроенным ресурсом.

введите описание изображения здесь

введите описание изображения здесь

введите описание изображения здесь

Ответ №1:

Мне интересно, используете ли вы встроенные изображения или просто локальные изображения ? Рекомендуется использовать локальные изображения .

Более того , есть еще один способ реализовать эту функцию(поменять изображение местами, нажав на кнопку).

  1. Добавьте bool свойство в viewmodel.
     public class ViewModel : BaseViewModel
     {
         private bool _isOne;
         public bool isOne { 
             get 
             {
                 return _isOne;
             } 
             set 
             {
                 _isOne = value;
                 NotifyPropertyChanged();
             } 
         }
     }
     
  2. Добавьте два для двух изображений . 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;
         }
     }
     
  3. Создайте привязку к кнопке изображения .
     <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>
     
  4. Измените свойство в событии нажатия кнопки.
     private void ImageButton_Clicked(object sender, EventArgs e)
         {
             model.isOne = !model.isOne;
         }