Left Align Label for Radio Buttons

In my project I have a number of sFExpander controls and within each Expander I have a number of RadioButtons and a Label control.  The Expander Text is  "Center" , However, my Expander.Content is also Centered. 

I want  Horizontal radio buttons to the right of the "Left-Aligned" Label.  How do I make the Text Label Left Aligned?

Below is my sample code:

    <ScrollView
        Grid.Row="1"
        Grid.RowSpan="5"
        Grid.Column="0"
        Grid.ColumnSpan="2">


        <StackLayout>
            <expander:SfExpander
                x:Name="constitutionalExpander"
                HorizontalOptions="Center"
                IsExpanded="True">
                <expander:SfExpander.Header>
                    <Label
                        BackgroundColor="Aqua"
                        HorizontalOptions="Center"
                        Text="Constitutional" />
                </expander:SfExpander.Header>




                <expander:SfExpander.Content>
                    <StackLayout>


                        <StackLayout HorizontalOptions="Center" Orientation="Horizontal">
                            <Label Text="Weight Change" VerticalTextAlignment="Center" />
                            <buttons:SfRadioGroupKey
                                x:Name="weightChangeBtn"
                                CheckedChanged="weightchangeGroupKey_CheckedChanged"
                                Orientation="Horizontal">
                                <buttons:SfRadioButton x:Name="weightChangeBtnNA" Text="N/A" />
                                <buttons:SfRadioButton x:Name="weightChangeBtnYes" Text="Yes" />
                                <buttons:SfRadioButton x:Name="weightChangeBtnNo" Text="No" />
                            </buttons:SfRadioGroupKey>
                        </StackLayout>


                        <StackLayout HorizontalOptions="Center" Orientation="Horizontal">


                            <Label Text="Anorexia" VerticalTextAlignment="Center" />


                            <buttons:SfRadioGroupKey
                                x:Name="anorexiaRadioGroup"
                                CheckedChanged="anorexiaRadioGroup_CheckedChanged"
                                HorizontalOptions="Start"
                                Orientation="Horizontal">


                                <buttons:SfRadioButton
                                    x:Name="anorexiaBtnNA"
                                    HorizontalOptions="Start"
                                    Text="N/A" />
                                <buttons:SfRadioButton x:Name="anorexiaBtnYes" Text="Yes" />
                                <buttons:SfRadioButton x:Name="anorexiaBtnNo" Text="No" />
                            </buttons:SfRadioGroupKey>
                        </StackLayout>


                    </StackLayout>
                </expander:SfExpander.Content>
            </expander:SfExpander>
        </StackLayout>
    </ScrollView>
</ContentPage>



1 Reply

BV Brundha Velusamy Syncfusion Team November 4, 2024 07:13 AM UTC

Hi Frederick Switzer,


Query: I want  Horizontal radio buttons to the right of the "Left-Aligned" Label.  How do I make the Text Label Left Aligned?


To meet your requirement of aligning the text of SfRadioButton to the left, here are two recommended approaches:


  1. Using FlowDirection
    You can set the FlowDirection property to RightToLeft on SfRadioButton. This will place the radio button on the right side and align the text to the left.


Code snippet:

<syncfusion:SfRadioButton Text="Yes" FlowDirection="RightToLeft"/>

  1. Using HorizontalStackLayout
    Alternatively, you can place a Label and SfRadioButton within a HorizontalStackLayout, using the Label for text. This approach allows you to customize the layout precisely, placing the label’s text where needed and the radio button separately.


Code snippet:

<HorizontalStackLayout Spacing="2">

<Label Text="Yes"… />

<syncfusion:SfRadioButton…/>

</HorizontalStackLayout>


If you have further questions or need additional assistance, please feel free to reach out!


Regards,

Brundha V


Loader.
Up arrow icon