Hiding grid rows dynamically

-- -- 797 Reputation points
2021-12-02T20:41:39.137+00:00

Hi

I am trying to hide grid rows based on if data exists. My grid code is given below at the end. The VisibilityConverter returns true if data exists and false otherwise. GridRowHeightConverter returns 5 if data exists or 0 if not. The IsVisible logic seems to be working and fields and titles disappear if no data exits however some blank row spacing still exists. Sample screen below where 'Comment' field (titled Additional) is blank so does not appear but in its place there is extra space.

154586-screenshot-spacing-issue.png

How can I fix this incorrect row spacing issue?

Thanks

Regards

<Grid >  
 <Grid.ColumnDefinitions>  
 <ColumnDefinition Width="80"/>  
 <ColumnDefinition Width="*"/>  
 </Grid.ColumnDefinitions>  
 <Grid.RowDefinitions>  
 <RowDefinition Height="5"/>  
 <RowDefinition Height="Auto"/>  
 <RowDefinition Height="5"/>  
 <RowDefinition Height="Auto"/>  
 <RowDefinition Height="{Binding Comments,Converter={StaticResource GridRowHeightConverter}}"/>  
 <RowDefinition Height="Auto"/>  
 <RowDefinition Height="{Binding SpecialRequirements,Converter={StaticResource GridRowHeightConverter}}"/>  
 <RowDefinition Height="Auto"/>  
 </Grid.RowDefinitions>  
 <Label Grid.Column="0" Grid.Row="1" Text="Venue:" />  
 <Label Grid.Column="1" Grid.Row="1" Text="{Binding Venue}" />  
 <Label Grid.Column="0" Grid.Row="3" Text="Uniform:"/>  
 <Label Grid.Column="1" Grid.Row="3" Text="{Binding Uniforms}" />  
 <Label Grid.Column="0" Grid.Row="5" Text="Additional:" IsVisible="{Binding Comments,Converter={StaticResource VisibilityConverter}}"/>  
 <Label Grid.Column="1" Grid.Row="5" Text="{Binding Comments}" IsVisible="{Binding Comments,Converter={StaticResource VisibilityConverter}}"/>  
 <Label Grid.Column="0" Grid.Row="7" Text="Special:" IsVisible="{Binding SpecialRequirements,Converter={StaticResource VisibilityConverter}}" />  
 <Label Grid.Column="1" Grid.Row="7" Text="{Binding SpecialRequirements}" IsVisible="{Binding SpecialRequirements,Converter={StaticResource VisibilityConverter}}" />  
</Grid>  
Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,254 questions
{count} votes

1 answer

Sort by: Most helpful
  1. JarvanZhang 23,931 Reputation points
    2021-12-03T02:38:20.383+00:00

    Hello @-- -- ,​

    Welcome to our Microsoft Q&A platform!

    Sample screen below where 'Comment' field (titled Additional) is blank so does not appear but in its place there is extra space.

    This is due to the rowSpacing of the gird. Though the 'Comments' line (Grid.Row="5") is invisible, the Auto rowDefinition will still take the spacing. To avoid this, try setting RowSpacing to 0 directly. If you want to keep the spacing between each row, you could set margin for the child views instead.

       <Grid RowSpacing="0">  
           ...  
           <Label Grid.Column="0" Grid.Row="1" Text="Venue:" Margin="0,3"/>  
           <Label Grid.Column="1" Grid.Row="1" Text="{Binding Venue}" Margin="0,3"/>  
           <Label Grid.Column="0" Grid.Row="3" Text="Uniform:" Margin="0,3"/>  
           <Label Grid.Column="1" Grid.Row="3" Text="{Binding Uniforms}" Margin="0,3"/>  
           <Label Grid.Column="0" Grid.Row="5" Text="Additional:" IsVisible="{Binding Comments,Converter={StaticResource VisibilityConverter}}" Margin="0,3"/>  
           <Label Grid.Column="1" Grid.Row="5" Text="{Binding Comments}" IsVisible="{Binding Comments,Converter={StaticResource VisibilityConverter}}" Margin="0,3"/>  
           <Label Grid.Column="0" Grid.Row="7" Text="Special:" IsVisible="{Binding SpecialRequirements,Converter={StaticResource VisibilityConverter}}" Margin="0,3"/>  
           <Label Grid.Column="1" Grid.Row="7" Text="{Binding SpecialRequirements}" IsVisible="{Binding SpecialRequirements,Converter={StaticResource VisibilityConverter}}" Margin="0,3"/>  
       </Grid>  
    

    Best Regards,

    Jarvan Zhang


    If the response is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.