0

我们如何在 WPF 中以水平方式显示垂直单选按钮

我正在处理一个 WPF 项目，我正在使用此代码创建一个与我的 Data Srouce 绑定的列表框单选组。

我使用下面的代码创建了一个带有单选按钮的列表框并将其与我的数据源绑定

代码 ：

`<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");
            }
        }`

一切正常，但问题是我需要所有单选按钮以锯齿形样式显示。由于我的表单没有太多空间来垂直容纳单选按钮，所以有什么办法可以以可以水平显示的方式显示这些单选按钮？

例如（不能发布图片）

One   Two   Three
Four  Five  Six
Seven Eight Nine
4

1 回答 1

1

您可以ItemsPanel在列表框样式中设置您的样式。添加到radioListBox样式：

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

在 3 列的网格中显示单选按钮。使用ItemsPanel，您可以更改显示您的项目的容器。

于 2013-03-18T09:20:13.580 回答