Change the Height of Parent Row

Jassim Al Rahma 1,556

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

JarvanZhang 23,951

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>

JarvanZhang 23,951 Reputation points

2021-08-19T03:01:21.46+00:00

Hi, @Jassim Al Rahma
May I know if you have got any chance to check my answer? I am glad to help if you have any other questions.
Jassim Al Rahma 1,556 Reputation points

2021-08-21T11:43:38.17+00:00

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

Jassim Al Rahma 1,556

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>

Jassim Al Rahma 1,556 Reputation points

2021-08-21T11:46:19.307+00:00

In the Trigger, I want to set the height of the Row marked as THIS IS THE ROW
JarvanZhang 23,951 Reputation points

2021-08-23T02:09:48.203+00:00
what I wanted to say about (Parent) is the Grid inside another Grid so the above grid is inside a Parent Grid like this

@Jassim Al Rahma
Yes, I test the above behavior and the trigger is indeed executed.

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

If you want to change the row's height, you could the grid's heightRequest directly. However when I tested the function, the content of the grid could not be hide when changing the heightRequest to 0. Try to change the heightRequest to 1 instead.

<Grid.Triggers> <DataTrigger TargetType="Grid" Binding="{Binding Source={x:Reference LabelPostTreatments}, Path=Text, TargetNullValue=''}" Value=""> <Setter Property="HeightRequest" Value="1"/> </DataTrigger> </Grid.Triggers>
JarvanZhang 23,951 Reputation points

2021-08-26T08:16:31.16+00:00

Hi, @Jassim Al Rahma
May I know whether your issue has been solved or not? If not, please share it in here. We can work together to figure it out.
Jassim Al Rahma 1,556 Reputation points

2021-08-28T13:01:43.89+00:00
No it's not working, it is setting the height for the same grid because the trigger is inside that grid but what I want is to set the height of this grid:

<RowDefinition x:Name="THIS IS THE ROW" Height="Auto" />
JarvanZhang 23,951 Reputation points

2021-08-30T01:42:14.587+00:00

@Jassim Al Rahma Add the trigger for the 'grid' you want to change. In your case, you seem want to change the parent grid layout and please add the trigger for the parent grid layout. But change the heightRequest to 0 seems will not hide the view. If you want to hide the view in the specific condition, please set IsVisible to false instead. Please see my posted answer.
Jassim Al Rahma 1,556 Reputation points

2021-08-31T22:04:43.93+00:00

Sorry @JarvanZhang but it is tsill not clear. my code above is hiding the Grid which is fine with me 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 between Row 1 and Row 10 and that is the reason I need to set the Row Heigh to Zero.

Now, the problem is, in my code I am hiding the content which is the Grid but if I will move below code to the Parent I will need to hide the Row not the Grid so the TargetType needs to target the specific row

So how to achieve this, for example if it was Row no. 2 from the parent grid?

Hope my question is clear...

Accepted answer

JarvanZhang 23,951

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>

Share via

Change the Height of Parent Row

0 additional answers