[英]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.