UWP 根據單擊的按鈕更改 SplitView.Pane 內容

Question

在 UWP 中，我試圖在屏幕左側創建一個帶有四個按鈕的 SplitView，前三個按鈕中的任何一個都會打開窗格，但根據單擊的按鈕顯示不同的內容：第一個 = 首選項，第二個 = 帳戶，第三個= 有關程序的信息。 第 4 個按鈕只是將窗格關閉回原來的 state。 我的問題是如何根據單擊的按鈕在窗格中顯示不同的內容？ 對此是否有更好的控制？

單擊第一個按鈕時的內容

單擊第二個按鈕時的內容

單擊第三個按鈕時的內容

現在每個內容都有一個不同的 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

更新：

您可以創建三個用戶控件來添加不同的內容，並將這些用戶控件添加到您的 ContentPanel 中。 當您單擊 Button 時，顯示相應的內容並隱藏其他 UserControl。 您可以使用 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);
}