Button Command in WPF MVVM Model

Question

I have two UserControls in my MainWindow and UserControl2 has 2 Listboxes,Texboxes and Buttons.When i write some text in TextBox and press Button it should add into the ListBox.Can somebody help me with the code,i'm new to WPF and MVVM

This is my XAML code

<Window x:Class="Wpf_MVVM.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Wpf_MVVM" 
    Title="Voxer" Background="SlateGray" Height="420" Width="550">


<Grid>
    <local:UserControl1 HorizontalAlignment="Left" VerticalAlignment="Top"/>
    <local:UserControl2 HorizontalAlignment="Left" VerticalAlignment="Top" Margin="150,29,0,0"/>




</Grid>

This is my UserControl1.Xaml code

<UserControl x:Class="Wpf_MVVM.UserControl1"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         Height="Auto" Width="Auto">
<Grid>
    <ListBox HorizontalAlignment="Left" Height="310" VerticalAlignment="Top" Width="150" Margin="0,40,0,0">
        <ListBoxItem>Name 1</ListBoxItem>
        <ListBoxItem>Name 2</ListBoxItem>
        <ListBoxItem>Name 3</ListBoxItem>
        <ListBoxItem>Name 4</ListBoxItem>
        <ListBoxItem>Name 5</ListBoxItem>
        <ListBoxItem>Name 6</ListBoxItem>
    </ListBox>
    <Label Content="Conversations" HorizontalAlignment="Left" VerticalAlignment="Top"  Height="40" Width="150" FontSize="20" Background="SkyBlue"/>
    <Button Content="Create New Chat" Height="30" HorizontalAlignment="Left" Margin="0,350,0,0" VerticalAlignment="Top" Width="150"/>

</Grid>

This is my UserControl2.Xaml code

<UserControl x:Class="Wpf_MVVM.UserControl2"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         Height="Auto" Width="390">
<Grid>
    <ListBox Name="listbox1" HorizontalAlignment="Left" Height="310" VerticalAlignment="Top" Width="180" Margin="10,0,0,0"/>
    <ListBox Name="listbox2"  HorizontalAlignment="Left" Height="310" Margin="200,0,0,0" VerticalAlignment="Top" Width="180"/>
    <TextBox Name="tb1" HorizontalAlignment="Left" Height="40" Margin="200,310,0,0" TextWrapping="NoWrap" Text="" VerticalAlignment="Top" Width="130"/>
    <TextBox Name="tb2" Height="40" TextWrapping="NoWrap" Text="" Margin="10,310,245,0"/>
    <Button Command="{Binding ButtonCommand}" Name="btn1" Content="Send" Height="40" HorizontalAlignment="Left" Margin="330,310,0,0" VerticalAlignment="Top" Width="50" />
    <Button Command="{Binding SendControlCommand}" Name="btn2" Content="Send" Height="40" Margin="145,310,200,0"/>

</Grid>

Answer 1

Sounds to me that you're stabbing in the dark ... You say you're using MVVM and WPF, but I think you should revise your background on those topics first ...

Basically, your View should bind to properties on the ViewModel.

Usually you'll want to have an observable collection that would be the source for the list box, and the on your XAML do something like

<ListBox Name="listbox_name"  ... ItemSource="{Binding ListPropertyName}/>

(I'm assuming you have a property of type ObservableCollection named ListPropertyName , obviously you'll name it something else according to your needs)

Then, the commands. Once you have:

<Button Command="{Binding ButtonCommand}" Name="btn1" Content="Send"... />

It means you need to have an ICommand property in your view models code, called ButtonCommand :

public ICommand ButtonCommand{ get; private set; }

In your contructor you could then write:

ButtonCommand= new RelayCommand<object>(Execute_YourMethodHere);

Now, when you hit the button, your Execute_YourMethodHere is run.

This is where you'll probably want to add the object to your ObservableCollection (assuming you have used INotifyPropertyChanged, so the View will know your collection changed), and that's really about it ...

Answer 2

Did you forget about DataContext ? In behind code, you should add this line: this.DataContext = new YourViewModel();

Can you show your CommandMethods?

Answer 3

You forget the bind an ItemsSource to the lists in the second xaml. If you want to do it in a right way with MVVM, you need two ItemsSource properties, two relaycommands and two string properties in the view model. In the command action simply add the appropriate text to the appropiate list's ItemsSource.

You also need to aware of INotifyPropertyChanged, ObservableCollection and ICommand to make it work.