如何让图像填充文本 - 始终大小相同 - xamarin.forms

Question

我正在尝试用图像做一个按钮，每个按钮里面都有一个文本......但我对 xamarin 表单了解不多，我是初学者 而且我的图片很小，而文字却比它大...

我正在使用一个网格...在它内部还有一个网格，每个按钮有 1 列和 1 行（图像和文本） 我需要图像（即我的按钮）获取其中文本的大小

我现在的xml：

<!-- Buttons grid-->
    <Grid HorizontalOptions="Center" Margin="20,20,20,20" RowSpacing="30" ColumnSpacing="10" BackgroundColor="Aquamarine" VerticalOptions="FillAndExpand">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

  <!--One of my buttons grid, there are 4 others as this one--> 
 <Grid Grid.Column="0" Grid.Row="1" BackgroundColor="Gray">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <Image Source="comochegarbtn.png" HorizontalOptions="FillAndExpand" Grid.Row="0" Grid.Column="0">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer Tapped="MapaClique"/>
                </Image.GestureRecognizers>
            </Image>

            <StackLayout Grid.Row="0" Grid.Column="0"  HorizontalOptions="Center" VerticalOptions="Center">
                <Image Source="Location.png" VerticalOptions="FillAndExpand"/>
                <Label Text="Como Chegar" TextColor="White" HorizontalOptions="Center" Style="{Binding labelsfont}"/>
            </StackLayout>
          </Grid>
        </Grid>

在 android 中我可以使用 wrap_content 解决这个问题 但是在这里，以 xamarin 形式，我不知道如何解决它 灰色部分为网格项大小

Answer 1

如果您需要将文本的确切大小作为图像的宽度，则必须使用RelativeLayout。

在RelativeLayout 中，图像宽度使用RelativeToView。 这类似于 Android 中的相对布局。

<RelativeLayout>

            <Image RelativeLayout.WidthConstraint="{ConstraintExpression Type=Type=RelativeToView, ElementName=myStacklayout,Property=Width,Factor=1}" Source="comochegarbtn.png" HorizontalOptions="FillAndExpand" Grid.Row="0" Grid.Column="0">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer Tapped="MapaClique"/>
                </Image.GestureRecognizers>
            </Image>

            <StackLayout x:Name="myStacklayout" HorizontalOptions="Center" VerticalOptions="Center">
                <Image Source="Location.png" VerticalOptions="FillAndExpand"/>
                <Label Text="Como Chegar" TextColor="White" HorizontalOptions="Center" Style="{Binding labelsfont}"/>
            </StackLayout>
</RelativeLayout>

使用一种或两种相对布局不会对您产生太大影响。但是，如果您认为可以，您可以编写自定义渲染并在本机层中创建一个复杂的按钮。