Hiding grid rows dynamically

Question

question

78669366 asked yesterday JarvanZhang-MSFT answered yesterday

Hiding grid rows dynamically

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>

dotnet-xamarinforms

screenshot-spacing-issue.png (12.1 KiB)

· 1

5 |1600 characters needed characters left characters exceeded

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

78669366 · yesterday

Hi

Converters code below.

Regards

  public class VisibilityConverter : IValueConverter
     {
         public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
         {
             var theValue = (string)value;
             return string.IsNullOrWhiteSpace(theValue) ? false : true;
         }
    
         public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
         {
             throw new NotImplementedException();
         }
     }
    
     public class GridRowHeightConverter : IValueConverter
     {
         public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
         {
             var theValue = (string)value;
             return string.IsNullOrWhiteSpace(theValue) ? 0 : 5;
         }
    
         public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
         {
             throw new NotImplementedException();
         }
     }

0 ·

Answer 1 · 2021-12-03T02:38:20.383Z

JarvanZhang-MSFT answered yesterday

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.

5 |1600 characters needed characters left characters exceeded

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

question