使用左面板WPF中的按钮更改右面板的内容

Question

What I am trying to do -

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.

http://imgur.com/8WkLxQd

My Code -

Mainwindow.xaml

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

<ScrollViewer  HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
    <Grid>

        <DockPanel LastChildFill="True">
            <Border Width="190" BorderThickness="0,0,1,0" DockPanel.Dock="Left">
                <Border.BorderBrush>
                    <SolidColorBrush>
                        <SolidColorBrush.Color>
                            <Color A="255" R="190" G="200" B="209" ></Color>
                        </SolidColorBrush.Color>
                    </SolidColorBrush>
                </Border.BorderBrush>
                <Border.Background>
                    <SolidColorBrush>
                        <SolidColorBrush.Color>
                            <Color A="255" R="234" G="244" B="254" ></Color>
                        </SolidColorBrush.Color>
                    </SolidColorBrush>
                </Border.Background>
                <TextBlock>
                    <StackPanel Width="189">
                       <Button Style="{StaticResource fancyButton}" x:Name="But" Click="newReport_Click">New Report</Button>
                       <Button Style="{StaticResource fancyButton}" x:Name="But1" Click="markReport_Click">Mark Report</Button> 
                       <Button Style="{StaticResource fancyButton}" x:Name="But2" Click="searchReport_Click">Search Report</Button> 
                    </StackPanel>    
                </TextBlock>

            </Border>
            <Border Background="White">

                <TextBlock Foreground="Black" x:Name="mainBlock">
                    <Button x:Name="newReport" Height="80" Width="100"
        Content="New Report"
        Margin="40,78,0,0" VerticalAlignment="Top"
        HorizontalAlignment="Left" Click="newReport_Click">
        </Button>

        <Button x:Name="markReport" Height="80" Width="100"
        Content="Mark Report"
        Margin="40,80,0,0" VerticalAlignment="Top"
        HorizontalAlignment="Left" Click="markReport_Click">
        </Button>
        </TextBlock>
            </Border>
        </DockPanel>

    </Grid>
</ScrollViewer>

Mainwindow.xaml.cs

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
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
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;

    }
}

}

App.xaml

<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">
<Application.Resources>
    <Style x:Key="fancyButton" TargetType="Button">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Foreground" Value="Navy"/>
        <Setter Property="Height" Value="25"/>
        <Setter Property="Width" Value="150"/>
        <Setter Property="Margin" Value="10"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid x:Name="grid">
                        <Border x:Name="border" CornerRadius="3" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" BorderThickness="2">
                            <ContentPresenter HorizontalAlignment="Left" VerticalAlignment="Center"></ContentPresenter>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="BorderBrush" TargetName="border" Value="#d9e2f1"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="Background" TargetName="border" Value="White"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

    </Style>
</Application.Resources>

My Questions

1. How do I change the content on right panel with the click of buttons on left panel?
2. How to make it MVVM ?
3. How to change my code to make it more efficient ?

How do I change views on the right panel after clicking buttons on left panel ?

Answer 1

I really recommends you to see this post:

C# WPF: Master/Detail Layout using MVVM