CODEWITHSUNDEEP
c#uwpsplitview
Sylveon
Sylveon

Reputation: 385

Creating a good-looking SplitView in UWP

I followed a tutorial for adding a SplitView control to my page. The code looks like:

<SplitView x:Name="MainSplitView" DisplayMode="CompactOverlay" IsPaneOpen="False" CompactPaneLength="50" OpenPaneLength="150">
        <SplitView.Pane>
            <StackPanel Background="Gray">
                <Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="&#xE700;" Width="50" Height="50" Background="Transparent" Click="HamburgerButton_Click" />
                <StackPanel Orientation="Horizontal">
                    <Button x:Name="MenuButton1" FontFamily="Segoe MDL2 Assets" Content="&#xE825;" Width="50" Height="50" Background="Transparent" />
                    <TextBlock Text="Button 1" FontSize="18" VerticalAlignment="Center" />
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <Button x:Name="SettingsButton" FontFamily="Segoe MDL2 Assets" Content="&#xE713;" Width="50" Height="50" Background="Transparent" FontSize="18" />
                    <TextBlock Text="Settings" FontSize="18" VerticalAlignment="Center" />
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <Button x:Name="AboutButton" FontFamily="Segoe MDL2 Assets" Content="&#xE897;" Width="50" Height="50" Background="Transparent" FontSize="18" />
                    <TextBlock Text="About" FontSize="18" VerticalAlignment="Center" />
                </StackPanel>
            </StackPanel>
        </SplitView.Pane>
        <SplitView.Content>
            SplitView content here
        </SplitView.Content>
    </SplitView>

But the final result looks like this. Not really cool.

How can I reach something like the Insider Hub's?

Upvotes: 3

Views: 6276

Answers (3)

Sylveon
Sylveon

Reputation: 385

The modern way of doing this is using NavigationView. It looks great by default and requires less messing around to implement. It's built-in to the OS since build 16299 and available in WinUI 2 for downlevel support.

Upvotes: 0

guest
guest

Reputation: 125

Using AppStudio Libraries https://github.com/wasteam/waslibs

ShellPage

<Page
x:Name="PageLayout"
x:Class="UniversalProject.UWP.ShellPage"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    
xmlns:was_control="using:AppStudio.Uwp.Controls"
xmlns:controlEx="using:UniversalProject.UWP.Built_In.ControlEx"
DataContext="{Binding RelativeSource={RelativeSource Self}}"
mc:Ignorable="d"
KeyUp="OnKeyUp">
<Page.Resources>
    <DataTemplate x:Key="NavigationItemTemplate">
        <Grid Background="Transparent">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <ContentControl
                Margin="12,10"
                Content="{Binding Icon}"
                Foreground="{StaticResource NavigationPaneText}"/>
            <ContentControl
                Margin="6,0"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Content="{Binding Image}" />
            <TextBlock
                Grid.Column="1"
                Margin="16,10"
                Text="{Binding Caption}"
                Foreground="{StaticResource NavigationPaneText}" />
            <ToolTipService.ToolTip>
                <TextBlock Text="{Binding Caption}" Foreground="{ThemeResource SystemBaseHighColor}"/>
            </ToolTipService.ToolTip>
        </Grid>
    </DataTemplate>

    <Style x:Key="NavigationSeparatorStyle" TargetType="ContentControl">
        <Setter Property="Margin" Value="8,0" />
        <Setter Property="MinHeight" Value="7"/>
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Line
                        X1="0"
                        X2="1"
                        Stretch="UniformToFill"
                        Stroke="{StaticResource NavigationPaneText}" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <DataTemplate x:Key="DefaultHeaderTemplate">
        <Grid Background="Transparent">
            <TextBlock
                Margin="14,8"
                Text="{Binding}"
                Style="{StaticResource AppBarTitleStyle}" />
        </Grid>
    </DataTemplate>

    <Style x:Key="ListViewItemContainerStyle" TargetType="ListViewItem">
        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
        <Setter Property="TabNavigation" Value="Local"/>
        <Setter Property="IsHoldingEnabled" Value="True"/>
        <Setter Property="Padding" Value="2,0"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}"/>
        <Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListViewItem">
                    <ListViewItemPresenter
                        ContentTransitions="{TemplateBinding ContentTransitions}"
                        SelectionCheckMarkVisualEnabled="True"
                        CheckBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
                        CheckBoxBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
                        DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
                        DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
                        FocusBorderBrush="{StaticResource NavigationPaneText}"
                        FocusSecondaryBorderBrush="{StaticResource NavigationPaneText}"
                        PlaceholderBackground="Transparent"
                        PointerOverForeground="{StaticResource NavigationPaneText}"
                        SelectedForeground="{StaticResource NavigationPaneText}"                        
                        DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
                        DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
                        ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                        ContentMargin="{TemplateBinding Padding}"
                        CheckMode="Inline">
                        <ListViewItemPresenter.SelectedBackground>
                            <SolidColorBrush Color="{StaticResource SystemAccentColor}" Opacity="0.6"/>
                        </ListViewItemPresenter.SelectedBackground>
                        <ListViewItemPresenter.SelectedPressedBackground>
                            <SolidColorBrush Color="{StaticResource SystemAccentColor}" Opacity="1.0"/>
                        </ListViewItemPresenter.SelectedPressedBackground>
                        <ListViewItemPresenter.SelectedPointerOverBackground>
                            <SolidColorBrush Color="{StaticResource SystemAccentColor}" Opacity="0.8"/>
                        </ListViewItemPresenter.SelectedPointerOverBackground>
                        <ListViewItemPresenter.PointerOverBackground>
                            <SolidColorBrush Color="{StaticResource SystemAccentColor}" Opacity="0.1"/>
                        </ListViewItemPresenter.PointerOverBackground>
                        <ListViewItemPresenter.PressedBackground>
                            <SolidColorBrush Color="{StaticResource SystemAccentColor}" Opacity="0.3"/>
                        </ListViewItemPresenter.PressedBackground>
                    </ListViewItemPresenter>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>
<Grid x:Name="MainLayout" Background="{StaticResource AppBackground}">
    <was_control:ShellControl 
        x:Name="shell"
        Header="App Name" 
        NavigationItems="{Binding NavigationItems}"            
        BorderBrush="{StaticResource AppBarBackground}"
        HeaderBackground="{StaticResource HeaderAppbarBackground}"
        HeaderForeground="{StaticResource AppBarForeground}"
        HeaderTemplate="{StaticResource DefaultHeaderTemplate}"
        NavigationForeground="{StaticResource NavigationPaneText}"
        SeparatorStyle="{StaticResource NavigationSeparatorStyle}"
        NavigationBackground="{StaticResource NavigationPaneBackground}"
        HamburgerBackground="{StaticResource SystemControlBackgroundAccentBrush}"
        HamburgerBorderBrush="{StaticResource NavigationPaneButton}"
        HamburgerForeground="{StaticResource NavigationPaneText}"
        NavigationItemTemplate="{StaticResource NavigationItemTemplate}"
        NavigationSubItemTemplate="{StaticResource NavigationItemTemplate}"
        ListViewItemContainerStyle="{StaticResource ListViewItemContainerStyle}">
        <was_control:ShellControl.CommandBar>
            <CommandBar x:Name="commandbar" RequestedTheme="Dark">
                <CommandBar.SecondaryCommands>
                    <controlEx:SecondaryIconButton Glyph="&#xE109;" RequestedTheme="Dark" 
                                                   Foreground="{StaticResource NavigationPaneText}" 
                                      x:Name="createButton" 
                                      x:Uid="CreateNewItemLabel"></controlEx:SecondaryIconButton>
                    <controlEx:SecondaryIconButton Glyph="&#xE174;" RequestedTheme="Dark" 
                                                   Foreground="{StaticResource NavigationPaneText}" 
                                      x:Name="importExportButton" 
                                      x:Uid="ImportExportLabel" ></controlEx:SecondaryIconButton>
                </CommandBar.SecondaryCommands>
                <CommandBar.PrimaryCommands>

                </CommandBar.PrimaryCommands>
            </CommandBar>
        </was_control:ShellControl.CommandBar>
        <Grid x:Name="contentgrid" Margin="0,0,0,0">
                 <Frame  x:Name="frame" />
        </Grid>
    </was_control:ShellControl>   
</Grid>

Upvotes: 0

Depechie
Depechie

Reputation: 6142

There is a very nice example made by Justin Xin Liu on GitHub. Take a look at that for tips! ( I use same approach ) https://github.com/JustinXinLiu/SwipeableSplitView

So inside the pane use a listview like so:

<SplitView.Pane>
    <ListBox ItemsSource="{x:Bind ViewModel.MenuItems}" SelectedItem="{x:Bind ViewModel.SelectedMenuItem, Mode=TwoWay, Converter={StaticResource ObjectToMenuItemConverter}}" ItemContainerStyle="{StaticResource MenuListBoxItemStyle}">
        <ListBox.ItemTemplate>
            <DataTemplate x:DataType="Presentation:MenuItem">
                <StackPanel Orientation="Horizontal" Height="48">
                    <TextBlock Grid.RowSpan="2" Text="{x:Bind Icon, Mode=OneWay}" Style="{StaticResource IconTextBlockStyle}" />
                    <TextBlock Grid.Column="1" Text="{x:Bind Title, Mode=OneWay}" Style="{StaticResource MenuTitleTextBlockStyle}" />
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</SplitView.Pane>

And the first TextBlock is filled with an Icon using following style

<Style x:Key="IconTextBlockStyle" TargetType="TextBlock">
    <Setter Property="FontFamily" Value="Segoe MDL2 Assets" />
    <Setter Property="FontSize" Value="24" />
    <Setter Property="Width" Value="48" />
    <Setter Property="HorizontalAlignment" Value="Center" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="TextAlignment" Value="Center" />
</Style>

There is also a MenuListBoxItemStyle style for the ListBox, this will enable some animation. You can see if you want it or not.

If you want to see how I implemented it in my app, you can take a look at https://github.com/AppCreativity/Kliva. But that has an already more complex setup for the side pane, so maybe not easy to follow. On the other hand I haven't implemented the swipe guesture that Justin does in his project so maybe my app design is more like the one you want.

Upvotes: 7

Related Questions