CODEWITHSUNDEEP
c#wpfxamlmvvmlistbox
CampDev
CampDev

Reputation: 1659

MVVM-How to Binding ObservableCollection of Strings into ListBox WPF

Normally I bind ObservableCollection to my own classes. But in this case I need to bind ObservableCollection of Strings in ListBox using MVVM into WPF.

My xml is 

<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>

My 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));

    }

But I don't know that I must to write in Binding TextBlock into ToggleButton.

Upvotes: 0

Views: 4093

Answers (2)

Nitin Purohit
Nitin Purohit

Reputation: 18580

Since data which back each ListBoxItem is string, hence DataContext of each ListBoxItem will be string.

Hence doing <TextBlock x:Name="Item" Text="{Binding }" /> will show you the string backing the listboxitem in the textblock

Upvotes: 1

pushpraj
pushpraj

Reputation: 13669

there are few issues I notices

  • the command is available in the view model instead of the data item, so use relative source to bind to command
  • "{Binding}" can be used to refer to current Item, so no need to use elementname syntax
  • then instead of placing a textbox inside toggle button you can make use of content presenter to make it more flexible

so this could go like this

<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>

Upvotes: 1

Related Questions