[英]Change the content of window by menu item click WPF
我必须做一个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文件显得笨拙(稍后我们需要添加更多控制器)
您可以将不同的内容放在单独的文件中,例如:
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模式。
您可以使用DataTemplate和ContentControl。 在2个用户控件中定义视图“ grdAcademic”和“ grdStudent”,并为其定义数据模板。
<DataTemplate x:Key="grdAcademicView">
<local:UserControlGrdAcademic />
</DataTemplate>
<DataTemplate x:Key="grdStudentView" >
<local:UserControlGrdStudent />
</DataTemplate>
假设,这里的“本地”是您的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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.