通過點擊菜單項更改窗口的內容WPF

Question

我必須做一個WPF應用程序，它需要包含菜單欄。當用戶點擊每個菜單項時，窗口應該加載不同的內容。 請任何人提出任何想法來完成這一點。

<Window x:Class="win3.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"   
     Title="MainWindow" Height="700" Width="600" > 
    <Grid> 

     <DockPanel> 
      <Menu DockPanel.Dock="Top"> 
       <MenuItem Header="Student" Click="StudentMenuItem_Click"/> 
       <MenuItem Header="Academic" Click="AcademicMenuItem_Click"/> 
      </Menu> 
      <TextBox AcceptsReturn="True" /> 
     </DockPanel> 
     <Grid x:Name="grdStudent" Height="500" Width="550" Margin="22,56,22,115"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="2*"/> 
       <ColumnDefinition Width="3*"/> 
      </Grid.ColumnDefinitions> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="6*"/> 
       <RowDefinition Height="1*"/> 
      </Grid.RowDefinitions> 
      <Label Content="Student Id" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="57,51,0,0"/> 
      <Label Content="Student Name: " HorizontalAlignment="Left" Margin="57,110,0,0" VerticalAlignment="Top" Width="84"/> 
      <TextBox Grid.Column="1" HorizontalAlignment="Left" Height="23" Margin="46,51,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="175"/> 
      <TextBox Grid.Column="1" HorizontalAlignment="Left" Height="23" Margin="46,110,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="175"/> 
     </Grid> 

     <Grid x:Name="grdAcademic" Height="500" Width="550" Margin="22,56,22,115" > 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="2*"/> 
       <ColumnDefinition Width="3*"/> 
      </Grid.ColumnDefinitions> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="1*"/> 
       <RowDefinition Height="5*"/> 
      </Grid.RowDefinitions> 
      <ComboBox x:Name="cmbFloor" HorizontalAlignment="Left" VerticalAlignment="Top" Width="80" SelectionChanged="cmbFloor_SelectionChanged" Margin="130,29,0,0"/> 
      <ComboBox x:Name="cmbDoor" HorizontalAlignment="Left" Margin="130,10,0,0" VerticalAlignment="Top" Width="80" SelectionChanged="cmbDoor_SelectionChanged" Grid.Row="1"/> 
     </Grid> 
    </Grid> 
</Window > 

cs文件

private void StudentMenuItem_Click(object sender, RoutedEventArgs e) 
     { 
      this.grdStudent.Visibility = Visibility.Visible; 
      this.grdAcademic.Visibility = Visibility.Collapsed; 
     } 

     private void AcademicMenuItem_Click(object sender, RoutedEventArgs e) 
     { 
      this.grdAcademic.Visibility = Visibility.Collapsed; 
      this.grdStudent.Visibility = Visibility.Collapsed; 
     } 

上面的代碼工作按expected.but .XMAL文件看起來笨拙。（稍後我們需要添加更多的控制器）

Answer 1

您可以使用DataTemplate和ContentControl。在2個用戶控件中定義您的視圖'grdAcademic'和'grdStudent'併爲其定義DataTemplate。

<DataTemplate x:Key="grdAcademicView"> 
    <local:UserControlGrdAcademic /> 
</DataTemplate> 

<DataTemplate x:Key="grdStudentView" > 
    <local:UserControlGrdStudent /> 
</DataTemplate> 

假設，這裏的「本地」是您的CLR命名空間（XMLNS：地方=「CLR的命名空間：」）

菜單按鈕，點擊可以顯示2個變量在您的視圖模型相關聯說「IsStudent」和'IsAcademic'並使用它們如下：

<ContentControl Content="{Binding }"> 
    <ContentControl.Style> 
     <Style> 
      <Style.Triggers> 
       <DataTrigger Binding="{Binding Path=IsStudent}" Value="True"> 
        <Setter Property="ContentControl.ContentTemplate" Value="{StaticResource grdStudentView}" /> 
       </DataTrigger> 
       <DataTrigger Binding="{Binding Path=IsAcademic}" Value="True"> 
        <Setter Property="ContentControl.ContentTemplate" Value="{StaticResource grdAcademicView}" /> 
       </DataTrigger> 
      </Style.Triggers> 
     </Style> 
    </ContentControl.Style> 
</ContentControl> 

Answer 2

，你可以用不同的內容在單獨的文件，例如：

StudentView.xaml

<UserControl 
    <!-- Standard UC code here --> 
    > 
    <Grid x:Name="grdStudent" Height="500" Width="550" Margin="22,56,22,115"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="2*"/> 
      <ColumnDefinition Width="3*"/> 
     </Grid.ColumnDefinitions> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="6*"/> 
      <RowDefinition Height="1*"/> 
     </Grid.RowDefinitions> 
     <Label Content="Student Id" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="57,51,0,0"/> 
     <Label Content="Student Name: " HorizontalAlignment="Left" Margin="57,110,0,0" VerticalAlignment="Top" Width="84"/> 
     <TextBox Grid.Column="1" HorizontalAlignment="Left" Height="23" Margin="46,51,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="175"/> 
     <TextBox Grid.Column="1" HorizontalAlignment="Left" Height="23" Margin="46,110,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="175"/> 
    </Grid> 
</UserControl> 

然後你改變你的MainWindow.xaml到

<Grid> 
    <DockPanel> 
     <!-- Put your menu code here --> 
    </DockPanel> 
    <ContentControl x:Name="content" /> 
</Grid> 

而且在後面的代碼

private readonly FrameworkElement _academicView; 
private readonly FrameworkElement _studentView; 

public MainWindow() 
{ 
    InitializeComponent(); 

    _academicView = new AcademicView(); 
    _studentView = new StudentView(); 

    content.Content = _academicView; // set the default view 
} 

private void StudentMenuItem_Click(object sender, RoutedEventArgs e) 
{ 
    content.Content = _studentView; 
} 

private void AcademicMenuItem_Click(object sender, RoutedEventArgs e) 
{ 
    content.Content = _academicView; 
} 

從這個

除此之外，我建議你看看到MVVM點模式。