CODEWITHSUNDEEP
wpfmvvm
Jerry Davis
Jerry Davis

Reputation: 161

Horizontal RadioButtons in ListBox

In WPF I am trying to binding radio buttons to a property in the ViewModel such as this SO answer https://stackoverflow.com/a/2285732

Everything works fine, except that the Buttons are stacked Vertically. Now, this seems an easy fix, just modify the ItemsPanelTemplate.

Here's my code:

<ListBox ItemsSource="{Binding ItemOptions}" SelectedItem="{Binding SelectedOption}">
     <ListBox.ItemsPanel>
          <ItemsPanelTemplate>
               <StackPanel Orientation="Horizontal" IsItemsHost="True" />
          </ItemsPanelTemplate>
     </ListBox.ItemsPanel>
     <ListBox.ItemContainerStyle>
          <Style TargetType="{x:Type ListBoxItem}">
               <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ListBoxItem}"  >
                            <RadioButton Content="{TemplateBinding Content}" 
                                 IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsSelected}"/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
           </Style>
     </ListBox.ItemContainerStyle>
</ListBox>

However, the items remain stacked vertically. Any ideas why this has no effect on the orientation of the ListBox?

Upvotes: 5

Views: 1713

Answers (2)

ΩmegaMan
ΩmegaMan

Reputation: 31616

Here is a basic example without styling. Note that the WrapPanel handles the layout.

    <ListBox Margin="0,10,0,0"        
             ItemsSource="{StaticResource Orders}">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel HorizontalAlignment="Stretch"/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <RadioButton Content="{Binding CustomerName}" />
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

Data with the model defined in code behind.

<Page.Resources>
    <model:Orders x:Key="Orders">
        <model:Order CustomerName="Alpha"
                    OrderId="997"
                    InProgress="True" />
        <model:Order CustomerName="Beta"
                    OrderId="998"
                    InProgress="False" />
        <model:Order CustomerName="Omega"
                    OrderId="999"
                    InProgress="True" />
        <model:Order CustomerName="Zeta"
                    OrderId="1000"
                    InProgress="False" />
    </model:Orders>
</Page.Resources>

Result

enter image description here

Upvotes: 1

Hannish
Hannish

Reputation: 1532

Try this:

<ListBox.Template>
      <ControlTemplate TargetType="{x:Type ListBox}">
          <ScrollViewer x:Name="scrollviewer" 
                        HorizontalScrollBarVisibility="Visible" CanContentScroll="False">
            <StackPanel IsItemsHost="True" Orientation="Horizontal" />
          </ScrollViewer>
      </ControlTemplate>
 </ListBox.Template>

I tried to get this working with the ItemsPanelTemplate, as you did, without success. This worked great for me. Regards

Upvotes: 4

Related Questions