UWP 根据点击的按钮更改 SplitView.Pane 内容

Question

在 UWP 中，我试图在屏幕左侧创建一个带有四个按钮的 SplitView，前三个按钮中的任何一个都会打开窗格，但会根据单击的按钮显示不同的内容：第一个 = 首选项，第二 = 帐户，第三 = 有关程序的信息。第 4 个按钮只是将窗格关闭回到其原始状态。我的问题是如何根据单击的按钮在窗格中显示不同的内容？对此是否有更好的控制？

Content when the first button is clicked

Content when the second button is clicked

Content when the third button is clicked

现在每个内容都有不同的 header 但我计划在偏好内容中添加主题转换器，在用户内容中添加帐户信息，在信息内容中添加与程序相关的信息。

XAML代码：

<Grid>
    <SplitView IsPaneOpen="False"
               DisplayMode="CompactInline"
               CompactPaneLength="50"
               OpenPaneLength="250">
        <SplitView.Pane>
            <StackPanel Orientation="Horizontal">
                <StackPanel x:Name="ButtonPanel"
                            Background="Goldenrod">
                    <StackPanel.Resources>
                        <Style TargetType="Button">
                            <Setter Property="FontSize"
                                    Value="25">
                            </Setter>
                            <Setter Property="Width"
                                    Value="50">
                            </Setter>
                            <Setter Property="Height"
                                    Value="50">
                            </Setter>
                            <Setter Property="Foreground"
                                    Value="Black">
                            </Setter>
                            <Setter Property="Background"
                                    Value="Transparent">
                            </Setter>
                        </Style>
                    </StackPanel.Resources>
                    <Button x:Name="PreferencesButton" 
                            Content="☰" 
                            Click="PreferencesButton_Click">
                    </Button>
                    <Button x:Name="UserButton"
                            FontFamily="Segoe MDL2 Assets"
                            Content=""
                            Click="UserButton_Click">
                    </Button>
                    <Button x:Name="InfoButton"
                            Content=""
                            Click="InfoButton_Click">
                    </Button>
                    <Button x:Name="CloseButton"
                            FontFamily="Segoe MDL2 Assets"
                            Content=""
                            Click="CloseButton_Click">
                    </Button>
                </StackPanel>
                <StackPanel x:Name="ContentPanel">
                    <!-- Add content based on which button was clicked -->
                </StackPanel>
            </StackPanel>
        </SplitView.Pane>
        <SplitView.Content>
            <Grid>
                <TextBlock Text="SplitView Basic"
                           FontSize="54"
                           Foreground="White"
                           HorizontalAlignment="Center"
                           VerticalAlignment="Center">
                </TextBlock>
            </Grid>
        </SplitView.Content>
    </SplitView>
</Grid>

Answer 1

更新：

您可以创建三个UserControl 来添加不同的内容，并将这些UserControl 添加到您的ContentPanel 中。当你点击Button时，显示相应的内容并隐藏其他的UserControls。您可以使用 VisualStateManager 或在代码隐藏中切换不同的内容。例如：

.xaml:

<Grid>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="Account">
                <VisualState.Setters>
                    <Setter Target="Per.Visibility" Value="Collapsed"/>
                    <Setter Target="MyAccount.Visibility" Value="Visible"/>
                    <Setter Target="MyInformation.Visibility" Value="Collapsed"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="Preferences">
                <VisualState.Setters>
                    <Setter Target="Per.Visibility" Value="Visible"/>
                    <Setter Target="MyAccount.Visibility" Value="Collapsed"/>
                    <Setter Target="MyInformation.Visibility" Value="Collapsed"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="Information">
                <VisualState.Setters>
                    <Setter Target="Per.Visibility" Value="Collapsed"/>
                    <Setter Target="MyAccount.Visibility" Value="Collapsed"/>
                    <Setter Target="MyInformation.Visibility" Value="Visible"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <SplitView x:Name="MySplitView"
           IsPaneOpen="False"
           DisplayMode="CompactInline"
           CompactPaneLength="50"
           OpenPaneLength="250">
        <SplitView.Pane>
            <StackPanel Orientation="Horizontal">
                ......
                <StackPanel x:Name="ContentPanel">
                    <!-- Add content based on which button was clicked -->
                    <local:PerUserControl x:Name="Per" Visibility="Collapsed"></local:PerUserControl>
                    <local:AccountUserControl x:Name="MyAccount" Visibility="Collapsed"></local:AccountUserControl>
                    <local:InfoUserControl x:Name="MyInformation" Visibility="Collapsed"></local:InfoUserControl>
                </StackPanel>
            </StackPanel>
        </SplitView.Pane>
        <SplitView.Content>
            ......
        </SplitView.Content>
    </SplitView>
</Grid>

.cs:

private void PreferencesButton_Click(object sender, RoutedEventArgs e)
{
    MySplitView.IsPaneOpen = true;
    VisualStateManager.GoToState(this, "Preferences", true);

    // Or manually hide or show UserControls
    //Per.Visibility = Visibility.Visible;
    //MyAccount.Visibility = Visibility.Collapsed;
    //MyInformation.Visibility = Visibility.Collapsed;
}

private void UserButton_Click(object sender, RoutedEventArgs e)
{
    MySplitView.IsPaneOpen = true;
    VisualStateManager.GoToState(this, "Account", true);
}

private void InfoButton_Click(object sender, RoutedEventArgs e)
{
    MySplitView.IsPaneOpen = true;
    VisualStateManager.GoToState(this, "Information", true);
}

UWP 根据点击的按钮更改 SplitView.Pane 内容

UWP Change SplitView.Pane content according to button clicked

c#

xaml

splitview

uwp