question

JassimAlRahma-9056 avatar image
0 Votes"
JassimAlRahma-9056 asked JarvanZhang-MSFT edited

Change the Height of Parent Row

Hi,

I have the following:

 <Grid Grid.Row="11" ColumnSpacing="0" RowSpacing="0">
     <Grid.RowDefinitions>
         <RowDefinition Height="Auto" />
         <RowDefinition Height="Auto" />
         <RowDefinition Height="Auto" />
     </Grid.RowDefinitions>
    
     <Grid.Triggers>
     <DataTrigger TargetType="Grid" Binding="{Binding Source={x:Reference LabelPostTreatments}, Path=Text, TargetNullValue=''}" Value="">
         <Setter Property="IsVisible" Value="False" />
     </DataTrigger>
     </Grid.Triggers>
    
     <Label Grid.Row="0" Margin="5" Text="Treatments : " TextColor="Red" VerticalOptions="Center" />
     <Label x:Name="LabelPostTreatments" Grid.Row="1" Margin="5" Text="{Binding post_treatments}" />
    
     <BoxView Grid.Row="2" HeightRequest="1" BackgroundColor="LightGray" HorizontalOptions="FillAndExpand" />
 </Grid>

How can I make the DataTrigger to change the parent row which is in the above Row="11"?


Thanks,
Jassim

dotnet-csharpdotnet-xamarindotnet-runtime
· 10
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi, JassimAlRahma-9056. The set and get methods of the Row/Column is static. To spcify a value to the row, please use Grid.Row command like below.

<Grid Grid.Row="11" ColumnSpacing="0" RowSpacing="0">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Grid.Triggers>
        <DataTrigger TargetType="Grid" Binding="{Binding Source={x:Reference LabelPostTreatments}, Path=Text, TargetNullValue=''}" Value="">
            <Setter Property="Grid.Row" Value="12"/>
        </DataTrigger>
    </Grid.Triggers>
    ...
    <Label x:Name="LabelPostTreatments" Grid.Row="1" Margin="5" Text="{Binding post_treatments}" />
</Grid>
0 Votes 0 ·

Hi, @JassimAlRahma-9056
May I know if you have got any chance to check my answer? I am glad to help if you have any other questions.

0 Votes 0 ·

Also sorry for not being clear, what I wanted to say about (Parent) is the Grid inside another Grid so the above grid is inside a Parent Grid like this:

 <Grid>
     <Grid.RowDefinitions>
         <RowDefinition x:Name="THIS IS THE ROW" Height="Auto" />
     </Grid.RowDefinitions>
    
     <Grid Grid.Row="0" ColumnSpacing="0" RowSpacing="0">
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto" />
             <RowDefinition Height="*" />
         </Grid.RowDefinitions>
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="Auto" />
             <ColumnDefinition Width="*" />
         </Grid.ColumnDefinitions>
    
         <Grid.Triggers>
         <DataTrigger TargetType="Grid" Binding="{Binding Source={x:Reference LabelPostGender}, Path=Text, TargetNullValue=''}" Value="">
             <Setter Property="Grid.Row" Value="0" />
         </DataTrigger>
         </Grid.Triggers>
0 Votes 0 ·
Show more comments

But this will set the Row to Zero not the Row's Height to Zero

0 Votes 0 ·

1 Answer

JarvanZhang-MSFT avatar image
0 Votes"
JarvanZhang-MSFT answered JarvanZhang-MSFT edited

but the problem is when you have 10 Rows in the grid were set to Auto and you hide the content of Row 2 to Row9 then you will have a big empty space

Sorry for the unclear information. The empty space is the row spacing, please set RowSpacing to 0 for the parent grid. The below code could hide the row successfully, please check it. And here is the working gif: https://imgur.com/q0d6pdD

<Grid RowSpacing="0">
    <Grid.RowDefinitions>
        <RowDefinition x:Name="this_is_the_row" Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Grid Grid.Row="0" ColumnSpacing="0" RowSpacing="0" BackgroundColor="LightBlue">
        <Grid.Triggers>
            <DataTrigger TargetType="Grid" Binding="{Binding Source={x:Reference LabelPostGender}, Path=Text, TargetNullValue=''}" Value="testing">
                <Setter Property="IsVisible" Value="False" />
            </DataTrigger>
        </Grid.Triggers>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Label Grid.Row="0" Margin="5" Text="Treatments : " TextColor="Red" VerticalOptions="Center" />
        <Entry x:Name="LabelPostGender" Grid.Row="1" Margin="5" />

        <BoxView Grid.Row="2" HeightRequest="1" BackgroundColor="LightGray" HorizontalOptions="FillAndExpand" />
    </Grid>
    <Label Text="the second row" Grid.Row="1"/>
    <BoxView HeightRequest="150" Grid.Row="2" BackgroundColor="Red">
        <BoxView.Triggers>
            <DataTrigger TargetType="BoxView" Binding="{Binding Source={x:Reference LabelPostGender}, Path=Text, TargetNullValue=''}" Value="testing">
                <Setter Property="HeightRequest" Value="0" />
            </DataTrigger>
        </BoxView.Triggers>
    </BoxView>
    <Label Text="the 4th row" Grid.Row="3"/>
</Grid>
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.