2014-04-27 40 views
0

我所試圖做的 -更改內容右面板的

我試圖使應用程序像下面的圖片,在左側面板用於保存按鈕,右面板的內容。點擊左側面板上的按鈕後,右側面板上的內容會相應更改。

http://imgur.com/8WkLxQd

我的代碼 -

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> 

中號ainwindow.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> 

我的問題

  1. 如何通過點擊左側面板上的按鈕來更改右側面板上的內容?
  2. 如何讓它MVVM?
  3. 如何更改我的代碼以使其更高效?

單擊左側面板上的按鈕後,如何在右側面板上更改視圖?

回答

-1

我真的建議你看到這個帖子:

C# WPF: Master/Detail Layout using MVVM

+0

如果我忽略了MVVM部分,只專注於不斷變化的右側面板視圖,如何做呢? – user3577760

+0

把ContentControl放在右側 然後在代碼中執行如下操作: rightPanel.Content = myView; – Erez