How can we display grouped radio buttons horizontally in WPF? - 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.