Question

我有一个要求，在一个DataGrid列上，我需要并排显示x个可点击按钮（水平堆叠）。要显示的实际数字或按钮取决于该列中的绑定值。

下图显示了这一点。左手网格是我当前的网格，右手网格是我正在寻找的。

Current and desired DataGrid

网格绑定到ViewModel，如：

<DataGrid ItemsSource="{Binding employees}" AutoGenerateColumns="False"  >
        <DataGrid.Columns>
            <DataGridTextColumn Binding="{Binding Path=id}" Header="Id" />
            <DataGridTextColumn Binding="{Binding Path=numberofplatforms}" Header="No" Width="50" IsReadOnly="True" />
        </DataGrid.Columns>
    </DataGrid>

ViewModel是：

Public Class ViewModel

    Public Property employees As ObservableCollection(Of employee)
        Get
            Return _employees
        End Get
        Set(ByVal value As ObservableCollection(Of employee))
            _employees = value
        End Set
    End Property
    Private _employees As New ObservableCollection(Of employee)

End Class

员工是：

Public Class employee
    Public Property id As String
    Public Property numberofplatforms As Integer
    Public Property selectedplatform As Integer
End Class

除了显示按钮之外，按钮按钮必须像radiobuttons一样，即在任何DataGrid行上，只有一个按钮被“按下”（图像中的蓝色背景按钮）而其他按钮不被按下（灰色背景））。按钮（或形状）必须是可点击的，以便可以更改选择。

根据selectedplatform属性，从ViewModel确定“按下”哪个按钮。该示例中的该属性对于ABC为1，对于DEF为1，对于GHI为2。如果numberofplatforms属性为零，则不显示任何按钮（JKL）。

如何设置此机制？

Answer 1

代码的某些部分是在C＃中，我希望这不是问题。 Wpf代码：

<Window.Resources>
    <ResourceDictionary>
        <local:PositiveIntegersConverter x:Key="PositiveIntegersConverter" />
        <local:EmployeePlatformOptionConverter x:Key="EmployeePlatformOptionConverter"/>
    </ResourceDictionary>
</Window.Resources>

<DataGrid ItemsSource="{Binding employees}" AutoGenerateColumns="False" x:Name="DataGrid1">
    <DataGrid.Columns>
        <DataGridTextColumn Binding="{Binding Path=id}" Header="Id" />
        <DataGridTemplateColumn Header="No" IsReadOnly="True">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                        <ListBox ItemsSource="{Binding numberofplatforms, Converter={StaticResource PositiveIntegersConverter}}" SelectedItem="{Binding selectedplatform}"
                                    x:Name="ListBox1">
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                    <Button Content="{Binding}" Command="{Binding Source={x:Reference DataGrid1}, Path=DataContext.SelectOptionCommand}">
                                        <Button.CommandParameter>
                                            <MultiBinding Converter="{StaticResource EmployeePlatformOptionConverter}">
                                                <Binding ElementName="ListBox1" Path="DataContext"/>
                                                <Binding Path="."/>
                                            </MultiBinding>
                                        </Button.CommandParameter>
                                        <Button.Style>
                                            <Style TargetType="Button">
                                                <Setter Property="Background" Value="Gray" />
                                                <Setter Property="Foreground" Value="White" />
                                                <Style.Triggers>
                                                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ListBoxItem}, Path=IsSelected}"
                                                                    Value="True">
                                                        <Setter Property="Background" Value="Blue" />
                                                    </DataTrigger>
                                                </Style.Triggers>
                                            </Style>
                                        </Button.Style>
                                    </Button>
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                            <ListBox.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <StackPanel Orientation="Horizontal" />
                                </ItemsPanelTemplate>
                            </ListBox.ItemsPanel>
                        </ListBox>
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Columns>
</DataGrid>

我在这里使用了两个转换器：

PositiveIntegersConverter 返回给定 numberofplatforms 的正整数 - 这些是员工可用的平台选项

EmployeePlatformOptionConverter ，它将我们要传递给SelectOptionCommand的两个参数：employee和selected platform选项转换为EmployeePlatformOption类型的一个对象。

public class PositiveIntegersConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        var toInteger = System.Convert.ToInt32(value);
        return toInteger > 0 ? Enumerable.Range(1, toInteger) : null;
    }

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

public class EmployeePlatformOptionConverter
    : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        return new EmployeePlatformOption
            {
                Employee = values[0] as Employee,
                Platform = (int)values[1]
            };
    }

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

使用封装对象：

public class EmployeePlatformOption
{
    public Employee Employee { get; set; }
    public int Platform { get; set; }
}

您将选择传递给ViewModel类中的SelectOptionCommand：

public ICommand SelectOptionCommand { get; set; }
private void SelectOptionExecute(EmployeePlatformOption employeePlatformOption)
{
    if (employeePlatformOption != null && employeePlatformOption.Employee != null &&
        employeePlatformOption.Platform > 0)
    {
        employeePlatformOption.Employee.selectedplatform = employeePlatformOption.Platform;
    }
}

员工应实施 INotifyPropertyChange 界面，以便在屏幕上显示 selectedplatform 更新。

WPF DataGrid列，具有可变数量的按钮/形状

1 个答案: