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"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="PSC.Splitter" Height="300" Width="300">
    <Grid>
      <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
      </Grid.ColumnDefinitions>
      <StackPanel Background="#feca00" Grid.Column="0">
        <TextBlock FontSize="35" Foreground="#58290A" 
                   TextWrapping="Wrap">Left Hand Side</TextBlock>
      </StackPanel>
      <GridSplitter/>
      <Border CornerRadius="10" BorderBrush="#58290A" 
              BorderThickness="5" Grid.Column="1">
        <TextBlock FontSize="25" Margin="20" Foreground="#FECA00" 
                   TextWrapping="Wrap">Right Hand Side</TextBlock>
      </Border>
    </Grid>
</Window>

Happy coding!

Advertsing

125X125_06

Planet Xamarin

Planet Xamarin

Calendar

<<  July 2017  >>
MonTueWedThuFriSatSun
262728293012
3456789
10111213141516
17181920212223
24252627282930
31123456

View posts in large calendar

Month List