[Xamarin]点击ImageButton后图片极小问题咨询

看起来你遇到的问题是切换两个ImageButton的可见性后，图片被压缩得极小。这通常是因为布局约束在控件从不可见转为可见时没有正确应用，或者ImageButton的图片缩放设置不对。我给你几个可行的解决方案：

方案1：设置ImageButton的Aspect属性 #

默认情况下，ImageButton的图片可能会根据控件大小被拉伸或压缩，导致显示异常。你可以给两个ImageButton加上Aspect="AspectFit"属性，确保图片保持原有比例且适配控件大小：

<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}}"
    Aspect="AspectFit" />
<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}"
    Aspect="AspectFit" />

方案2：调整AbsoluteLayout的布局参数 #

你当前设置的LayoutFlags="PositionProportional"意味着只有位置是按比例计算，大小是固定的100x100，但你又设置了WidthRequest="80"和HeightRequest="80"，这可能导致布局计算冲突。可以尝试将LayoutBounds的大小直接设为80x80，去掉重复的WidthRequest和HeightRequest，避免冲突：

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

方案3：用单个ImageButton切换Source（更简洁的替代方案） #

其实你不需要用两个ImageButton，直接绑定Source到一个动态属性，根据IsAudioPlaying切换图片即可，这样能从根源上避免切换可见性带来的布局问题：

ViewModel新增属性并更新触发逻辑： #

public string PlayPauseIcon => IsAudioPlaying ? "pause.png" : "play.png";

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

XAML修改为单个ImageButton： #

<ImageButton 
    AbsoluteLayout.LayoutBounds=".5, 0, 80, 80" 
    AbsoluteLayout.LayoutFlags="PositionProportional" 
    Source="{Binding PlayPauseIcon}" 
    Padding="20" 
    CornerRadius="40" 
    VerticalOptions="Center" 
    HorizontalOptions="Center" 
    BackgroundColor="#cea448" 
    Clicked="PlayOrPause" 
    Margin="10"
    Aspect="AspectFit" />

你可以先尝试方案1和方案2，如果还是不行，方案3应该能彻底解决问题。

内容的提问来源于stack exchange，提问作者Ferenc Dajka