【问题标题】:How to set width of image inside button in Xamarin.Forms xaml?如何在 Xamarin.Forms xaml 中设置按钮内的图像宽度?
【发布时间】:2022-05-12 21:10:51
【问题描述】:

我想知道是否可以在此按钮内设置图像的宽度和高度:

<Button Image="ic_music_white.png" BorderWidth="1" BorderColor="White" HeightRequest="56"  BackgroundColor="PowderBlue" HorizontalOptions="Center" Clicked="Button_Clicked">
</Button>

有什么办法吗?

【问题讨论】:

    标签: xamarin xamarin.forms


    【解决方案1】:

    您始终可以创建一个图像控件并向其添加一个轻击手势识别器。这样您就可以更好地控制图像大小和位置。

    XAML

    <Image x:Name="myImage" Source="ic_music_white.png" HeightRequest="56"  BackgroundColor="PowderBlue" HorizontalOptions="Center"/>
    

    XAML.CS

    TapGestureRecognizer tapEvent = new TapGestureRecognizer();
    tapEvent.Tapped += Button_Clicked;
    myImage.GestureRecognizers.Add(tapEvent);
    

    【讨论】:

      【解决方案2】:

      在 iOS 项目中,padding 可以调整按钮内图像的大小。如果您的宽度为 50,内边距为 10,则生成的图像宽度将为 30。

      【讨论】:

      • 具有固定像素数的填充和边距可能会在分辨率变化时导致布局问题
      【解决方案3】:

      这在 Xamarin.Forms 项目中是不可能的,但您可以创建自定义呈现器,这将允许您修改本机控件的属性。

      对于 iOS,您将更改 ImageEdgeInsets

      对于 Android,您可能需要查看Button renderer,以便获得任何想法。

      希望这会有所帮助。-

      【讨论】:

        【解决方案4】:

        不,您无法管理 button 内图像的高度/宽度。 更好的选择是创建一个堆栈布局,然后将文本和图像放入其中。 我这样做的方式:

        <StackLayout Grid.Row="2" Orientation="Horizontal" HorizontalOptions="FillAndExpand"  VerticalOptions="End" HeightRequest="60">
        
                        <Label Text="Review task" HorizontalOptions="EndAndExpand" VerticalOptions="CenterAndExpand" FontSize="25" FontAttributes="Bold"/>
                        <Image Source="nextarrow_white.png" HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand" HeightRequest="32" Margin="20,4,0,0"/>
        
                </StackLayout>
        

        【讨论】:

          【解决方案5】:

          如果您只想将按钮放置在屏幕中而不添加文本或其他内容,您可以将按钮放置在网格布局中,如下所示

          <Grid RowDefinitions="auto"
                        ColumnDefinitions="auto"
                        Margin="40 40 40 40">
                        
                        <ImageButton Grid.Row="1"
                                   Grid.Column="1"
                                   Source="Resources/Images/installations.png"
                                   HorizontalOptions="Center"
                                   VerticalOptions="Center"/>
                    </Grid>

          在那里,您对网格布局应用边距,这种情况下的图像将自动调整其大小以适应可用空间。

          【讨论】:

            【解决方案6】:

            您现在可以使用缩放来更改内容的大小。 和 padding 以在图像周围添加边框。

            例子

              <Button 
                Image="ic_music_white.png" 
                BorderWidth="1"  
                BorderColor="White" 
                HeightRequest="56"  
                BackgroundColor="PowderBlue" 
                HorizontalOptions="Center" 
                Clicked="Button_Clicked"
                Scale = "0.7",
                Padding = "10"
                >
              </Button>
            

            【讨论】:

              【解决方案7】:

              您错过了添加 WidthRequest。你能像下面这样添加WidthRequest吗

              <Button Image="ic_music_white.png" BorderWidth="1" BorderColor="White" HeightRequest="56" WidthRequest="56"  BackgroundColor="PowderBlue" HorizontalOptions="Center" Clicked="Button_Clicked">
              </Button>
              

              【讨论】:

              • 感谢您的回答Venky,但是如果我将WidthRequest 放在
              猜你喜欢
              • 2019-01-02
              • 2021-01-21
              • 1970-01-01
              • 2018-10-02
              • 2021-11-26
              • 1970-01-01
              • 2020-12-17
              • 2020-11-05
              • 2011-05-20
              相关资源
              最近更新 更多