按下 ImageButton 使图像非常小 [Xamarin]答案

【问题标题】：Pushing ImageButton makes the image very small [Xamarin]按下 ImageButton 使图像非常小 [Xamarin]
【发布时间】：2020-03-19 12:36:42
【问题描述】：

请检查 GIF 是否有问题。

我实际上在这里使用了两个图像按钮并更改了 IsVisible，因为我无法通过在源上绑定来完成交换图像。

视图模型：

    public bool IsAudioPlaying
    {
        get => player.IsPlaying;
    }

...

    public void PlayOrPause()
    {
        if (player.IsPlaying)
            player.Pause();
        else
            player.Play();
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("IsAudioPlaying"));
    }

XAML：

  <ImageButton  AbsoluteLayout.LayoutBounds=".5, 0, 100, 100" AbsoluteLayout.LayoutFlags="PositionProportional" Source="play.png" Padding="20" WidthRequest="80" HeightRequest="80" 
                          CornerRadius="40" VerticalOptions="Center" HorizontalOptions ="Center" BackgroundColor="#cea448" Clicked="PlayOrPause" Margin="10"  IsVisible="{Binding IsAudioPlaying, Converter={StaticResource InverseBoolConverter}}" />
  <ImageButton  AbsoluteLayout.LayoutBounds=".5, 0, 100, 100" AbsoluteLayout.LayoutFlags="PositionProportional" Source="pause.png" Padding="20" WidthRequest="80" HeightRequest="80" 
                          CornerRadius="40" VerticalOptions="Center" HorizontalOptions ="Center" BackgroundColor="#cea448" Clicked="PlayOrPause" Margin="10"  IsVisible="{Binding IsAudioPlaying}" />

【问题讨论】：

标签： xamarin swap imagebutton visible

【解决方案1】：

我实际上在这里使用了两个图像按钮并更改了 IsVisible，因为我无法通过在源上绑定来完成交换图像。

创建一个视图模型。

 public class ViewModel : INotifyPropertyChanged
{
    private bool _isAudioPlaying;
    public bool IsAudioPlaying
    {
        get
        {
            return _isAudioPlaying;
        }
        set
        {
            _isAudioPlaying = value;
            OnPropertyChanged("IsAudioPlaying");
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

使用 ObservableCollection 进行更新。

 ObservableCollection<ViewModel> observableCollection { get; set; }

    public MainPage()
    {
        InitializeComponent();

        observableCollection = new ObservableCollection<ViewModel>()
        {
           new ViewModel(){ IsAudioPlaying=true}
        };
        this.BindingContext = observableCollection;
    }

    private void PlayOrPause(object sender, EventArgs e)
    {

        if (observableCollection[0].IsAudioPlaying == true)
        {
            observableCollection[0].IsAudioPlaying = false;
            imageButton.Source = "pause.png";
        }
        else
        {
            observableCollection[0].IsAudioPlaying = true;
            imageButton.Source = "play.png";
        }
    }

【讨论】：