WPF MVVM：将用户控件上的选定列表框项返回给 ViewModel

Question

我在带有“选择”按钮的用户控件上显示了一个设备列表。列表数据来自父 ViewModel，我希望用户选择他们想要的设备，点击“选择”按钮，按钮命令返回所选设备。

此外，我想要一个单选按钮或矩形来更改颜色以表示并与活动选择同步工作（即，您可以选择单选按钮并选择 ListItem 或单击 ListItem 并获得单选按钮选择）。

我有绑定到 ListBox 的工作，所以它显示设备，但我不知道如何让绑定工作，所以选择返回。

这是我正在使用的：

查看模型

// Props
private MutlipleAttachedDevicesModel _selectedDevice;
public MutlipleAttachedDevicesModel SelectedDevice
{
   get { return _selectedDevice; }
   set
   {
      _selectedDevice = value;
      RaisePropertyChanged();
   }
}

// Methods
public void DisplaySelectDevices()
{
    // Create new display
    DeviceSelectionVM = new DeviceSelectionViewModel();
    CurrentView = DeviceSelectionVM;

    // Populate Device List
    DeviceList = PopulateDeviceList();

}

private void CreateDummyData()
{
    Random r = new Random();
    var count = 0;   

    // make a max of 3 devices
    for(var i = 0; i < 3; i++)
    {
       DeviceList.Add(new MutlipleAttachedDevicesModel()
       {
           Name = "SP-2 Super Processor",
           Serial = $"SP2-00"+ r.Next(100).ToString(),
           IsSelection = false,
           WasUpdated = false
       });

       // First Device defaults to selected
       if (i == 0)
           DeviceList[i].IsSelection = true;

       count++;
    }
}

private void SelectTargetDevice(object selection)
{
    // Display Target Device
    var count = DeviceList.Count;

    for (var i=0; i<=count; i++)
    {
        if (DeviceList[i].IsSelection == true)
        {
            SelectedDevice = DeviceList[i];
            break;
        }        
    }

    Trace.WriteLine("Selection was "+ SelectedDevice.Serial);
}

列表框

<ListBox x:Name="MultipleDeviceSelectionList"
    ItemsSource="{Binding DataContext.DeviceList, 
                  RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Page}}"
    SelectedItem="{Binding IsSelection, 
                   RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Page}, 
                   Mode=TwoWay}">
   <ListBox.ItemTemplate>
      <DataTemplate>
         <Grid>
           <Grid.RowDefinitions>
           <Grid.ColumnDefinitions>

           <RadioButton  GroupName="radio"  
                         IsChecked="{Binding IsSelection}" />

           <TextBlock Text="{Binding Name}"/>

           <StackPanel>
              <TextBlock>
                 Serial #: 
              </TextBlock>
              <TextBlock Text="{Binding Serial}"/>
           </StackPanel>

           <TextBlock Visibility="{Binding WasUpdated, 
                                   Converter={StaticResource BoolToVisConverter}, 
                                   FallbackValue=Hidden}">
              Up To Date
           </TextBlock>
        </Grid>
     </DataTemplate>
  </ListBox.ItemTemplate>
</ListBox>

<Button Command="{Binding DataContext.SelectButtonCommand, 
                  RelativeSource={RelativeSource Mode=FindAncestor,
                  AncestorType=Page}}">
   Select
</Button>

我还尝试了其他方法，例如尝试将单选按钮双向绑定到 ListBox 的 SelectedItem 属性，但老实说，复杂的绑定仍然让我感到困惑。我需要做什么才能使单选按钮与列表选择保持同步，并正确返回列表选择？

Answer 1

更改您的 ListView SelectedItem 绑定。 您想绑定到 SelectedDevice 属性。

<ListBox x:Name="MultipleDeviceSelectionList"
    ItemsSource="{Binding DataContext.DeviceList, 
                  RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Page}}"
    SelectedItem="{Binding SelectedDevice, 
                   RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Page}, 
                   Mode=TwoWay}">

但也许您真的应该检查属性是否属于正确的类型，因为“MutlipleAttachedDevicesModel”看起来不像单个设备的模型。另外我不确定您是否需要该绑定上的 RelativeSource。