Question

基本上，我有一个窗口，该窗口的导航栏的侧面具有不同的按钮，当单击这些按钮时，这些按钮应该是不同的页面。当用户尝试导航到其他页面时，如何使其显示不同的内容。

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

我添加了标签页，以便可以在同一窗口上显示不同的页面。

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;

单击如何在同一窗口上显示不同的内容？

2 个答案: