如何在点击时在同一个 window 上显示不同的内容？

Question

基本上我有一个 window，它有一个导航栏，侧面有不同的按钮，点击时应该是不同的页面我如何让它在用户试图导航到时显示不同的内容不同的页面。

xaml代码：

 <Window.Resources>
        <Storyboard x:Key="MenuOpen">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="GridMenu">
                <EasingDoubleKeyFrame KeyTime="0" Value="60"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="200"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="MenuClose">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="GridMenu">
                <EasingDoubleKeyFrame KeyTime="0" Value="200"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="60"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>

    <Window.Triggers>
        <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="btn_OpenMenu">
            <BeginStoryboard Storyboard="{StaticResource MenuOpen}"/>
        </EventTrigger>
        <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="btn_CloseMenu">
            <BeginStoryboard Storyboard="{StaticResource MenuClose}"/>
        </EventTrigger>
    </Window.Triggers>


    <Grid Background="LightGray">
        <Grid  Height="50" VerticalAlignment="Top" Background="#FF3A6E3A">
            <TextBlock Text="Rare Mantis" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Foreground="White"/>
            <StackPanel VerticalAlignment="Center" Orientation="Horizontal" HorizontalAlignment="Right">
                <TextBlock Text="More" VerticalAlignment="Center" FontSize="16" Foreground="White"/>
                <materialDesign:PopupBox  Margin="10" PlacementMode="BottomAndAlignRightEdges" StaysOpen="False" Foreground="White">
                    <StackPanel Width="150">
                        <Button Content="Account"/>
                        <Button Content="Settings"/>
                        <Button Content="Help"/>
                        <Separator/>
                        <Button x:Name="btn_Logout" Content="Logout" Click="btn_Logout_Click"/>
                    </StackPanel>
                </materialDesign:PopupBox>
            </StackPanel>
        </Grid>
        <Grid x:Name="GridMenu" Width="60" HorizontalAlignment="Left" Background="#FF386032">
            <StackPanel>
                <Grid Height="150" Background="White">
                    <Button x:Name="btn_CloseMenu" Width="60" Height="60" Background="{x:Null}" BorderBrush="{x:Null}" VerticalAlignment="Top" HorizontalAlignment="Right" Visibility="Collapsed" Click="btn_CloseMenu_Click">
                        <materialDesign:PackIcon Kind="ArrowLeft" Foreground="#FF53A547" Width="25" Height="25"/>
                    </Button>
                    <Button x:Name="btn_OpenMenu" Width="60" Height="60" Background="{x:Null}" BorderBrush="{x:Null}" VerticalAlignment="Top" HorizontalAlignment="Right" Click="btn_OpenMenu_Click">
                        <materialDesign:PackIcon Kind="Menu" Foreground="#FF53A547" Width="25" Height="25"/>
                    </Button>
                </Grid>
                <ListView ScrollViewer.HorizontalScrollBarVisibility="Disabled">
                    <ListViewItem Height="60" Foreground="#FF5BF45D" >
                        <StackPanel x:Name="sp_BHome" Orientation="Horizontal" ButtonBase.Click="sp_BHome_Click">
                            <materialDesign:PackIcon Kind="ViewDashboard" Margin="10" Width="25" Height="25" VerticalAlignment="Center"/>
                            <TextBlock Text="Home" VerticalAlignment="Center" Margin="20 10"/>
                        </StackPanel>
                    </ListViewItem>
                    <ListViewItem Height="60" Foreground="#FF5BF45D">
                        <StackPanel Orientation="Horizontal">
                            <materialDesign:PackIcon Kind="Puzzle" Margin="10" Width="25" Height="25" VerticalAlignment="Center"/>
                            <TextBlock Text="Game" VerticalAlignment="Center" Margin="20 10"/>
                        </StackPanel>
                    </ListViewItem>
                    <ListViewItem Height="60" Foreground="#FF5BF45D">
                        <StackPanel Orientation="Horizontal">
                            <materialDesign:PackIcon Kind="Create" Margin="10" Width="25" Height="25" VerticalAlignment="Center"/>
                            <TextBlock Text="Home" VerticalAlignment="Center" Margin="20 10"/>
                        </StackPanel>
                    </ListViewItem>
                    <ListViewItem Height="60" Foreground="#FF5BF45D">
                        <StackPanel Orientation="Horizontal">
                            <materialDesign:PackIcon Kind="Library" Margin="10" Width="25" Height="25" VerticalAlignment="Center"/>
                            <TextBlock Text="Game Libary" VerticalAlignment="Center" Margin="20 10"/>
                        </StackPanel>
                    </ListViewItem>
                </ListView>
            </StackPanel>
        </Grid>
    </Grid>

c#后端代码：

public MainWindow()
{
    InitializeComponent();
}

private void btn_Logout_Click(object sender, RoutedEventArgs e)
{
    Application.Current.Shutdown();
}

private void btn_OpenMenu_Click(object sender, RoutedEventArgs e)
{
    btn_OpenMenu.Visibility = Visibility.Collapsed;
    btn_CloseMenu.Visibility = Visibility.Visible;
}

private void btn_CloseMenu_Click(object sender, RoutedEventArgs e)
{
    btn_OpenMenu.Visibility = Visibility.Visible;
    btn_CloseMenu.Visibility = Visibility.Collapsed;
}

private void sp_BHome_Click(object sender, RoutedEventArgs e)
{

}

因此，例如，当单击 sp_BHome 时，它应该显示不应该出现在其他页面上的内容。

Answer 1

我以前做过这样的事情。我为 TabControl 制作了一个隐藏顶部标签的样式：

<Style TargetType="TabControl" x:Key="HiddenTabControl">
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="ItemContainerStyle">
        <Setter.Value>
            <Style TargetType="TabItem">
                <Style.Triggers>
                    <Trigger Property="cm:DesignerProperties.IsInDesignMode" Value="False">
                        <Setter Property="Visibility" Value="Collapsed"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Setter.Value>
    </Setter>
</Style>

然后您可以通过代码设置 SelectedIndex 或将其绑定到属性以更改显示的视图。

此方法的额外好处是能够在 Visual Studio 设计器中轻松查看所有选项卡，即使它们在运行时处于隐藏状态。

Answer 2

我添加了标签页，这样我就可以在同一个页面上显示不同的页面 window。

xaml - 前端：

  <TabControl HorizontalAlignment="Left" Height="550" Margin="60,50,0,0" VerticalAlignment="Top" Width="1020" x:Name="TabControl">
            <TabItem >
                <Grid Background="#FFE5E5E5">
                    <TextBlock HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" Text="Home Page" VerticalAlignment="Top" Width="84"/>
                </Grid>
            </TabItem>
            <TabItem >
                <Grid Background="#FFE5E5E5">
                    <TextBlock HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" Text="Games Page" VerticalAlignment="Top" Width="106"/>
                </Grid>
            </TabItem>
            <TabItem >
                <Grid Background="#FFE5E5E5">
                    <TextBlock HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" Text="Somthing Page" VerticalAlignment="Top" Width="106"/>
                </Grid>
            </TabItem>
            <TabItem >
                <Grid Background="#FFE5E5E5">
                    <TextBlock HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" Text="Somethiing2 Page" VerticalAlignment="Top" Width="106"/>
                </Grid>
            </TabItem>
        </TabControl>

而不是 ButtonBase.Click="youreventhandler" 我做了 PreviewMouseLeftButtonUp="PreviewMouseLeftButtonUp" 让我通过点击 ListViewItem.

来切换不同的标签页

c# - 后端：

  TabControl.SelectedIndex = 1;

如何在点击时在同一个 window 上显示不同的内容？

How do i display different content on the same window on click?

c#

navigation

wpf

xaml