Hiding grid rows dynamically

-- -- 922

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>

-- -- 922

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();
        }
    }

1 answer

JarvanZhang 23,961 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.
Please sign in to rate this answer.
JarvanZhang 23,961 Reputation points

2021-12-08T09:24:23.317+00:00

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

영훈 정 281 Reputation points

2022-10-24T08:58:08.487+00:00

I read your post well and I am also struggling with the same problem.

I also understand the situation where the RowHeight must be zero.
However, if you put the margin value of each control, the control will be cut off on the screen. What should I do in this case?
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

Hiding grid rows dynamically

1 answer

Your answer