Question

我正在尝试用图像做一个按钮，每个按钮里面都有一个文字......但我不太了解xamarin表格，我是初学者而且我的图像很少，而文字比它大......

我正在使用一个网格......并且在其中另一个网格，每个按钮有1个colunm和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>

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

如何使图像填充文本 - 总是相同的大小 - xamarin.forms

1 个答案: