Extra Whitespace Added When Including Multiple RadioButtons

Nathan Sokalski 4,111

I have a RadioButton Style & ControlTemplate, and when using them for more than one RadioButton, a large amount of whitespace is added above & below the containing Grid. Here is the design part of the ControlTemplate:

<Grid BackgroundColor="Transparent" Padding="0" HorizontalOptions="Fill" Margin="0" VerticalOptions="Fill" ColumnSpacing="5">  
	<Grid.RowDefinitions><RowDefinition Height="*"/></Grid.RowDefinitions>  
	<Grid.ColumnDefinitions><ColumnDefinition Width="Auto"/><ColumnDefinition Width="Auto"/></Grid.ColumnDefinitions>  
	<Grid BackgroundColor="Transparent" Padding="0" Margin="0" HorizontalOptions="Fill" VerticalOptions="Fill">  
		<Ellipse Stroke="Black" WidthRequest="24" HeightRequest="24" StrokeThickness="2" VerticalOptions="Center" HorizontalOptions="Center" Fill="Transparent"/>  
		<Ellipse x:Name="Check" WidthRequest="14" HeightRequest="14" Fill="Black" VerticalOptions="Center" HorizontalOptions="Center"/>  
	</Grid>  
	<ContentPresenter Grid.Column="1" BackgroundColor="Transparent" HorizontalOptions="Fill" Margin="0" Padding="0" VerticalOptions="Fill"/>  
</Grid>

When there is only one RadioButton, it looks as I would expect. However, if there are multiple RadioButton(s), extra whitespace gets added above & below the Grid. Here are screenshots of the Grid with three & one RadioButton:

I found that if I remove either the Grid containing the Ellipse(s) or the ContentPresenter from the ControlTemplate (either one, it just won't let me have both) it works fine, but if both are there having multiple RadioButtons causes extra whitespace above & below the Grid containing the RadioButtons. Why is this space being added when there are multiple RadioButton(s)? Thanks.

Accepted answer

Nathan Sokalski 4,111 Reputation points

2021-02-08T16:51:30.583+00:00
I don't know WHY it solved the problem (since the problem was vertical and my solution set the WidthRequest, which is a horizontal property), but when I add a WidthRequest to each RadioButton it stopped showing the unexplained whitespace. In order to make this dynamic (not needing to manually calculate the width for a literal value), I used Binding, such as in the following (in this example the RadioButton is radBoth):

WidthRequest="{Binding Width,Source={x:Reference radBoth}}"

So I think there is a bug in the XAML Layout controls, but hopefully this can help others as a workaround, since it drove me crazy for weeks!
Please sign in to rate this answer.

0 comments No comments
Sign in to comment

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

2 additional answers

Cole Xia (Shanghai Wicresoft Co,.Ltd.) 6,751 Reputation points

2021-01-26T09:10:39.667+00:00

Hello,

Welcome to Microsoft Q&A!

I test with your code , it works fine without extra whitespace .

Could you post the code used in xaml ? We need to reproduce the issue first for further troubleshooting.

Thank you.

If the response is helpful, please click "Accept Answer" and upvote it.
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.
Nathan Sokalski 4,111 Reputation points

2021-01-26T18:17:54.85+00:00

Unfortunately, no, since that would exceed the 1000 character limit. The code in my original post is the XAML in the ControlTemplate. Here is the XAML in the page:

<StackLayout> <Grid BackgroundColor="Green"> <Grid.ColumnDefinitions><ColumnDefinition Width="Auto"/><ColumnDefinition Width="Auto"/><ColumnDefinition Width="Auto"/><ColumnDefinition Width="*"/></Grid.ColumnDefinitions> <Grid.RowDefinitions><RowDefinition Height="Auto"/></Grid.RowDefinitions> <RadioButton Content="▲Only"/> <RadioButton Grid.Column="1" Content="▼Only"/> <RadioButton Grid.Column="2" Content="Both" IsChecked="True"/> </Grid> </StackLayout>

The confusing thing is why side by side RadioButton(s) are causing vertical space OUTSIDE the Grid.

Nathan Sokalski 4,111 Reputation points

2021-01-26T18:24:56.753+00:00

NOTE: The code I just posted does not include a Style in the RadioButton(s) because the site refused to let me submit it when I included that, but it is in my actual code:

<RadioButton Style="{StaticResource RadioButtonStyle}" Content="▲Only"/> <RadioButton Grid.Column="1" Style="{StaticResource RadioButtonStyle}" Content="▼Only"/> <RadioButton Grid.Column="2" Style="{StaticResource RadioButtonStyle}" Content="Both" IsChecked="True"/>

Cole Xia (Shanghai Wicresoft Co,.Ltd.) 6,751 Reputation points

2021-01-27T08:24:10.83+00:00

I reproduced the issue with Grid , even I set VerticalOptions as Start , the space still exists.

As a workaround , I suggest you use StackLayout instead Grid to wrap the radioButtons ,it works fine on my side .

Nathan Sokalski 4,111 Reputation points

2021-01-27T19:29:55.257+00:00

Thanks, using a StackLayout fixed the problem, so I guess it's the best workaround for now. I guess we'll just have to hope that it gets fixed soon, thanks again for your help!

Cole Xia (Shanghai Wicresoft Co,.Ltd.) 6,751 Reputation points

2021-01-28T02:10:41.51+00:00

If problem gets resolved could you mark this answer ?

Nathan Sokalski 4,111 Reputation points

2021-02-08T02:39:51.307+00:00

I just found another interesting thing. If I change all the ColumnDefinitions to * instead of Auto, then the extra whitespace is removed. However, first of all, I cannot do this because it prevents the items from being laid out the way I want. But it also seems very strange that changing a property related to horizontal layout is changing the vertical spacing. It almost feels like it has X & Y mixed up with each other at some point during layout. Any ideas?
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.
mc 4,876 Reputation points

2021-01-28T02:18:42.943+00:00

The Grid has a default spacing you can set it to 0.
Please sign in to rate this answer.
Nathan Sokalski 4,111 Reputation points

2021-01-28T03:27:30.407+00:00

That doesn't help. There is only 1 row, but even if I do set it to 0, the problem still occurs.

Nathan Sokalski 4,111 Reputation points

2021-02-03T18:59:59.977+00:00

I found something that happens with the ControlTemplate. If I add IsVisible="False" to the Grid containing the Ellipse(s) or to the ContentPresenter it displays fine (no extra whitespace). I was also able to add multiple other elements (a Label, for example), as long as I added the IsVisible="False" to the ContentPresenter. The summary is that the ContentPresenter doesn't like being visible at the same time as other elements.
Sign in to comment

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

Share via

Extra Whitespace Added When Including Multiple RadioButtons

2 additional answers

Your answer