将一个网格放大而不会影响其他网格的大小

时间:2019-05-20 09:17:03

标签: xaml xamarin.forms

我有两个相同大小的网格,但我想将其中一个增大,当更改Row的大小时,另一个网格变小。我也许并没有了解谁可以使用网格,但是最后一行具有Height =“ *”的行应该根据我的行进行缩放。

我尝试过:

<Grid.RowDefinitions>
                <RowDefinition Height="0.05*"/>
                <RowDefinition Height="0.9*"/>
                <RowDefinition Height="0.05*"/>
                <RowDefinition Height="1.2*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.05*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="0.05*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="0.05*"/>
</Grid.ColumnDefinitions>

如果与其他图像进行比较,您会发现前两个按钮已更改大小,而我只需要秒。

With different size

正常代码。

<Grid Grid.Row="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="0.05*"/>
                <RowDefinition Height="0.9*"/>
                <RowDefinition Height="0.05*"/>
                <RowDefinition Height="0.9*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.05*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="0.05*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="0.05*"/>
            </Grid.ColumnDefinitions>


            <Frame BackgroundColor="#40000000" BorderColor="#FFFFFF" CornerRadius="6" Padding="0" Grid.Row="1" Grid.Column="1">
                <Grid RowSpacing="0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="0.2*"/>
                        <RowDefinition Height="0.02*"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="0.001*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="0.001*"/>
                    </Grid.ColumnDefinitions>
                    <Grid Grid.Row="0"  Grid.Column="1" RowSpacing="0" x:Name="MiddleGrid">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="0.7*"/>
                            <RowDefinition Height="2.5*"/>
                            <RowDefinition Height="0.3*"/>
                            <RowDefinition Height="0.6*"/>
                            <RowDefinition Height="0.7*" x:Name="Price"/>
                        </Grid.RowDefinitions>
                        <Image Source="melaopresunto.png" Grid.Row="1" x:Name="CategoryImage"/>
                        <Label Text="Melão c/ Presunto" FontAttributes="Bold" VerticalTextAlignment="Start" TextColor="White" HorizontalTextAlignment="Center" Grid.Row="3"/>
                        <Label Text="6.90€" VerticalTextAlignment="Center" TextColor="White" HorizontalTextAlignment="Center" Grid.Row="4"/>
                    </Grid>
                    <Grid Grid.Row="1" Grid.Column="1" IsVisible="False" x:Name="Quantity" RowSpacing="0" ColumnSpacing="0" BackgroundColor="#800E152F">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="0.5*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="0.5*"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="0.05*"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="0.05*"/>
                        </Grid.RowDefinitions>
                        <Button Text="-" TextColor="White" Padding="0" CornerRadius="4" FontAttributes="Bold" FontSize="Small" IsEnabled="False" BackgroundColor="#3F3C42" Clicked="QntLabelLess" x:Name="QntLess" Grid.Column="0" Grid.Row="1"/>
                        <Label Text="1" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" TextColor="White" Grid.Column="1" x:Name="QntLabel" Grid.Row="1"/>
                        <Button Text="+" Padding="0" CornerRadius="4" FontAttributes="Bold" FontSize="Small" TextColor="#000000" BackgroundColor="#FF8A00" Clicked="QntLabelPlus" Grid.Column="2" Grid.Row="1" x:Name="QntPlus"/>
                    </Grid>
                    <Grid RowSpacing="0" Grid.Column="1">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="0.03*"/>
                            <RowDefinition Height="0.25*"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="0.25*"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <ImageButton Source="sobremesa.png" BackgroundColor="Black" Clicked="Ingredients" x:Name="Ingredient" Grid.Row="1" Grid.Column="0">
                        </ImageButton>
                    </Grid>
                </Grid>
                <Frame.GestureRecognizers>
                    <TapGestureRecognizer 
                        Tapped="TapGestureRecognizer_Tapped"
                        NumberOfTapsRequired="1"/>
                </Frame.GestureRecognizers>
            </Frame>


            <Frame BackgroundColor="#40000000" BorderColor="#FFFFFF" CornerRadius="6" Padding="0" Grid.Row="1" Grid.Column="3">
                <Grid RowSpacing="0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="0.2*"/>
                        <RowDefinition Height="0.02*"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="0.001*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="0.001*"/>
                    </Grid.ColumnDefinitions>
                    <Grid Grid.Row="0"  Grid.Column="1" RowSpacing="0" x:Name="MiddleGrid1">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="0.7*"/>
                            <RowDefinition Height="2.5*"/>
                            <RowDefinition Height="0.3*"/>
                            <RowDefinition Height="0.6*"/>
                            <RowDefinition Height="0.7*" x:Name="Price1"/>
                        </Grid.RowDefinitions>
                        <Image Source="melaopresunto.png" Grid.Row="1" x:Name="CategoryImage1"/>
                        <Label Text="Melão c/ Presunto" FontAttributes="Bold" VerticalTextAlignment="Start" TextColor="White" HorizontalTextAlignment="Center" Grid.Row="3"/>
                        <Label Text="6.90€" VerticalTextAlignment="Center" TextColor="White" HorizontalTextAlignment="Center" Grid.Row="4"/>
                    </Grid>
                    <Grid Grid.Row="1" Grid.Column="1" IsVisible="False" x:Name="Quantity1" RowSpacing="0" ColumnSpacing="0" BackgroundColor="#800E152F">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="0.5*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="0.5*"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="0.05*"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="0.05*"/>
                        </Grid.RowDefinitions>
                        <Button Text="-" TextColor="White" Padding="0" CornerRadius="4" FontAttributes="Bold" FontSize="Small" IsEnabled="False" BackgroundColor="#3F3C42" Clicked="QntLabelLess1" x:Name="QntLess1" Grid.Column="0" Grid.Row="1"/>
                        <Label Text="1" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" TextColor="White" Grid.Column="1" x:Name="QntLabel1" Grid.Row="1"/>
                        <Button Text="+" Padding="0" CornerRadius="4" FontAttributes="Bold" FontSize="Small" TextColor="#000000" BackgroundColor="#FF8A00" Clicked="QntLabelPlus1" Grid.Column="2" Grid.Row="1" x:Name="QntPlus1"/>
                    </Grid>
                </Grid>
                <Frame.GestureRecognizers>
                    <TapGestureRecognizer 
                        Tapped="TapGestureRecognizer_Tapped1"
                        NumberOfTapsRequired="1"/>
                </Frame.GestureRecognizers>
            </Frame>


            <Frame BackgroundColor="#40000000" BorderColor="#FFFFFF" CornerRadius="6" Padding="0" Grid.Row="3" Grid.Column="1">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="0.2*"/>
                        <RowDefinition Height="2.8*"/>
                        <RowDefinition Height="0.7*"/>
                        <RowDefinition Height="0.7*"/>
                        <RowDefinition Height="0.2*"/>
                    </Grid.RowDefinitions>
                    <Image Source="carne.png" Grid.Row="1"/>
                    <Label Text="Pomedoro" VerticalTextAlignment="Start" TextColor="White" HorizontalTextAlignment="Center" Grid.Row="2"/>
                    <Label Text="3,50€" VerticalTextAlignment="Start" TextColor="White" HorizontalTextAlignment="Center" Grid.Row="3"/>
                </Grid>
            </Frame>


            <Frame BackgroundColor="#40000000" BorderColor="#FFFFFF" CornerRadius="6" Padding="0" Grid.Row="3" Grid.Column="3">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="0.2*"/>
                        <RowDefinition Height="2.8*"/>
                        <RowDefinition Height="0.7*"/>
                        <RowDefinition Height="0.7*"/>
                        <RowDefinition Height="0.2*"/>
                    </Grid.RowDefinitions>
                    <Image Source="carne.png" Grid.Row="1"/>
                    <Label Text="Salada de Legumes" VerticalTextAlignment="Start" TextColor="White" HorizontalTextAlignment="Center" Grid.Row="2"/>
                    <Label Text="5,50€" VerticalTextAlignment="Start" TextColor="White" HorizontalTextAlignment="Center" Grid.Row="3"/>
                </Grid>
            </Frame>
</Grid>

With same size

我知道这是很多代码,但是您真的不需要知道框架中的内容。

1 个答案:

答案 0 :(得分:0)

  

如果与其他图像进行比较,您会发现前两个按钮已更改大小,而我只需要秒。

根据您的描述,您要更改网格第二行“行定义”高度,而其他行定义高度不更改大小,最后一行定义应缩放,对吗?

如果是,请查看*和“自动”以了解网格定义。

1.Star(“ *”),这意味着该列将占用整个可用空间。

  1. 自动,列/行将适应子元素的大小。

例如,网格中有三行两列,如果要更改第二行定义高度,但第一行定义高度不变,则可以这样做,设置第一行定义子项的大小元素。

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

        </Grid.ColumnDefinitions>
        <Label HeightRequest="150"
            Grid.Row="0"
            Grid.Column="0"
            Text="this is test!" BackgroundColor="AliceBlue" />
        <Label
            Grid.Row="0"
            Grid.Column="1"
            Text="this is test!" BackgroundColor="Black" />
        <Label
            Grid.Row="1"
            Grid.Column="0"
            Text="this is test!" BackgroundColor="Blue" />
        <Label
            Grid.Row="1"
            Grid.Column="1"
            Text="this is test!" BackgroundColor="Yellow" />
        <Label
            Grid.Row="2"
            Grid.Column="0"
            Text="this is test!" BackgroundColor="Brown" />
        <Label
            Grid.Row="2"
            Grid.Column="1"
            Text="this is test!" BackgroundColor="DarkBlue" />
    </Grid>