Hiding grid rows dynamically

Question

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.

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>  

Answer 1

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.