简体   繁体   English

多列列表视图中的单选按钮分组

[英]Radio Button grouping in the multi column list view

I have a list view with 3 following columns: 1. a Text Column 2. Radio button 3. Radio button 我有一个列表视图,其中包含以下3列:1。文本列2.单选按钮3.单选按钮

I am trying to group the two radio Button but all the radio button gets in one group. 我正在尝试将两个单选按钮分组,但所有单选按钮都在一组中。 eg if there are two listview items (two rows), then all the 4 radio button gets grouped as one. 例如,如果有两个列表视图项(两行),则所有4个单选按钮被分组为一个。

<ListView Name="ruleListView"  ScrollViewer.HorizontalScrollBarVisibility="Auto" 
                    ScrollViewer.VerticalScrollBarVisibility="Auto" 
 Margin="10">
                <ListView.View>
                    <GridView>
                        <GridView.ColumnHeaderContainerStyle>
                            <Style TargetType="{x:Type GridViewColumnHeader}">
                                <Setter Property="IsEnabled" Value="False"/>
                            </Style>
                        </GridView.ColumnHeaderContainerStyle>
                        <GridViewColumn 
                                Header="Rule"

                                >
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <TextBlock 
                                        HorizontalAlignment="Right"
                                        Width="410"
                                        TextWrapping="Wrap" Text="{Binding Rule}" TextAlignment="Left"
                                        />
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
                        <GridViewColumn 
                                Header="Configuration Key"
                            Width="140"

                                >

                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                        <RadioButton GroupName="Rule"
                                                     VerticalAlignment="Center" 
                                                     HorizontalAlignment="Center" />
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
                        <GridViewColumn 
                                Header="Event"
                                Width="100"
                                >
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                        <RadioButton GroupName="Rule"
                                                 VerticalAlignment="Center" 
                                                 HorizontalAlignment="Center" 
                                                 IsChecked="True"
                                                 />
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
                    </GridView>
                </ListView.View>
            </ListView>

I expect that grouping should be done as per the particular row. 我希望按照特定的行进行分组。

As I understand it, the RadioButton.GroupName applies to all active controls. 据我了解,RadioButton.GroupName适用于所有活动控件。 That is why you are seeing all the radio buttons linked together. 这就是为什么你看到所有单选按钮链接在一起的原因。 In order to get each row to be linked you need a unique GroupName for each row. 为了使每一行都被链接,每行需要一个唯一的GroupName。 In MVVM you could bind the GroupName to a property on the underlying item, or bind the RadioButton's IsChecked property to the ViewModel and manage the switching in code. 在MVVM中,您可以将GroupName绑定到基础项上的属性,或将RadioButton的IsChecked属性绑定到ViewModel并管理代码中的切换。

Since your not using ViewModels it is a little more complicated. 由于您不使用ViewModel,因此它有点复杂。 You still need to create a unique GroupName per row. 您仍需要为每行创建唯一的GroupName。 The easiest way I can think of to do this is to use a IValueConverter to get the row index. 我能想到的最简单的方法是使用IValueConverter来获取行索引。

public class RadioGroupIndexConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is ListViewItem lvi)
        {
            var listView = ItemsControl.ItemsControlFromItemContainer(lvi);
            var index = listView.ItemContainerGenerator.IndexFromContainer(lvi);
            return string.Format("{0}{1}", parameter, index);
        }
        return parameter;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Then you'll need to bind to the GroupName to the ListViewItem using the converter. 然后,您需要使用转换器将GroupName绑定到ListViewItem。

First you need to add the converter as a resources in xaml. 首先,您需要将转换器添加为xaml中的资源。 Where <converters: is a reference to the namespace of the RadioGroupIndexConverter class. 其中<converters:是对RadioGroupIndexConverter类的命名空间的引用。 If you created the class in the same namespace as your ListView you can just use <local: 如果您在与ListView相同的命名空间中创建了类,则只需使用<local:

<ListView.Resources>
    <converters:RadioGroupIndexConverter x:Key="GroupConverter"/>
</ListView.Resources>

Then you'll change your RadioButton.GroupName to use a relative binding. 然后,您将更改您的RadioButton.GroupName以使用相对绑定。

<RadioButton GroupName="{Binding RelativeSource={RelativeSource AncestorType={x:Type ListViewItem}}, Converter={StaticResource GroupConverter}}"/>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM