WPF-MVVM Radio Button generated automatically

Question

I have an application where I present a Form. The form contains multiple Radio Buttons and they are displayed 1 next to each other. I need to load the colors from the list and create a radio button for each color, then when the users selects a color I want to grab the "SelectedItem" from the control. I know you can do that easily with a list but how do I do that when I need to place the controls next to each other ??

Code :

<Grid>
    <StackPanel VerticalAlignment="Top">
        <GroupBox Name="CheckBoxes" Margin="5" >
            <StackPanel Name="wrpCheckBoxes" DataContext="{Binding ListParts}">
                <RadioButton Name="chkRed" Content="{Binding Description}" Visibility="{Binding DataBindingModel.ColorRed}" Tag="{Binding ID}" />
                <RadioButton Name="chkGreen" Content="Green" Visibility="{Binding DataBindingModel.ColorGreen}" />
                <RadioButton Name="chkBlue" Content="Blue" Visibility="{Binding DataBindingModel.ColorBlue}" />
                <RadioButton Name="chkGray" Content="Gray" Visibility="{Binding DataBindingModel.ColorGray}" />
                <RadioButton Name="chkYellow" Content="Yellow" Visibility="{Binding DataBindingModel.ColorYellow}" />
                <RadioButton Name="chkBlack" Content="Black" Visibility="{Binding DataBindingModel.ColorBlack}" />
            </StackPanel>
        </GroupBox>
    </StackPanel>

    <StackPanel VerticalAlignment="Bottom" Margin="5">
        <ListView x:Name="listBoxItems" BorderThickness="1" ItemsSource="{Binding ListParts}">
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="Index" DisplayMemberBinding="{Binding Index}" />
                    <GridViewColumn Header="Description" DisplayMemberBinding="{Binding Description}" />
                    <GridViewColumn Header="Price" DisplayMemberBinding="{Binding Price}" />
                </GridView>
            </ListView.View>
        </ListView>

        <!--<ListBox x:Name="listBoxItems" ItemsSource="{Binding ListParts}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <RadioButton GroupName="rbList" Tag="{Binding}" Content="{Binding Description}" />
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>-->
    </StackPanel>
</Grid>

Remark : the ListParts is just a list containing the colors, also this view is attached to a viewModel

ViewModel :

public class DataBindingViewModel : ViewModelBase
{
    #region Private Fields
    private DataBindingModel _DataBindingModel;
    private List<PartsModel> _ListParts;

    private string _Description1;
    private int _TagID;
    #endregion

    #region Properties
    public DataBindingModel DataBindingModel
    {
        get { return this._DataBindingModel; }
        set
        {
            if (this._DataBindingModel == value)
                return;

            this._DataBindingModel = value;
            OnPropertyChanged("DataBindingModel");
        }
    }

    public List<PartsModel> ListParts
    {
        get { return this._ListParts; }
        set
        {
            if (this._ListParts == value)
                return;

            this._ListParts = value;
            OnPropertyChanged("ListParts");
        }
    }

    public string Description1
    {
        get { return this._Description1; }
        set
        {
            if (this._Description1 == value)
                return;

            this._Description1 = value;
            OnPropertyChanged("Description1");
        }
    }

    public int TagID
    {
        get { return this._TagID; }
        set
        {
            if (this._TagID == value)
                return;

            this._TagID = value;
            OnPropertyChanged("TagID");
        }
    }
    #endregion

    public DataBindingViewModel(DataBindingModel DataBinding)
    {
        this.DataBindingModel = DataBinding;
        this.ListParts = Common.GetData();


    }
}

And the Common Class is just laoding the Data :

public static class Common
{
    public static List<PartsModel> GetData()
    {
        List<PartsModel> listParts = new List<PartsModel>();

        listParts.Add(new PartsModel(1, "1234561", "Color Red", Convert.ToDecimal(15.99)));
        listParts.Add(new PartsModel(2, "1234562", "Color Green", Convert.ToDecimal(17.00)));
        listParts.Add(new PartsModel(3, "1234563", "Color Blue", Convert.ToDecimal(12.95)));
        listParts.Add(new PartsModel(4, "1234564", "Color Gray", Convert.ToDecimal(9.95)));
        listParts.Add(new PartsModel(5, "1234565", "Color Yellow", Convert.ToDecimal(10.55)));
        listParts.Add(new PartsModel(6, "1234566", "Color Black", Convert.ToDecimal(99.99)));

        return listParts;
    }
}

How can I display the members of the ListParts on each of my radio button, without the use of a ListView ?

Let me know if you guys need more info and thanks for the answers

Answer 1

You can use ListBox.ItemsPanel to specify the type of panel you want - probably <StackPanel Orientation="Horizontal/> .

<ListBox>
  <ListBox.ItemTemplate>
    <DataTemplate>
      <RadioButton GroupName="rbList" Tag="{Binding}" Content="{Binding Description}" />
    </DataTemplate>
  </ListBox.ItemTemplate>
  <ListBox.ItemsPanel>
    <ItemsPanelTemplate>
      <StackPanel Orientation="Horizontal"
                  VerticalAlignment="Center"
                  HorizontalAlignment="Center"/>
    </ItemsPanelTemplate>
  <ListBox.ItemsPanel>
<ListBox>

See the examples in the ItemsPanel property documentation on MSDN for more information.