How Do I Add a Splitter to my WPF Window?

Splitters are a useful UI feature where the width or height of a control on the form can be modified to show more or less information.

An Example of this is the splitter between the folder tree-view in and the file and subfolder detail view in Windows Explorer, allowing the size of the folder tree-view on the left-hand side of the form to be sized up to 50% of the form width. Windows Forms 1.1 included a Splitter control, and Windows Forms 2.0 included a SplitContainer.

WPF does not have equivalent versions of either of these controls; however it is possible to add splitters to your WPF application using the WPF Grid, and a GridSplitter. The example code below allows the two columns in the grid to be re-sized. This is done by adding a GridSplitter as a child item of the Grid.

<Window x:Class="PSC.Splitter.Window1"
    Title="PSC.Splitter" Height="300" Width="300">
        <ColumnDefinition />
        <ColumnDefinition />
      <StackPanel Background="#feca00" Grid.Column="0">
        <TextBlock FontSize="35" Foreground="#58290A" 
                   TextWrapping="Wrap">Left Hand Side</TextBlock>
      <Border CornerRadius="10" BorderBrush="#58290A" 
              BorderThickness="5" Grid.Column="1">
        <TextBlock FontSize="25" Margin="20" Foreground="#FECA00" 
                   TextWrapping="Wrap">Right Hand Side</TextBlock>

Happy coding!



Planet Xamarin

Planet Xamarin