Forum Xamarin Xamarin.Forms

Pushing ImageButton makes the image very small [Xamarin]

fecoooofecoooo Member ✭✭
edited March 19 in Xamarin.Forms

Please check the GIF for the problem.

I am actually using two imagebutton here and change IsVisible, since I couldn't accomplish swapping the image by Binding on the source.

ViewModel:

`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}" />

Best Answers

  • LandLuLandLu Member, Xamarin Team Xamurai
    Accepted Answer

    This is because you consumed a very large size play or pause image. It will cause some rendering issues when the visible state changes.
    I used one image button to achieve this effect by changing its source:

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

    Here is the converter:

    public class SourceChangedConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            bool isPlay = (bool)value;
            if (isPlay)
            {
                return "pause.png";
            }
            return "play.png";
        }
    
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
    

    It renders much better on my side:

    Attached the modified sample here.

Answers

  • LandLuLandLu Member, Xamarin Team Xamurai

    Could you please share a sample to help us reproduce this issue?
    I tried to use your code above to build this play button but it worked on my side:

  • fecoooofecoooo Member ✭✭

    You have to hold it for a while and release somewhere else (not over the button). I am also testing this on Android, maybe that should change things too.

  • LandLuLandLu Member, Xamarin Team Xamurai

    Still can't reproduce this issue.
    Could you share your sample and the specific steps about how to reproduce it?

  • fecoooofecoooo Member ✭✭

    Sure thing, Landlu, will get back soon.

  • fecoooofecoooo Member ✭✭

    So, here's a repro for the issue:
    https://github.com/fecoooo/SwapRepro

  • LandLuLandLu Member, Xamarin Team Xamurai
    Accepted Answer

    This is because you consumed a very large size play or pause image. It will cause some rendering issues when the visible state changes.
    I used one image button to achieve this effect by changing its source:

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

    Here is the converter:

    public class SourceChangedConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            bool isPlay = (bool)value;
            if (isPlay)
            {
                return "pause.png";
            }
            return "play.png";
        }
    
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
    

    It renders much better on my side:

    Attached the modified sample here.

  • fecoooofecoooo Member ✭✭

    Thank you LandLu! This indeed solved the problem.

    What do you mean the image is large? The size in pixels, or the size in bytes? What should I keep in mind regarding image assets?

  • fecoooofecoooo Member ✭✭

    Will keep in mind!

  • LuiCLuiC USMember ✭✭

    If you haven't already, I'd post this as an issue at https://github.com/xamarin/Xamarin.Forms/issues

Sign In or Register to comment.