将复选框选定值文本框绑定到与绑定到下拉列表的属性不同的属性

Question

我的组合框绑定到 3 个属性（IsVisited、Address 和 City）：

<ComboBox Height="100" HorizontalAlignment="Left" Margin="100,25,0,0" Name="ComboBox1" VerticalAlignment="Top" Width="300">
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <CheckBox IsChecked="{Binding IsVisited}" Width="150" />
                <TextBlock Text="{Binding Address}" Width="100" />
                <TextBlock Text="{Binding City}" Width="100" />
            </StackPanel>
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

我想创建一个包含两列下拉菜单的 wpf 组合框

1. IsVisited（复选框）
2. 城市（字符串）

组合框的选定文本框部分应仅显示“地址”。有谁知道这是如何实现的？

Answer 1

一个有点老套的解决方案是检查您的 DataTemplate 是否在 ComboBoxItem 内，并在不在时隐藏不需要的值：

             <ComboBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <CheckBox IsChecked="{Binding IsVisited}" Width="150" x:Name="chk"/>
                        <TextBlock Text="{Binding Address}" Width="100"/>
                        <TextBlock Text="{Binding City}" Width="100" x:Name="City"/>
                    </StackPanel>
                    <DataTemplate.Triggers>
                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ComboBoxItem}}}" Value="{x:Null}">
                            <Setter TargetName="City" Property="Visibility" Value="Collapsed"/>
                            <Setter TargetName="chk" Property="Visibility" Value="Collapsed"/>
                        </DataTrigger>
                    </DataTemplate.Triggers>
                </DataTemplate>
            </ComboBox.ItemTemplate>

Answer 2

我已经重现了你的问题，我已经完成了你的任务。

这是初始视图。

那么在选择凯嘉拉之后，

我想这就是你需要的。

1. 为 ComboBoxItem 定义 view model。 （在我的例子中，我创建了一个名为 MyComboBoxItem 的类，并包含了 HasVisited, Address, City, TextBoxValue 的属性）

2. 在你的主视图模型中，定义一个property来绑定ComboBox ItemsSource（我定义了一个名为ComboBoxItems的属性）和另一个属性来绑定ComboBox的SelectedItem（我定义了一个属性名为SelectedComboBoxItem)。

3. 在选择更改方法中，实现设置texbox的逻辑。

这是我的XAML

<Window x:Class="ComboboxSelectedItemChange.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    xmlns:vm="clr-namespace:ComboboxSelectedItemChange.ViewModels"
    Title="MainWindow" Height="350" Width="525">
<Grid>

    <Grid.DataContext>
        <vm:MainViewModel />
    </Grid.DataContext>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="40" />
        <RowDefinition Height="30" />
    </Grid.RowDefinitions>

    <Label Grid.Column="0" Grid.Row="0" Content="Combo box test" />
    <ComboBox Grid.Column="1" Grid.Row="1"
              ItemsSource="{Binding ComboBoxItems}"
              SelectedItem="{Binding SelectedComboBoxItem}">

        <ComboBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <CheckBox IsChecked="{Binding HasVisited}" Width="30" />
                    <TextBlock Text="{Binding TextBoxValue}" Width="100" />
                </StackPanel>
            </DataTemplate>
        </ComboBox.ItemTemplate>

        <i:Interaction.Triggers>
            <i:EventTrigger EventName="SelectionChanged">
                <i:InvokeCommandAction Command="{Binding ChangeSelectionCommand}" />
            </i:EventTrigger>
        </i:Interaction.Triggers>
    </ComboBox>
</Grid>

这是我的Main View model，它绑定到上面的视图

public class MainViewModel : ViewModelBase
{
    #region Declarations

    private ObservableCollection<MyComboBoxItemViewModel> comboBoxItems;
    private MyComboBoxItemViewModel selectedComboBoxItem;

    private ICommand changeSelectionCommand;
    #endregion

    #region Properties

    /// <summary>
    /// Gets or sets the combo box items.
    /// </summary>
    /// <value>The combo box items.</value>
    public ObservableCollection<MyComboBoxItemViewModel> ComboBoxItems
    {
        get
        {
            return comboBoxItems;
        }
        set
        {
            comboBoxItems = value;
            NotifyPropertyChanged("ComboBoxItems");
        }
    }

    /// <summary>
    /// Gets or sets the selected combo box item.
    /// </summary>
    /// <value>The selected combo box item.</value>
    public MyComboBoxItemViewModel SelectedComboBoxItem
    {
        get
        {
            return selectedComboBoxItem;
        }
        set
        {
            selectedComboBoxItem = value;
            NotifyPropertyChanged("SelectedComboBoxItem");
        }
    }
    #endregion

    #region Commands

    /// <summary>
    /// Gets the change selection command.
    /// </summary>
    /// <value>The change selection command.</value>
    public ICommand ChangeSelectionCommand
    {
        get
        {
            if (changeSelectionCommand == null)
            {
                changeSelectionCommand = new RelayCommand(param => this.ChangeSelection(),
                    null);
            }
            return changeSelectionCommand;
        }
    }

    #endregion

    #region Constructors

    /// <summary>
    /// Initializes a new instance of the <see cref="MainViewModel"/> class.
    /// </summary>
    public MainViewModel()
    {
        //Add some dummy data

        this.ComboBoxItems = new ObservableCollection<MyComboBoxItemViewModel>();

        MyComboBoxItemViewModel item1 = new MyComboBoxItemViewModel();
        item1.HasVisited = false;
        item1.Address = "123, Matara";
        item1.City = "Matara";
        item1.TextBoxValue = item1.City;
        this.ComboBoxItems.Add(item1);

        MyComboBoxItemViewModel item2 = new MyComboBoxItemViewModel();
        item2.HasVisited = false;
        item2.Address = "125, Colombo";
        item2.City = "Colombo";
        item2.TextBoxValue = item2.City;
        this.ComboBoxItems.Add(item2);

        MyComboBoxItemViewModel item3 = new MyComboBoxItemViewModel();
        item3.HasVisited = false;
        item3.Address = "465, Kegalle";
        item3.City = "Kegalle";
        item3.TextBoxValue = item3.City;
        this.ComboBoxItems.Add(item3);

        this.SelectedComboBoxItem = item2;

        this.ComboBoxItems.Where(item => item == this.SelectedComboBoxItem).First().TextBoxValue = this.SelectedComboBoxItem.Address;
    }

    #endregion

    #region Private Methods

    /// <summary>
    /// Changes the selection.
    /// </summary>
    private void ChangeSelection()
    {
        foreach (var comboBoxitem in this.ComboBoxItems)
        {
            this.ComboBoxItems.Where(item => item == comboBoxitem).First().TextBoxValue = comboBoxitem.City;
        }

        this.ComboBoxItems.Where(item => item == this.SelectedComboBoxItem).First().TextBoxValue = this.SelectedComboBoxItem.Address;
        this.ComboBoxItems.Where(item => item == this.SelectedComboBoxItem).First().HasVisited = true;
    }

    #endregion
}

这是MyComboBoxItemViewModel

public class MyComboBoxItemViewModel : ViewModelBase
{ 
    #region Declarations

    private bool hasVisited;
    private string address;
    private string city;
    private string textBoxValue;

    #endregion

    #region Properties

    /// <summary>
    /// Gets or sets a value indicating whether this instance has visited.
    /// </summary>
    /// <value>
    ///     <c>true</c> if this instance has visited; otherwise, <c>false</c>.
    /// </value>
    public bool HasVisited
    {
        get
        {
            return hasVisited;
        }
        set
        {
            hasVisited = value;
            NotifyPropertyChanged("HasVisited");
        }
    }

    /// <summary>
    /// Gets or sets the address.
    /// </summary>
    /// <value>The address.</value>
    public string Address
    {
        get
        {
            return address;
        }
        set
        {
            address = value;
            NotifyPropertyChanged("Address");
        }
    }

    /// <summary>
    /// Gets or sets the city.
    /// </summary>
    /// <value>The city.</value>
    public string City
    {
        get
        {
            return city;
        }
        set
        {
            city = value;
            NotifyPropertyChanged("City");
        }
    }

    /// <summary>
    /// Gets or sets the text box value.
    /// </summary>
    /// <value>The text box value.</value>
    public string TextBoxValue
    {
        get
        {
            return textBoxValue;
        }
        set
        {
            textBoxValue = value;
            NotifyPropertyChanged("TextBoxValue");
        }
    }

    #endregion
}