Click here to Skip to main content
Click here to Skip to main content

An easier Splitter control for silverlight

, 3 Aug 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
An easier Splitter control for silverlight

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

rj45
Software Developer (Senior)
Canada Canada
No Biography provided

Comments and Discussions

 
Suggestion[My vote of 1] ill-structured PinmemberSunny Oludayo Alli12-Aug-11 19:57 
GeneralRe: [My vote of 1] ill-structured Pinmemberrj4512-Aug-11 21:25 
AnswerRe: [My vote of 1] ill-structured PinmemberSunny Oludayo Alli12-Aug-11 23:58 
GeneralRe: [My vote of 1] ill-structured Pinmemberrj4513-Aug-11 5:54 
SuggestionCodeproject Standard is not maintained PinmemberMr.Sourav.Maitra3-Aug-11 18:58 
GeneralNot an Article PinmvpKunal_Chowdhury3-Aug-11 15:57 
GeneralRe: Not an Article Pinmemberrj453-Aug-11 16:33 
Perhaps this should be a tip and trick, but I didn't see a download option.
 
As for the formatting I would love for the editor to work.

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.141015.1 | Last Updated 3 Aug 2011
Article Copyright 2011 by rj45
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid