How to right align RadioButton in WPF

Question

Trying this tutorial http://www.wpftutorial.net/ListBoxDataTemplate.html

and thought of adding a radio button as follows

   <ListBox Margin="10" ItemsSource="{Binding}">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="60"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="20"/>
                    </Grid.ColumnDefinitions>
                    <Border Grid.Column="0" Margin="5" BorderBrush="Black" BorderThickness="1">
                        <Image Source="{Binding Path=Image}" Stretch="Fill" Width="50" Height="50" />
                    </Border>
                    <StackPanel Grid.Column="1" Margin="5" >
                        <StackPanel Orientation="Horizontal" TextBlock.FontWeight="Bold" >
                            <TextBlock Text="{Binding Path=Some1}" />
                            <TextBlock Text="{Binding Path=Firstname, FallbackValue=FirstName}" />
                            <TextBlock Text="{Binding Path=Lastname, FallbackValue=LastName}" Padding="3,0,0,0"/>
                        </StackPanel>
                        <TextBlock Text="{Binding Path=Age, FallbackValue=Age}" />
                        <TextBlock Text="{Binding Path=Role, FallbackValue=Role}" />
                    </StackPanel>

                    <RadioButton Grid.Column="2" Margin="5" HorizontalAlignment="Right" GroupName="A1"/>
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

but the resulting output is

enter image description here

Any help in aligning the radio button to the right next to the edge of listbox? thanks

score 3 · Answer 1 · edited May 23 '17 at 12:30

3

You need to align the widths of the grids within your DataTemplate. You can do this with a SharedSizeGroup, see this question for details:

How can I make a column in a listbox in WPF the same width for all items?

edited May 23 '17 at 12:30

Community

1
1

answered Mar 18 '12 at 07:11

ColinE

68,894
15
164
232

This won't fix the issue, the RadioButtons will be lined up but they still won't be on the right. – H.B. Mar 18 '12 at 08:00
@ColinE, the RadioButtons line up but they're not on the right still – user1102610 Mar 18 '12 at 16:40

score 3 · Accepted Answer · edited May 23 '17 at 12:13

3

First you need to get the template content to stretch, then you can create a content which has things aligned on the right.

edited May 23 '17 at 12:13

Community

1
1

answered Mar 18 '12 at 07:12

H.B.

166,899
29
327
400

score 0 · Answer 3 · answered Mar 18 '12 at 07:38

Adding more details to @ColinE answer...

Use SharedSizeGroup.

<ListBox ... Grid.IsSharedSizeScope="True">
   ...
   <Grid.ColumnDefinitions>
       <ColumnDefinition Width="60"/>
       <ColumnDefinition SharedSizeGroup="secondColumn" />
       <ColumnDefinition Width="20"/>
   </Grid.ColumnDefinitions>

   ...
</ListBox>

That will tell WPF to synchronize the second column of all the grids (technically, the width is 'Auto', but it will be the same width for all the Grids).

Another alternative would be to use ListView, and define the columns.

Not the issue here, the second column should be talking all space that is left which would make the RadioButton be on the right automtatically. The problem is that the Grid itself does not take all space. — H.B., Mar 18 '12 at 07:59

How to right align RadioButton in WPF

3 Answers3