WPF Changing Datacontexts and views in same window

Question

I am new to WPF am and porting an application from VC++ 6.0/MFC to c#/WPF (VS2013). Most of my windows development has been in VC++/MFC. I am trying to stick to the MVVM pattern and am writing a few proof of concept apps to get my feet wet. I am having one sticking point so far.

When my app starts up it will present a tree view of customers and bills. I have that working well using a simple hierarchical data template with each level binding to my local data type (view model). What I want to have happen is when a bill is selected (right now I have a button to press on the bill template) I want the treeview to be replaced by a detail view of the bill (I don't want a dialog to pop up).

The Xaml for this is:

   <DockPanel>
    <TreeView x:Name="trvGroups" ItemsSource="{Binding LBGroups}" VirtualizingPanel.IsVirtualizing="True" VirtualizingPanel.VirtualizationMode="Recycling">
    <TreeView.ItemContainerStyle>
        <!--
            This Style binds a TreeViewItem to a LBtreeViewItemViewModel
        -->
        <Style TargetType="{x:Type TreeViewItem}">
            <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
            <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" />
            <Setter Property="FontWeight" Value="Normal" />
        </Style>
    </TreeView.ItemContainerStyle>

    <TreeView.Resources>
        <HierarchicalDataTemplate
            DataType="{x:Type local:GroupViewModel}"
            ItemsSource="{Binding Children}"
            >
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding GroupName}" />
            </StackPanel>
        </HierarchicalDataTemplate>

        <HierarchicalDataTemplate 
            DataType="{x:Type local:BillViewModel}"
            ItemsSource="{Binding Children}">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding BillName}" />
                <Button Command="{Binding Path=BillEditCommand}">Edit</Button>
            </StackPanel>
        </HierarchicalDataTemplate>
    </TreeView.Resources>
    </TreeView>
</DockPanel>

Right now I have more questions than anything. Should I define each view as user controls and put them in window.resources? Do I use data templates? I assume I would change the data context to point to the detail bill view model. What is the best way to do this?

My goal, to adhere to MVVM as I understand it, is to have nothing in the code behind (or as little as possible).

I'm looking more for pointers to get me started along the right path as I research. I getting a little befuddled at the moment.

Thanks in advance.

Answer 1

I'll Show you a plain Master Details Scenario where you can choose models in your TreeView and Edit Them.

CS :

       public partial class MainWindow : Window , INotifyPropertyChanged
{
    public MainWindow()
    {
        InitializeComponent();
        this.DataContext = this;
    }

    private ICommand onEditBillCommand;
    public ICommand OnEditBillCommand
    {
        get
        {
            if (onEditBillCommand == null)
                onEditBillCommand = new RelayCommand<Bill>
                    (
                        bill => { CurrentBill = bill; }
                    );
            return onEditBillCommand;
        }
    }

    private Bill currectBill;
    public Bill CurrentBill
    {
        get { return currectBill; }
        set
        {
            currectBill = value;
            PropertyChanged(this, new PropertyChangedEventArgs("CurrentBill"));
        }
    }

    public List<Customer> Customers
    {
        get
        {
            List<Customer> customers = new List<Customer>();
            for (int i = 0; i < 5; i++)
            {
                customers.Add(CreateMockCustomer(i));
            }
            return customers;
        }
    }

    private Customer CreateMockCustomer(int g )
    {
        Customer c = new Customer();

        c.Name = "John (" + g + ")" ;

        for (int i = 0; i < 3; i++)
        {
            c.Bills.Add(CreateMockBill());
        }

        return c;
    }

    private Bill CreateMockBill()
    {
        Bill b = new Bill();

        b.Price = 55.5;
        b.BoughtOnDate = DateTime.Now.Date;

        return b;
    }

    public event PropertyChangedEventHandler PropertyChanged = delegate { };
}


public class Customer : INotifyPropertyChanged
{
    private string name;
    public string Name
    {
        get { return name; }
        set { name = value; }
    }

    private ObservableCollection<Bill> bills;
    public ObservableCollection<Bill> Bills
    {
        get
        {
            if (bills == null)
            {
                bills = new ObservableCollection<Bill>();
            }
            return bills;
        }
    }


    public event PropertyChangedEventHandler PropertyChanged = delegate { };
}

public class Bill : INotifyPropertyChanged
{
    private double price;
    public double Price
    {
        get { return price; }
        set
        {
            price = value;
            PropertyChanged(this, new PropertyChangedEventArgs("Price"));
        }
    }

    private DateTime boughtOnDate;
    public DateTime BoughtOnDate
    {
        get { return boughtOnDate; }
        set
        {
            boughtOnDate = value;
            PropertyChanged(this, new PropertyChangedEventArgs("BoughtOnDate"));
        }
    }


    public event PropertyChangedEventHandler PropertyChanged = delegate { };
}

public interface IRelayCommand : ICommand
{
    void RaiseCanExecuteChanged();
}
public class RelayCommand<T> : IRelayCommand
{
    private Predicate<T> _canExecute;
    private Action<T> _execute;

    public RelayCommand(Action<T> execute, Predicate<T> canExecute = null)
    {
        _execute = execute;
        _canExecute = canExecute;
    }

    private void Execute(T parameter)
    {
        _execute(parameter);
    }

    private bool CanExecute(T parameter)
    {
        return _canExecute == null ? true : _canExecute(parameter);
    }

    public bool CanExecute(object parameter)
    {
        return parameter == null ? false : CanExecute((T)parameter);
    }

    public void Execute(object parameter)
    {
        _execute((T)parameter);
    }

    public event EventHandler CanExecuteChanged;

    public void RaiseCanExecuteChanged()
    {
        var temp = Volatile.Read(ref CanExecuteChanged);

        if (temp != null)
            temp(this, new EventArgs());
    }
}

XAML :

     <Window>
         <Window.Resources>
           <HierarchicalDataTemplate x:Key="customerTemplate" DataType="{x:Type local:Customer}" ItemsSource="{Binding Bills}">
               <HierarchicalDataTemplate.ItemTemplate>
                  <DataTemplate>
                    <Grid>
                       <Grid.ColumnDefinitions>
                           <ColumnDefinition/>
                           <ColumnDefinition/>
                           <ColumnDefinition/>
                       </Grid.ColumnDefinitions>

                       <TextBlock Text="{Binding Price}" />
                       <TextBlock Text="{Binding BoughtOnDate}" Grid.Column="1" />
                       <Button Content="Edit" Grid.Column="2"
                            Command="{Binding RelativeSource={RelativeSource AncestorType=Window},Path=DataContext.OnEditBillCommand}" 
                            CommandParameter="{Binding}"/> 

                   </Grid>
               </DataTemplate>
           </HierarchicalDataTemplate.ItemTemplate>

           <TextBlock Text="{Binding Name}" FontFamily="Arial" FontSize="16" FontWeight="Bold" />

        </HierarchicalDataTemplate>

   </Window.Resources>

   <Grid>
       <Grid.ColumnDefinitions>
           <ColumnDefinition />
           <ColumnDefinition Width="0.05*"/>
           <ColumnDefinition />
       </Grid.ColumnDefinitions>


       <TreeView ItemsSource="{Binding Customers}" ItemTemplate="{StaticResource customerTemplate}">

       </TreeView>


       <Grid Grid.Column="2" DataContext="{Binding CurrentBill, Mode=OneWay}" Background="AliceBlue">
           <Grid.RowDefinitions>
              <RowDefinition />
              <RowDefinition />
           </Grid.RowDefinitions>

           <TextBox Text="{Binding Price, Mode=TwoWay}"  Margin="50"/>
           <TextBox Text="{Binding BoughtOnDate, Mode=TwoWay}" Grid.Row="1" Margin="50"/>


      </Grid>

   </Grid>