I also miss the splitter in WinUI using WinRT C++. It is an important design feature for Win32 applications. As far as I know, this functionality is not yet available. It would be nice if this functionality could be added to the roadmap so that we have an idea of when we can expect it.
Meanwhile, I'm using the following workaround by a hidden slider. It's based on https://www.codeproject.com/Tips/1259326/Uwp-Make-a-Resizable-Splitview but needed some changes to get it to work on WinUI as the slider starts jumping around if its own width is updated (WinUI bug?).

<Window
    x:Class="App2.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App2"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid>
        <Border
            Background="{ThemeResource AppBarBackgroundThemeBrush}"
            VerticalAlignment="Stretch"
            HorizontalAlignment="Right">
            <!-- As WinUI doesn't have a splitter we need a hack.
                 See https://www.codeproject.com/Tips/1259326/Uwp-Make-a-Resizable-Splitview -->
            <!-- In addition the slider starts jumping its value if it is placed inside 
                 the splitview as proposed by above link. This looks like a bug of WinUI.-->
            <Slider
                x:Name="splitterSlider"
                Width="1010"        
                Maximum="1000"
                LargeChange="100"
                SmallChange="100"
                Minimum="0"
                Opacity="0"
                FocusVisualMargin="0"
                FocusVisualPrimaryThickness="0"
                FocusVisualSecondaryThickness="0"
                IsDirectionReversed="true"
                IsThumbToolTipEnabled="False"
                Value="{x:Bind PaneWidth, Mode=TwoWay}"/>
        </Border>
        <SplitView
            IsPaneOpen="True"
            PanePlacement="Right"
            OpenPaneLength="{x:Bind PaneWidth, Mode=OneWay}"
            DisplayMode="Inline">
            <SplitView.Content>
                <Grid
                Margin="0,0,10,0"
                Background="Beige">
                    <TextBlock
                        VerticalAlignment="Center"
                        HorizontalAlignment="Center"
                        Text="Left Side"/>
                </Grid>
            </SplitView.Content>
            <SplitView.Pane>
                <Grid
                Background="AliceBlue">
                    <TextBlock
                        VerticalAlignment="Center"
                        HorizontalAlignment="Center"                    
                    Text="Right Side"/>
                </Grid>
            </SplitView.Pane>
        </SplitView>
    </Grid>
</Window>

The Width and Maximum value need to track the outer grid width. I'm using a window size event to update their value. If you like proper cursor indicators there is at the moment no way around subclassing to get access to ProtectedCursor. The above workaround and all related quirks indicate that it would be favorable if splitter functionality could be supported by WinUI.

Question: How to add Grid Splitter in c++/winrt desktop app? #4509

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions