Question

如何在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

Answer 1

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

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

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

如何在WPF中水平显示分组单选按钮？

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

1 个答案: