How can we display grouped radio buttons horizontally in WPF?

Question

How can we display Vertical radio button in horizontally manner in WPF

I am working on a WPF project and I am using this code to create a list box radio group which is bind with my Data Srouce.

I have used below code to create a listbox with radio button and bind it with my datasource

Code :

`<Window.Resources>
    <Style x:Key="radioListBox" TargetType="ListBox" BasedOn="{StaticResource {x:Type ListBox}}">
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="Margin" Value="5" />
        <Setter Property="DisplayMemberPath" Value="Text" />
        <Setter Property="SelectedValuePath" Value="Value" />
        <Setter Property="Background" Value="{x:Null}" />
        <Setter Property="ItemContainerStyle">
            <Setter.Value>
                <Style TargetType="ListBoxItem" BasedOn="{StaticResource {x:Type ListBoxItem}}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="ListBoxItem">
                                <Grid Background="Transparent">
                                    <RadioButton Focusable="False"  Margin="5,5,5,5" IsHitTestVisible="False" IsChecked="{TemplateBinding IsSelected}">
                                        <ContentPresenter />
                                    </RadioButton>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Setter.Value>
        </Setter>
    </Style>
    </Window.Resources>



<DockPanel>
    <!-- StatusBar just to make sure two-way binding is working properly -->
    <StatusBar DockPanel.Dock="Bottom" BorderBrush="Black" BorderThickness="0,1,0,0">
        <TextBlock Text="{Binding CurrentChild.Details}" TextWrapping="Wrap" />
    </StatusBar>

    <!-- Details pane -->
    <Border Margin="5" BorderBrush="LightGray" BorderThickness="1">
        <Grid>
            <Grid.Resources>
                <!-- Common style for header labels -->
                <Style TargetType="Label">
                    <Setter Property="HorizontalAlignment" Value="Right" />
                    <Setter Property="VerticalAlignment" Value="Top" />
                    <Setter Property="FontWeight" Value="Bold" />
                    <Setter Property="Margin" Value="5,2" />
                </Style>
            </Grid.Resources>

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" MinWidth="104" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" MinHeight="27" />
                <RowDefinition Height="Auto" MinHeight="27" />
            </Grid.RowDefinitions>


            <Label Grid.Row="3" Content="My Sample Numbers:" />

            <ListBox Grid.Row="3" Grid.Column="1" Style="{StaticResource radioListBox}" 
                     ItemsSource="{Binding MyNumberTypes}" Height="Auto" Margin="5,4,5,0" VerticalAlignment="Top" />
        </Grid>
    </Border>
</DockPanel>`



    public IEnumerable<ValueAndText<NumType>> MyNumberTypes
        {
            get
            {
                yield return new ValueAndText<NumType>(NumType.One, "One");
                yield return new ValueAndText<NumType>(NumType.Two, "Two");
                yield return new ValueAndText<NumType>(NumType.Three, "Three");
                yield return new ValueAndText<NumType>(NumType.Four, "Four");
                yield return new ValueAndText<NumType>(NumType.Five, "Five");
                yield return new ValueAndText<NumType>(NumType.Six, "Six");
                yield return new ValueAndText<NumType>(NumType.Seven, "Seven");
                yield return new ValueAndText<NumType>(NumType.Eight, "Eight");
                yield return new ValueAndText<NumType>(NumType.Nine, "Nine");
            }
        }`

Every thing is working fine but the problem is I need all radio button to display in zig zag style. Since my form does not have much space to accommodate the radio buttons vertically so is there any way I can display these radio button in a way it can be displayed horizontally?

for example (cant post image)

One   Two   Three
Four  Five  Six
Seven Eight Nine

Answer 1

You can style your ItemsPanel in your Listbox Style. Add to radioListBox style:

<Setter Property="ItemsPanel">
 <Setter.Value>
  <ItemsPanelTemplate>
   <UniformGrid Columns="3" />
  </ItemsPanelTemplate>
 </Setter.Value>
</Setter>

to display radiobuttons in a grid of 3 columns. Using ItemsPanel you can change the container in which yours items are displayed.