在 xamarin 表单设计方面需要帮助

Posted 2023-04-13

【中文标题】在 xamarin 表单设计方面需要帮助

【英文标题】：Need help in xamarin form Design

【发布时间】：2017-03-02 00:19:05

【问题描述】：

我正在使用具有 android 和 ios 项目的便携式 xamarin 表单（跨平台）制作应用程序。

我遇到了设计问题。

下面是我的代码。

<Grid ColumnSpacing="0" RowSpacing="0" >

    <Grid.RowDefinitions >
      <RowDefinition Height="Auto"></RowDefinition>
      <RowDefinition Height="Auto"></RowDefinition>
      <RowDefinition Height="Auto"></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>

    <StackLayout Grid.Row="0" Grid.Column="0" Padding="20,30,20,0">
      <StackLayout VerticalOptions="StartAndExpand" HorizontalOptions="FillAndExpand" HeightRequest="30" BackgroundColor="#6E335E" Padding="10,0,10,0" >
        <Label Text=" Binding CompanyName " FontSize="18"  HorizontalOptions="Start" VerticalOptions="CenterAndExpand"  HorizontalTextAlignment="Center" TextColor="White" ></Label>

      </StackLayout>
    </StackLayout>

    <StackLayout VerticalOptions="FillAndExpand" Grid.Row="1" HeightRequest="130"  HorizontalOptions="FillAndExpand" Padding="20,0,20,0">
      <Image  Source=" Binding LogoPath " VerticalOptions="FillAndExpand"   HorizontalOptions="FillAndExpand" Aspect="AspectFill"></Image>

    </StackLayout>

    <StackLayout Grid.Row="2" Grid.Column="0" Padding="10,0,10,30" VerticalOptions="StartAndExpand" HorizontalOptions="FillAndExpand" >
      <Image  Source="image_bottom.png" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Aspect="AspectFill"></Image>
    </StackLayout>

  </Grid>

下面是描述我想要设计的图片

请帮我设计问题。

提前感谢

【问题讨论】：

我看到了一些差异，圆角，第二张图片中有空格。您能否指出您正在尝试实现的功能？

我想删除墨西哥图像和紫色条之间的空间

你能澄清一下代码中错位的元素名称吗？是 image_bottom.png 吗？是您使用 Binding LogoPath 设置的元素吗？

image_bottom.png 是紫色图像，binding logoPath 是紫色颜色条上方的图像 (image_bottom.png)

@KirtiZare 尝试使用 LogoPath 图像为 StackLayout 设置填充

【参考方案1】：

您的 stacklayout 的高度为 130，因此行定义仅扩展到该点。您应该将定义设置为 *，并将网格垂直选项设置为 fillandexpand，以便填充剩余的空间。

<Grid.RowDefinitions >
          <RowDefinition Height="Auto"></RowDefinition>
          <RowDefinition Height="*"></RowDefinition>
          <RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>