Skip to main content
Home Forums Silverlight Programming Silverlight Controls and Silverlight Toolkit Moveable Margin at runtime
12 replies. Latest Post by Todd Herman on September 28, 2008.
(1)
syedadnan
Member
14 points
56 Posts
09-25-2008 1:29 AM |
Hi all,
I am developing a silverlight application which needs to be have a UI like that of powerpoint i.e. right size is is used creating presentation and left side is used as slide navigator and provides a preview of the slide.
Currently i have developed the right side where we can draw something and used "Canvas" for it which is placed inside a grid cell. Now i want to break the screen into two parts as shown in the figure below where the left side provides a preview of the slide.
My Questions is:
How Can be break the UI into two parts such that we can move the middle margin left and right at runtime as we can do it in PowerPoint?
Regards,
Syed Adnan
HarshBar...
Star
9908 points
1,719 Posts
09-25-2008 2:02 AM |
hi,
I am little scared whether i got understood this Properly or not.
You Can Create 2 User control For Your Left NAv Bar and Right Side Bar.
Integrate them in single User Control.
Put Your Right side Control in A Scrollcontrol.
09-25-2008 3:05 AM |
No i did'nt mean't that.
I mean that i want make the margin between two sides moveable to left or right at runtime
09-25-2008 3:29 AM |
still I am not clear.What do you mean by moveable Margisn between both sides?
You Tried with Scroll Control?
You Can try by giving two buttons also both side and on click or mouse Enter of that Set Canvas .Left Property Accordingly so that it will Move Both sides..
09-25-2008 3:52 AM |
From the image above you can see a splitter that splits the "pwerpoint silde"(on the right of splitter) and the slides navigator (on the left side of the splitter).
I want to create that splitter and make that movable to left and right.
09-25-2008 4:32 AM |
You can Put a Rectangle for that with a little different colour.
Put All Your Control inside a Canvas.
Change Position of that Rectangle Accordingly using Canvas.Left Property ..
Move them to left and Right on a Particular Event....
09-25-2008 5:14 AM |
ok. Moving the splitter is the real problem. But i m not sure which event needs to be written and what code to write in those events.
09-25-2008 5:27 AM |
Hi,
That Depends on which event you want to move.
you can move them on click of some image containng content like this("<") or (">") or Mouse over of some thing or Drag Drop.
In that Event Handler You Have to write some custom logic.
//Your Sample Logic
//Your Splitter is Splitter Rectangle
yourSplitter.setvalue(Canvas.LeftProperty,(double)yourSplitter.getValue(Canvas.LeftProperty)+2.0);//will move right by 2 units
//For e.g You Want to change width also of Left side control
leftsidecontrol.width+=2;//Increase width by 2
sladapter
All-Star
17439 points
3,172 Posts
09-25-2008 11:03 AM |
Are you trying to find a Splitter control? There is one GridSplitter control in the current Silverlight. Is that what you want?
Todd Herman
616 points
116 Posts
09-25-2008 1:26 PM |
syedadnan:How Can be break the UI into two parts such that we can move the middle margin left and right at runtime as we can do it in PowerPoint?
After reading the entire chain of posts I am afraid I have the wrong idea here but I am wondering the same thing as the previous poster: Do you want the GridSplitter? You can find more information on it here (http://www.silverlightshow.net/items/Using-the-GridSplitter-control-in-Silverlight-2-Beta-1.aspx). The article targets beta 1 but the information is the same.
The splitter is used to do exactly what you want. For your image above, you would have 3 main columns. The left most column would be the one that lists the slides while the right most is your main canvas. The middle column is where the splitter would be. The splitter is used to alter the width of adjacent columns when it is dragged.
I have even created a custom splitter (not quite done) that allows for a handle on the splitter that will fully collapse/expand the left most column when it is clicked.
09-28-2008 6:49 AM |
Thanks sladapter and Todd, GridSplitter solved the problem.
09-28-2008 1:44 PM |
Can we set the maximum possible width of the 1st column of grid, so that GridSplitter(placed inside 2 column) can only be moved to the right upto the maximum width allowed for the 1st column.
09-28-2008 2:01 PM |
syedadnan:Can we set the maximum possible width of the 1st column of grid, so that GridSplitter(placed inside 2 column) can only be moved to the right upto the maximum width allowed for the 1st column.
Exactly right. That is how I do it as well. Just set that columns MaxWidth property to the desired maximum.
Moveable Margin at runtime