UWP Изменение содержимого SplitView.Pane в соответствии с нажатой кнопкой

Question

В UWP я пытаюсь создать SplitView в левой части экрана с четырьмя кнопками, любая из первых трех кнопок открывает панель, но показывает различное содержимое в зависимости от того, какая кнопка была нажата: 1-й = предпочтения, 2-й = аккаунт, 3-й = информация о программе. Четвертая кнопка просто закрывает панель в исходное состояние. У меня вопрос: как мне go отображать различное содержимое на панели в зависимости от нажатой кнопки? Может быть, есть лучший контроль для этого?

Содержимое при нажатии первой кнопки

Содержимое при нажатии второй кнопки

Контент при нажатии третьей кнопки

Прямо сейчас у каждого контента просто другой заголовок, но я планирую добавить такие вещи, как средство смены темы в контент настроек, информацию об учетной записи в содержимое пользователя и информация, относящаяся к программе, в информационном содержимом.

Код 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

Обновление:

Вы можете создать три UserControls для добавления различного содержимого и добавить эти UserControls в ContentPanel. Когда вы нажимаете кнопку, вы показываете соответствующий контент и скроете другие 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);
}