An easier Splitter control for silverlight

• Download SimpleSplitter.zip - 642 B

Introduction

Since the gridsplitter in silverlight is arguably a syntaxical mess ( if that is a real word ), I have wraped it another usercontrol to be more windows forms like with a left and right panel that you add to. This is required ( for me anyway ) because when you have many embedded splitters using the grid columns such as 7+ columns + rows it can become very confusing to try to do it with one grid. This is a good example how you can wrap up the build it controls to fix the many syntax issues.

public SimpleSplitter()
{
    this.Content = grid;
    grid.RowDefinitions.Add(new RowDefinition());
    grid.ColumnDefinitions.Add(new ColumnDefinition());
    grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(0,
      GridUnitType.Auto) });
   grid.ColumnDefinitions.Add(new ColumnDefinition());
 
    GridSplitter splitter = new GridSplitter();
   splitter.ShowsPreview = true;
   splitter.SetValue(Grid.RowProperty, 0);
   splitter.SetValue(Grid.ColumnProperty, 1);
   splitter.VerticalAlignment = System.Windows.VerticalAlignment.Stretch;
   splitter.HorizontalAlignment = System.Windows.HorizontalAlignment.Stretch;
   splitter.Width = 6;
   grid.Children.Add(splitter);
 
   leftStack.SetValue(Grid.ColumnProperty, 0);
   rightStack.SetValue(Grid.ColumnProperty, 2);
   grid.Children.Add(leftStack);
   grid.Children.Add(rightStack);
}

Note: Can someone tell me how to paste code properly it used to work fine. I had to write this by hand.

In the code you can see that we have a left and right stackpanel and we add them to a grid with 3 columns and 1 row.The second column is controlled by the GridSplitter.

Usage in XAML

<controlBase:SimpleSplitter>

<controlBase:SimpleSplitter.Left>

<Button></Button>

</controlBase:SimpleSplitter.Left>

<controlBase:SimpleSplitter.Right>

<Button></Button>

</controlBase:SimpleSplitter.Right>

</controlBase:SimpleSplitter>

This is very straightforward, we just add our controls to the left and right panel and the splitter splits them intuitively. So, this would put a spliter between two buttons and let you resize it.