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