UWP Change SplitView.Pane content according to button clicked

Question

In UWP I'm trying to create a SplitView on the left side of the screen with four buttons, any of the first three buttons open the pane but show different content according to which button was clicked: 1st = preferences, 2nd = account, 3rd = info about program. The 4th button simply closes the pane back to its original state. My question is how do I go about showing different content in the pane according to the button clicked? Is there maybe a better control for this?

Content when the first button is clicked

Content when the second button is clicked

Content when the third button is clicked

Right now each content simply has a different header but I plan to add things like a theme changer in the preferences content, account information in the user content and info related to the program in the info content.

XAML Code:

<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>

Faywang - MSFT · Accepted Answer · 2020-07-10T08:34:34.317

Update:

You can create three UserControls to add different contents and add these UserControls in your ContentPanel. When you click the Button, show the corresponding content and hide other UserControls. You can use VisualStateManager or in code-behind to switch different contents. For example:

.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);
}

Seems like I gave you the wrong idea with my images, right now it only has the header of the content but I want to add more stuff, f.e. changing themes in the preferences, editing account information in the user account, and showing tips or other information in the info. — ZFBbw, Jul 10 '20 at 07:08
I have updated my answer, it's better to create different usercontrols to contain your different content, you can check it. — Faywang - MSFT, Jul 10 '20 at 08:35
Oh yeah I forgot you just collapse content by changing visibility! Thanks for the updated answer. — ZFBbw, Jul 10 '20 at 13:36

UWP Change SplitView.Pane content according to button clicked

1 Answers1