Silverlight: GridSplitter with a collapse button

(Silverlight is much more hard-to-handle then Flex)

This is my first blog about Silverlight !!

Not much to explain here, just look at the code and ask questions.
I have added a button to the GridSplitter by sub-classing it.
Then later I used templates, styles and events to give the collapse button its look and functionality.
Of course you can make everything look better by applying styles (my collapse button is a simple red rectangle).

By handling some simple events I control the collapsing and expanding.
Notice that while dragging the splitter to the far left the button will change its arrow direction.

That was a good lesson.

Demo is here
Source is here

update: i have made a better version of this, look here.
update: go to this post and use the best version of this control

Advertisements

12 Responses to Silverlight: GridSplitter with a collapse button

  1. Pingback: Silverlight Cream for November 18, 2008 -- #431

  2. Fallon Massey says:

    You said,

    “Silverlight is much more hard-to-handle then Flex”

    I would like to know what you mean by that, just for comparison. Were you a Flash/Flex developer before using silverlight?

  3. Pingback: 2008 November 19 - Links for today « My (almost) Daily Links

  4. Danijel says:

    I am also curious to hear why “Silverlight is much more hard-to-handle then Flex” from perspective of someone who already used Flex?

  5. shemesh says:

    well…
    in SL everything is longer, if in Flex i needed 2 lines to write something in SL it takes about 10 lines of code to do the same.
    SL is kind of ’empty’ if you need something you most likely need to develop it yourself.
    SL layouting is not nice! it does not have any work with dimensions in percentage. this is ending us doing all the size-change calculations.
    SL have a weird way for styling – why not use the industry standard CSS.
    SL cannot do binding to UI objects properties (e.g. u cannot bind a Canvas width to a Slider value).
    SL does not know what is bitmap, with all that implicit.

    i can find more, but i m not here to complain.
    all-in-all: Flex+AS3 is much more friendly to the developer.

  6. scott says:

    “SL have a weird way for styling – why not use the industry standard CSS.”

    Because it’s NOT HTML? Because it’s not a web document?

    When I hear people compare XAML to HTML and CSS and lament how XAML is not like HTML and CSS, I can’t help but think they don’t have a grasp of what XAML actually is. XAML is a way to describe user interfaces or hierarchies of objects. It allows you to seperate presentation from logic. Everything that I describe in XAML is turned into a real object. I can create the exact same user interface by creating objects in the code-behind files. Including the styling of obejcts (Brush with Color.Red). This is NOT what HTML does or what it was meant for.

    Also, the databinding in WPF includes binding of properties between objects, so if that is missing in SL don’t be sure it won’t show up later.

    I recommend getting a good WPF book so you can fully understand what XAML is. Something like “Windows Presentation Foundation Unleashed” is an easy read. Once you fully understand what XAML is you will no longer wonder why you can use what is essentially an unreleated technology meant to style web documents (CSS).

    • shemesh says:

      scott,
      as i m a Flex developer in the last 3 years and web developer for the 3 years before i DO have a clue of what are the differences!
      my opinion is based upon hands-on experience.
      i do not care if you call it CSS or whatever – styling Silverlight is a very unpleasant, unfriendly job.
      i m ending up with XAML pages that have HUNDREDS of lines just to change some minor property (try styling a DataGrid / ListBox)
      and yes – CSS is much much more pleasent to work with. have you ever developed Flex applications?

      and i still haven’t said anything about SL compiling with errors, very weird runtime errors messages, and above all – performance issues.
      most of the time i find myself writing workarounds for bugs/holes/walls i encounter.
      Silverlight have a long way to go before it is matured into a real framework one can count on!

  7. Brad says:

    Coming from Flex, WPF has quite the learning curve. I can see where they are coming from, but some things are a little insane.

    Flex (Flash) comes from an animation root to development. WPF comes from development to design.

    MS needs to improve the tools if they ever expect to get a wide following from designers.

  8. Diego says:

    Hello, it’s a good job, I could use it in my project with some changes. I have a grid with many columns, rows and controls.

    -I was getting an error in the design view in the visual studio 2010 designer. I commented the method ExtendedGridSplitter.MeasureOverride and everything worked fine.

    -In the method Page.VGridSplitter_ButtonClick I was getting some strange behavior, sometimes it worked sometimes it didn’t, so I commented the line # 52 and everything worked fine

    else //if (sender != this)

    -I don’t like the actual arrow direction management, I suggest moving the Page.Grid_SizeChanged code into the ExtendedGridSplitter.OnCollapseButtonClickEvent to change the arrow direction.

    Thank you some much.

    • shemesh says:

      soon i will post a better version of this control. stand by couple of days and use the better one.

  9. Phillip says:

    Hello, it’s a nice user control I converted your code to vb but no work:

    Imports System.Net
    Imports System.Windows
    Imports System.Windows.Controls
    Imports System.Windows.Documents
    Imports System.Windows.Ink
    Imports System.Windows.Input
    Imports System.Windows.Media
    Imports System.Windows.Media.Animation
    Imports System.Windows.Shapes

    Namespace GIS

    _
    Public Class ExtendedGridSplitter
    Inherits GridSplitter

    Public Const CollapseButtonElement As String = “CollapseButton”

    Public Delegate Sub CollapseButtonClickEventHandler(ByVal sender As Object)

    Public Event CollapseButtonClickEvent As CollapseButtonClickEventHandler

    Public CollapseButton As Button

    Public Sub New()

    Me.DefaultStyleKey = GetType(ExtendedGridSplitter)

    CollapseButton = TryCast(Me.GetTemplateChild(CollapseButtonElement), Button)

    If CollapseButton IsNot Nothing Then

    AddHandler CollapseButton.Click, New RoutedEventHandler(AddressOf OnCollapseButtonClickEvent)
    End If

    End Sub

    Public Overrides Sub OnApplyTemplate()
    MyBase.OnApplyTemplate()

    CollapseButton = TryCast(Me.GetTemplateChild(CollapseButtonElement), Button)

    If CollapseButton IsNot Nothing Then

    AddHandler CollapseButton.Click, New RoutedEventHandler(AddressOf OnCollapseButtonClickEvent)
    End If

    End Sub

    Private Sub OnCollapseButtonClickEvent(ByVal sender As Object, ByVal e As RoutedEventArgs)

    RaiseEvent CollapseButtonClickEvent(sender)

    End Sub

    End Class

    End Namespace

  10. Phillip says:

    Error: Failed to assign to property ‘gridSplitter_collapse.components.ExtendedGridSplitter.CollapseButtonClickEvent’.

    Just add a parameter as “ByVal e As RoutedEventArgs”

    Public Delegate Sub CollapseButtonClickEventHandler(ByVal sender As Object, ByVal e As RoutedEventArgs)

    and modify

    Private Sub OnCollapseButtonClickEvent(ByVal sender As Object, ByVal e As RoutedEventArgs)
    RaiseEvent CollapseButtonClickEvent(sender, e)
    End Sub

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: