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

[shelllet]

I found GridSplitter in Windows Community Toolkit but it dose not support c++/winrt desktop app. what should i do?

[jschwizer99]

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.

[StephenLPeters]

@michael-hawker FYI. @jevansaks or @kennykerr GridSplitter is defined in a managed DLL, can you implement a winrt projection with a managed binary?

[jevansaks]

https://docs.microsoft.com/en-us/windows/uwp/winrt-components/creating-windows-runtime-components-in-csharp-and-visual-basic

[michael-hawker]

@StephenLPeters @jevansaks there are too many things we'd have to work around to be a Windows Runtime Component, it's too restrictive. I investigated this as part of our 7.0 release and commented on that here: CommunityToolkit/WindowsCommunityToolkit#3145 (comment)

We have been asked on how to include our components using C++ before as well, we have an open issue for 7.1 about writing a sample on how to do this: CommunityToolkit/WindowsCommunityToolkit#3704

I know in the past I've created a C# project, added a Page and referenced Toolkit controls from there and then loaded that page in a C++/CX app (kind of like a XAML Islands type scenario). This of course loads .NET still, but makes it possible to use the controls. The tooling wasn't the best at the time, but it was a few years ago.

GridSplitter wouldn't really work on its own here though, considering it's one of the oldest things in the Toolkit and is part of WPF, it would be a good control for WinUI to look into including in the future.

I guess there's a good question here around how this works in the WinUI 3 world, is there still such a thing as a Windows Runtime Component? I think @marb2000 mentioned there's a transitive concept of something similar still?

[jevansaks]

WinUI3 doesn't change the landscape of WinRT components like this -- WinRT is the currency for components that can be interoperated across different language boundaries. The thing that might get better is that with Cs/WinRT we have the opportunity to bring C#-implemented components up to parity with native components in terms of all of the limitations that are currently imposed on C# when you try to compile with the WinRT Component flag. But I am guessing that they have only implemented consuming projection support so far and not producing projection support -- but @scott1js would know the state of the world there.

[michael-hawker]

I've published our C++ sample showing how to use Toolkit components here: https://github.com/CommunityToolkit/Sample-Windows-CppWinRT