title: Change Content Of Right Panel Using buttons in Left Panel WPF
body: <p><strong>What I am trying to do</strong> -</p>
  
  <p>I am trying to make an application something like the picture below, where left panel is used to hold buttons and right panel the content . When button on the left panel is clicked , content on the right panel changes appropriately. </p>
  
  <p><a href="http://imgur.com/8WkLxQd" rel="nofollow">http://imgur.com/8WkLxQd</a></p>
  
  <p><strong>My Code -</strong></p>
  
  <p><strong><em>Mainwindow.xaml</em></strong></p>
  
  <pre><code>&lt;Window x:Class="Management.MainWindow"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Title="Management " Height="490" Width="815" HorizontalAlignment="Left"&gt;
  
  &lt;ScrollViewer  HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"&gt;
      &lt;Grid&gt;
  
          &lt;DockPanel LastChildFill="True"&gt;
              &lt;Border Width="190" BorderThickness="0,0,1,0" DockPanel.Dock="Left"&gt;
                  &lt;Border.BorderBrush&gt;
                      &lt;SolidColorBrush&gt;
                          &lt;SolidColorBrush.Color&gt;
                              &lt;Color A="255" R="190" G="200" B="209" &gt;&lt;/Color&gt;
                          &lt;/SolidColorBrush.Color&gt;
                      &lt;/SolidColorBrush&gt;
                  &lt;/Border.BorderBrush&gt;
                  &lt;Border.Background&gt;
                      &lt;SolidColorBrush&gt;
                          &lt;SolidColorBrush.Color&gt;
                              &lt;Color A="255" R="234" G="244" B="254" &gt;&lt;/Color&gt;
                          &lt;/SolidColorBrush.Color&gt;
                      &lt;/SolidColorBrush&gt;
                  &lt;/Border.Background&gt;
                  &lt;TextBlock&gt;
                      &lt;StackPanel Width="189"&gt;
                         &lt;Button Style="{StaticResource fancyButton}" x:Name="But" Click="newReport_Click"&gt;New Report&lt;/Button&gt;
                         &lt;Button Style="{StaticResource fancyButton}" x:Name="But1" Click="markReport_Click"&gt;Mark Report&lt;/Button&gt; 
                         &lt;Button Style="{StaticResource fancyButton}" x:Name="But2" Click="searchReport_Click"&gt;Search Report&lt;/Button&gt; 
                      &lt;/StackPanel&gt;    
                  &lt;/TextBlock&gt;
  
              &lt;/Border&gt;
              &lt;Border Background="White"&gt;
  
                  &lt;TextBlock Foreground="Black" x:Name="mainBlock"&gt;
                      &lt;Button x:Name="newReport" Height="80" Width="100"
          Content="New Report"
          Margin="40,78,0,0" VerticalAlignment="Top"
          HorizontalAlignment="Left" Click="newReport_Click"&gt;
          &lt;/Button&gt;
  
          &lt;Button x:Name="markReport" Height="80" Width="100"
          Content="Mark Report"
          Margin="40,80,0,0" VerticalAlignment="Top"
          HorizontalAlignment="Left" Click="markReport_Click"&gt;
          &lt;/Button&gt;
          &lt;/TextBlock&gt;
              &lt;/Border&gt;
          &lt;/DockPanel&gt;
  
      &lt;/Grid&gt;
  &lt;/ScrollViewer&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong><em>Mainwindow.xaml.cs</em></strong></p>
  
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Text;
  using System.Threading.Tasks;
  using System.Windows; 
  using System.Windows.Controls;
  using System.Windows.Data;
  using System.Windows.Documents;
  using System.Windows.Input;
  using System.Windows.Media;
  using System.Windows.Media.Imaging;
  using System.Windows.Navigation;
  using System.Windows.Shapes;
  
  namespace Management
  {
  /// &lt;summary&gt;
  /// Interaction logic for MainWindow.xaml
  /// &lt;/summary&gt;
  public partial class MainWindow : Window
  {
      public MainWindow()
      {
          InitializeComponent();
      }
  
      private void newReport_Click(object sender, RoutedEventArgs e)
      {
          But.Background = System.Windows.Media.Brushes.White;
          But.BorderBrush = (SolidColorBrush)(new BrushConverter().ConvertFrom("#d9e2f1"));
  
          But1.Background = System.Windows.Media.Brushes.Transparent;
          But1.BorderBrush = System.Windows.Media.Brushes.Transparent;
          But2.Background = System.Windows.Media.Brushes.Transparent;
          But2.BorderBrush = System.Windows.Media.Brushes.Transparent;
  
          mainBlock.Background = System.Windows.Media.Brushes.Brown;
          // MainWindow popup = new MainWindow();
       // popup.ShowDialog();
      }
  
      private void markReport_Click(object sender, RoutedEventArgs e)
      {
          But1.Background = System.Windows.Media.Brushes.White;
          But1.BorderBrush = (SolidColorBrush)(new BrushConverter().ConvertFrom("#d9e2f1"));
  
          But.Background = System.Windows.Media.Brushes.Transparent;
          But.BorderBrush = System.Windows.Media.Brushes.Transparent;
          But2.Background = System.Windows.Media.Brushes.Transparent;
          But2.BorderBrush = System.Windows.Media.Brushes.Transparent;
  
      }
  
      private void searchReport_Click(object sender, RoutedEventArgs e)
      {
          But2.Background = System.Windows.Media.Brushes.White;
          But2.BorderBrush = (SolidColorBrush)(new BrushConverter().ConvertFrom("#d9e2f1"));
  
          But.Background = System.Windows.Media.Brushes.Transparent;
          But.BorderBrush = System.Windows.Media.Brushes.Transparent;
          But1.Background = System.Windows.Media.Brushes.Transparent;
          But1.BorderBrush = System.Windows.Media.Brushes.Transparent;
  
      }
  }
  </code></pre>
  
  <p>}</p>
  
  <p><strong><em>App.xaml</em></strong></p>
  
  <pre><code>&lt;Application x:Class="Management.App"
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           StartupUri="MainWindow.xaml"&gt;
  &lt;Application.Resources&gt;
      &lt;Style x:Key="fancyButton" TargetType="Button"&gt;
          &lt;Setter Property="OverridesDefaultStyle" Value="True"/&gt;
          &lt;Setter Property="BorderBrush" Value="Transparent"/&gt;
          &lt;Setter Property="HorizontalContentAlignment" Value="Left"/&gt;
          &lt;Setter Property="Background" Value="Transparent"/&gt;
          &lt;Setter Property="Foreground" Value="Navy"/&gt;
          &lt;Setter Property="Height" Value="25"/&gt;
          &lt;Setter Property="Width" Value="150"/&gt;
          &lt;Setter Property="Margin" Value="10"/&gt;
          &lt;Setter Property="Template"&gt;
              &lt;Setter.Value&gt;
                  &lt;ControlTemplate TargetType="{x:Type Button}"&gt;
                      &lt;Grid x:Name="grid"&gt;
                          &lt;Border x:Name="border" CornerRadius="3" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" BorderThickness="2"&gt;
                              &lt;ContentPresenter HorizontalAlignment="Left" VerticalAlignment="Center"&gt;&lt;/ContentPresenter&gt;
                          &lt;/Border&gt;
                      &lt;/Grid&gt;
                      &lt;ControlTemplate.Triggers&gt;
                          &lt;Trigger Property="IsMouseOver" Value="True"&gt;
                              &lt;Setter Property="BorderBrush" TargetName="border" Value="#d9e2f1"/&gt;
                          &lt;/Trigger&gt;
                          &lt;Trigger Property="IsPressed" Value="True"&gt;
                              &lt;Setter Property="Background" TargetName="border" Value="White"/&gt;
                          &lt;/Trigger&gt;
                      &lt;/ControlTemplate.Triggers&gt;
                  &lt;/ControlTemplate&gt;
              &lt;/Setter.Value&gt;
          &lt;/Setter&gt;
  
      &lt;/Style&gt;
  &lt;/Application.Resources&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>My Questions</strong></p>
  
  <ol>
  <li>How do I change the content on right panel with the click of buttons on left panel? </li>
  <li>How to make it MVVM ? </li>
  <li>How to change my code to make it more efficient ?</li>
  </ol>
  
  <p><strong>How do I change views on the right panel after clicking buttons on left panel ?</strong></p>