如何将可观察的字符串集合绑定到列表框WPF

本文关键字：绑定 列表 WPF 集合 字符串 观察 | 更新日期: 2023-09-27 18:08:10

通常我将ObservableCollection绑定到我自己的类。但在这种情况下，我需要绑定ObservableCollection的字符串在ListBox使用MVVM到WPF。

我的xml是

<Window x:Class="ListBoxDynamic.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525"
    xmlns:vm="clr-namespace:ListBoxDynamic.ViewModel">
<Grid Margin="0,0,-8,0">
    <ListBox Width="100" Height="90"  ItemsSource="{Binding ListOfItems}">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <ToggleButton Command="{Binding SelectItemCommand}" CommandParameter="{Binding ElementName=Item}" >
                    <ToggleButton.Template>
                        <ControlTemplate TargetType="ToggleButton">
                            <TextBlock x:Name="Item" Text="{Binding What I must to write?}" />
                        </ControlTemplate>
                    </ToggleButton.Template>
                </ToggleButton>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Grid>

我MainViewModel 

private ObservableCollection<string> _listOfItems = new ObservableCollection<string>();
    public ObservableCollection<string> ListOfItems
    {
        get { return _listOfItems; }
        set { _listOfItems = value; RaisePropertyChanged("ListOfItems"); }
    }
    public ICommand SelectItemCommand { get; private set; }
    int counter = 1;
    public MainViewModel()
    {
        ListOfItems.Add("Add new Item");
        SelectItemCommand = new RelayCommand<object>((x) => ExecuteSelectItemCommand(x));
    }

但是我不知道我必须写在绑定TextBlock到ToggleButton

如何将可观察的字符串集合绑定到列表框WPF

由于返回每个ListBoxItem的数据是字符串，因此每个ListBoxItem的DataContext将是字符串。

因此执行<TextBlock x:Name="Item" Text="{Binding }" />将显示文本块

中支持listboxitem的字符串

我注意到一些问题

  • 命令在视图模型中可用，而不是在数据项中可用，因此使用相对源绑定到命令
  • "{Binding}"可以用来引用当前的Item，所以不需要使用elementname语法
  • 那么，你可以利用内容呈现器使它更灵活，而不是在切换按钮中放置文本框

可以这样写

<ListBox Width="100"
         Height="90"
         ItemsSource="{Binding ListOfItems}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <ToggleButton Command="{Binding SelectItemCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ListBox}}"
                          CommandParameter="{Binding}"
                          Content="{Binding}">
                <ToggleButton.Template>
                    <ControlTemplate TargetType="ToggleButton">
                        <ContentPresenter />
                    </ControlTemplate>
                </ToggleButton.Template>
            </ToggleButton>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>
相关文章：