Question

屏幕的黄色部分被浪费了。并且图像被浪费之后的空间。如何将所有内容向左移动？图像和文本都在左侧，并缩小图像和文本左侧的间隙？我曾尝试过边际，但无法。

非常感谢

爱耶

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:app01" x:Class="app01.MainPage">
    <Grid RowSpacing="0,0,0,20">
        <Grid.RowDefinitions>
            <RowDefinition Height="70"/>
            <RowDefinition Height="40" />
            <RowDefinition Height="*˙"/>
            <RowDefinition Height="40"/>
         </Grid.RowDefinitions>
        <Image Source="activair_logo.jpg" Grid.Row="0"/>
        <Label Text="Services" Grid.Row="1" TextColor="Black" FontSize="36" FontAttributes="Bold"/>
        <Grid RowSpacing="10" Margin="-100,10,0,0" Grid.Row="2">
            <Grid.RowDefinitions>
                <RowDefinition Height="50" />
                <RowDefinition Height="50" />
                <RowDefinition Height="50" />
                <RowDefinition Height="50" />
                <RowDefinition Height="50" />
                <RowDefinition Height="50" />        
                <RowDefinition Height="50" />        
            </Grid.RowDefinitions>
            <Grid Grid.Row="0" ColumnSpacing="-100">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="5%" />
                    <ColumnDefinition Width="95%" />
                </Grid.ColumnDefinitions>
                <StackLayout Grid.Column="0">
                    <Image Source="./aa_airfreight.jpg" HeightRequest="50"></Image>
                </StackLayout>
                <StackLayout Grid.Column="1"  VerticalOptions="Top">
                    <Label Grid.Column="1" Text="Air Freight" FontSize="24" TextColor="Green" FontAttributes="Bold" />
                </StackLayout>    
            </Grid>
            <Grid Grid.Row="1" ColumnSpacing="-100">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="5%" />
                    <ColumnDefinition Width="95%" />
                </Grid.ColumnDefinitions>
                <StackLayout Grid.Column="0">
                    <Image Source="./aa_oceanfreight.jpg" HeightRequest="50"></Image>
                </StackLayout>
                <StackLayout Grid.Column="1"  VerticalOptions="Top">
                    <Label Text="Sea Freight" FontSize="24" TextColor="Green"  FontAttributes="Bold" />
                </StackLayout>
            </Grid>
           <Grid Grid.Row="2" ColumnSpacing="-100">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="5%" />
                    <ColumnDefinition Width="95%" />
                </Grid.ColumnDefinitions>
                <StackLayout Grid.Column="0">
                    <Image Source="./aa_customs.jpg" HeightRequest="50"></Image>
                </StackLayout>
                <StackLayout Grid.Column="1" VerticalOptions="Top">
                    <Label Text="Customs" FontSize="24" TextColor="Green"  FontAttributes="Bold" />
                </StackLayout>
            </Grid>
           <Grid Grid.Row="3" ColumnSpacing="-100">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="5%" />
                    <ColumnDefinition Width="95%" />
                </Grid.ColumnDefinitions>
                <StackLayout Grid.Column="0">
                    <Image Source="./aa_transportation.jpg" HeightRequest="50"></Image>
                </StackLayout>
                <StackLayout Grid.Column="1"  VerticalOptions="Top">
                    <Label Text="Transportation" FontSize="24" TextColor="Green"  FontAttributes="Bold" />
                </StackLayout>
            </Grid>
           <Grid Grid.Row="4" ColumnSpacing="-100">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="5%" />
                    <ColumnDefinition Width="95%" />
                </Grid.ColumnDefinitions>
                <StackLayout Grid.Column="0">
                    <Image Source="./aa_specialcargo.jpg" HeightRequest="50"></Image>
                </StackLayout>
                <StackLayout Grid.Column="1"  VerticalOptions="Top">
                    <Label Text="Special Cargo" FontSize="24" TextColor="Green"  FontAttributes="Bold" />
                </StackLayout>
            </Grid>
           <Grid Grid.Row="5" ColumnSpacing="-100">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="5%" />
                    <ColumnDefinition Width="95%" />
                </Grid.ColumnDefinitions>
                <StackLayout Grid.Column="0">
                    <Image Source="./aa_exhibitioncargo.jpg" HeightRequest="50"></Image>
                </StackLayout>
                <StackLayout Grid.Column="1"  VerticalOptions="Top">
                    <Label Text="Exhibition Cargo" FontSize="24" TextColor="Green"  FontAttributes="Bold" />
                </StackLayout>
            </Grid>
          <Grid Grid.Row="6" ColumnSpacing="-100">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="5%" />
                    <ColumnDefinition Width="95%" />
                </Grid.ColumnDefinitions>
                <StackLayout Grid.Column="0" Grid.Row="0">
                    <Image Source="./aa_relocation.jpg" HeightRequest="50"></Image>
                </StackLayout>
                <StackLayout Grid.Column="1" Grid.Row="0" VerticalOptions="Center">
                    <Label Text="International Relocation" FontSize="24" TextColor="Green"  FontAttributes="Bold" />
                </StackLayout>
            </Grid>
         </Grid>
         <Label Text="Customers" Grid.Row="3" TextColor="Black" FontSize="36" FontAttributes="Bold"/>
    </Grid> 
</ContentPage>

我早些时候粘贴了代码-不知道为什么它没有出现-通过使用网格上的负边距设法做得更好。这可以跨不同的设备移植吗？这是正确的方法吗？我试图读取默认页边距-在大多数情况下似乎为6-但在这种情况下似乎要多得多。好像有70px的空白，而-60px的空白看起来不错。这样做的正确方法是什么，以使其在设备和屏幕类型以及分辨率上都能很好地呈现？我已经到了这一点。

现在，我不知道如何在主网格中获得“客户”行，以跟上前一行，后者是主网格中的子网格。我好困惑。我可以在“服务”标题下设置行的高度，但我不想这样做，因为当用户点击任何服务时，我想显示很多文本。因此，该行的高度将是动态的。因此，我想在该内部网格中使用Height =“ *”，以便可以在触摸时“折叠”和“展开”所有行。

如何获取包含“客户”的行以使其在Services子网格下保持对齐？

非常感谢

Answer 1

没有看到您的XAML或UI代码，很难猜测。

但是，如果您使用的是Grid或Stacklayout，则将HorizontalOptions设置为StartAndExpand会将图像放置在左侧。

Answer 2

在主网格中设置VerticalOptions =“ StartAndExpand”

<Grid RowSpacing="0,0,0,20" VerticalOptions="StartAndExpand">
        <Grid.RowDefinitions>
            <RowDefinition Height="70"/>
            <RowDefinition Height="40" />
            <RowDefinition Height="*"/>
            <RowDefinition Height="40"/>
        </Grid.RowDefinitions>

如何调整此尺寸以使用可用的屏幕宽度？

2 个答案: