How to add space between radio button and radio button text .net maui

Question

I have a radio group that looks good in Android but not in iOS. Also, it doesn't take the colour from the resources.

Android

iOS

<StackLayout Margin="10">
    <Grid ColumnDefinitions="*,*" RowDefinitions="*,*,*" >
        <RadioButton Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="0" 
					 GroupName="WorkTimeRadioButtons" Content="Example" IsChecked="{Binding ...}" />
        <RadioButton Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="1"
                     GroupName="WorkTimeRadioButtons" Content="Example"
                     IsChecked="{Binding ...}" />
        <RadioButton Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="2"
                     GroupName="WorkTimeRadioButtons" Content="Example"
                     IsChecked="{Binding ...}"/>
        <Frame Grid.Column="1" Grid.RowSpan="3">
            <Entry 
                Text="{Binding ..}"/>
        </Frame>
    </Grid>
</StackLayout>

How can i add space to iOS without changing in Android?

Thanks

Answer 1

Hello,

I have a radio group that looks good in Android but not in iOS. Also, it doesn't take the colour from the resources.

Yes, I can reproduce this issue, TextColor not working for iOS platform.

How can i add space to iOS without changing in Android?

Based on two issues, we can re-define a RadioButton.Content for iOS platform and Android platform.

For iOS, we can display arbitrary content, add a Label in the RadioButton.Content, set the textcolor and Margin for label

For Android, we do not make any changes.

You can refer to the following code.

<StackLayout Margin="10">
               <OnPlatform x:TypeArguments="View">
                    <On Platform="iOS">
                        <!-- Use view for iOS here -->
                        <StackLayout Margin="10">
                            <Grid ColumnDefinitions="*,*" RowDefinitions="*,*,*" >
                                <RadioButton Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="0"
                                             GroupName="WorkTimeRadioButtons" IsChecked="{Binding .}" >
                                    <RadioButton.Content>
                                        <Label Text="Example" TextColor="DeepSkyBlue" Margin="10,0,0,0" ></Label>
                                    </RadioButton.Content>
                                </RadioButton>
                                <RadioButton Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="1"
                                             GroupName="WorkTimeRadioButtons"
                                             IsChecked="{Binding .}" >
                                    <RadioButton.Content>
                                        <Label Text="Example" TextColor="DeepSkyBlue" Margin="10,0,0,0" ></Label>
                                    </RadioButton.Content>
                                </RadioButton>
                                <RadioButton Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="2"
                                            GroupName="WorkTimeRadioButtons"
                                            IsChecked="{Binding .}">
                                    <RadioButton.Content>
                                        <Label Text="Example" TextColor="DeepSkyBlue" Margin="10,0,0,0" ></Label>
                                    </RadioButton.Content>
                                </RadioButton>
                                <Frame Grid.Column="1" Grid.RowSpan="3">
                                    <Entry
                                         Text="{Binding .}"/>
                                </Frame>
                            </Grid>
                        </StackLayout>
                    </On>


                    <On Platform="Android">
                       <!-- Use view for Android here -->
                        <StackLayout Margin="10">
                            <Grid ColumnDefinitions="*,*" RowDefinitions="*,*,*" >
                                <RadioButton Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="0"
                                             GroupName="WorkTimeRadioButtons" Content="Example" IsChecked="{Binding .}" />
                                <RadioButton Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="1"
                                             GroupName="WorkTimeRadioButtons" Content="Example"
                                             IsChecked="{Binding .}" />
                                <RadioButton Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="2"
                                             GroupName="WorkTimeRadioButtons" Content="Example"
                                             IsChecked="{Binding .}"/>
                                <Frame Grid.Column="1" Grid.RowSpan="3">
                                    <Entry
                                         Text="{Binding .}"/>
                                </Frame>
                            </Grid>
                        </StackLayout>
                    </On>
                   
                </OnPlatform>
                    
            </StackLayout>

Best Regards,

Leon Lu

---

If the answer is the right solution, 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.