通过菜单项单击WPF更改窗口的内容答案

【问题标题】：Change the content of window by menu item click WPF通过菜单项单击WPF更改窗口的内容
【发布时间】：2016-10-28 05:17:18
【问题描述】：

我必须做一个 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;
        }

上面的代码按预期工作。但是 .XMAL 文件看起来很笨拙。（稍后我们需要添加更多控制器）

【问题讨论】：

标签： c# wpf menu menuitem

【解决方案1】：

您可以将不同的内容放在单独的文件中，例如：

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 模式。

【讨论】：

【解决方案2】：

您可以使用 DataTemplate 和 ContentControl。在 2 个用户控件中定义您的视图“grdAcademic”和“grdStudent”，并为其定义 DataTemplate。

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

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

假设，这里 'local' 是你的 clr 命名空间 (xmlns:local="clr-namespace:")

菜单按钮单击可以与视图模型中的 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>

【讨论】：