I am converting my UWP app to WinUI and .Net 8.0. I have a control template for a GridSplitter that uses the GridSplitter.Element to create a control template that includes a Grid and two Buttons. In WinUI it tells me the Element tag is not valid. I have not found examples of GridSplitter Style or Control Templates for WinUI. Can I still create a custom control template for a GridSplitter in WinUI? The reason for the template is to have a static Window in the left pane and a changeable page in the right pane based on one of the button clicks. I have not figured out a work around but could find one if I cannot control template the GridSplitter.
I have not tried a work around but it would be to go back to a base GridSplitter and place the buttons that displayed each page in a different place.
Bob Balok is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
The GridSplitter comes from Windows Community Toolkit. To use the GridSplitter, you need to install the CommunityToolkit.WinUI.Controls.Sizers NuGet package.
Now, to re-template the GridSplitter control, you need to understand that it derives from SizerBase. In the SizerBase‘s default Style, you can see that it has a Grid named RootGrid, and a Rectangle named PART_Thumb.
Here’s an example:
<Page
x:Class="GridSplitterDemo.Shell"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="using:GridSplitterDemo"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:toolkit="using:CommunityToolkit.WinUI.Controls"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
mc:Ignorable="d">
<Page.Resources>
<Style
x:Key="CustomGridSplitter"
TargetType="toolkit:GridSplitter">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:GridSplitter">
<Grid x:Name="RootGrid">
<Rectangle
x:Name="PART_Thumb"
Width="4"
Height="8"
Fill="SkyBlue" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid ColumnDefinitions="Auto,Auto,*">
<Button
Grid.Column="0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Content="Left" />
<toolkit:GridSplitter
Grid.Column="1"
Style="{StaticResource CustomGridSplitter}" />
<Button
Grid.Column="2"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Content="Right" />
</Grid>
</Page>
1