Wiring the RadSplitButton (Dropdown Contents) to ICommands

[Chris]

Hi,

I'm getting in a bit of a mess with the RadSplitButton so I'm hoping someone can get me back on track.

In summary, I'm trying to mimic the behavior of Outlook.
My sample application has a main window with a toolbar with a split button on it.
It also has an outlook bar and then a main region for content to be displayed according to the selected item in the outlook bar.
When you click the split button I'd like a new window to open.
The new window is not modal and you can have as many new windows as you like (that's how outlook works).

It kind of works at the moment but I have 2 issues I'm trying to resolve...

First, when you click one of the menu items in the drop down content the new window opens but the drop down content does not disappear? I'm hoping this is just a property somewhere I need to set, but I can't see anything obvious.

Second, in outlook...
If Mail is selected in the outlook bar the split button has a default action of new message.
If Calendar is selected in the outlook bar the split button has a default action of new appointment.
etc.etc.

How do I go about changing the default action of the split button?

Apologies if I'm looking in the wrong place, but the documentation on the split button seems lacking in detail.
It gives examples of how to structure a split button but none of the examples seem to give any details about wiring the button up to commands.

I honestly don't know if I've got this all wrong.
Should I be using separate commands for each item in the split button?
or should the split button be wired up to a single command with a command parameter and each item has a different value for the parameter?

Here's my XAML which hopefully will be enough for someone to spot where I'm going wrong...

<Window xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"  x:Class="RadSplitButtons.View.MainView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainView" Height="600" Width="800">

    <Window.Resources>
        <BooleanToVisibilityConverter x:Key="booleanVisibilityConverter" />
    </Window.Resources>

    <DockPanel>
        <telerik:RadToolBarTray DockPanel.Dock="Top">
            <telerik:RadToolBar>
                <telerik:RadSplitButton Command="{Binding NewClientCommand}">
                    <StackPanel Orientation="Horizontal">
                        <Image Source="/Icons/Client.png" />
                        <TextBlock VerticalAlignment="Center">New</TextBlock>
                    </StackPanel>
                    <telerik:RadSplitButton.DropDownContent>
                        <StackPanel>
                            <MenuItem Header="Client" Command="{Binding NewClientCommand}">
                                <MenuItem.Icon>
                                    <Image Source="/Icons/Client.png" />
                                </MenuItem.Icon>
                            </MenuItem>
                            <MenuItem Header="Diary Entry" Command="{Binding NewDiaryEntryCommand}">
                                <MenuItem.Icon>
                                    <Image Source="/Icons/Diary.png" />
                                </MenuItem.Icon>
                            </MenuItem>
                            <MenuItem Header="Task" Command="{Binding NewTaskCommand}">
                                <MenuItem.Icon>
                                    <Image Source="/Icons/Task.png" />
                                </MenuItem.Icon>
                            </MenuItem>
                        </StackPanel>
                    </telerik:RadSplitButton.DropDownContent>
                </telerik:RadSplitButton>
            </telerik:RadToolBar>
        </telerik:RadToolBarTray>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <telerik:RadOutlookBar Name="outlookBar" Grid.Column="0" Width="200">
                <telerik:RadOutlookBarItem Name="obiClients" Header="Clients" Icon="/Icons/Client.png" FontWeight="Bold" />
                <telerik:RadOutlookBarItem Name="obiDiary" Header="Diary" Icon="/Icons/Diary.png" FontWeight="Bold" />
                <telerik:RadOutlookBarItem Name="obiTasks" Header="Tasks" Icon="/Icons/Task.png" FontWeight="Bold" />
            </telerik:RadOutlookBar>
            <StackPanel Grid.Column="1" >
                <TextBlock Text="{Binding ElementName=outlookBar, Path=SelectedItem.Header}" />
                <TextBlock Visibility="{Binding ElementName=obiClients, Path=IsSelected, Converter={StaticResource booleanVisibilityConverter}}">A list of clients would go here...</TextBlock>
                <TextBlock Visibility="{Binding ElementName=obiDiary, Path=IsSelected, Converter={StaticResource booleanVisibilityConverter}}">A view of the diary would go here...</TextBlock>
                <TextBlock Visibility="{Binding ElementName=obiTasks, Path=IsSelected, Converter={StaticResource booleanVisibilityConverter}}">A list of tasks would go here...</TextBlock>
            </StackPanel>

        </Grid>
    </DockPanel>

</Window>

Thanks in advance for any help or advice.

CA.

[Chris]

I've figured most of this out in the end...

The answer to the 2nd part I'm happy(ish) with.

I have re-factored the code so I have a generic 'New' command with a command parameter.
The command parameter is bound to the header of the selected item of the outlook bar.
The image source (of the default icon) is bound to the icon property of the selected item of the outlook bar.
All done in XAML (which was the goal) and pretty clean as it goes.

In the view model I can then open which ever new window I need to based on the command parameter.
It's slightly fragile as it's based on a string but it'll do for now.

As for the first part...

I've ended up with a 'Click' handler for each menu item in the drop down menu.
In the click handler I then set the radsplitbutton.IsOpen property to be false.
Not great, wish there was a better way to do this but at least it works.

[Tina Stancheva]

Hi Chris,

Your approach sounds good. However, if you decide to go with a more MVVM approach, you can have a look at this blog post and examine the attached sample, which illustrates how you can take advantage of the data binding support on the RadControls to implement your scenario.

I hope this info will help you.

All the best,
Tina Stancheva
the Telerik team

[David Totzke]

Thanks Tina, this helped me out a lot.

I did find that I had to bind the IsOpen property of the RadSplitButton to an IsOpen property of my ViewModel and then set it to false when the command executes to get the drop down to close.  You example works because the message box steals focus.  In my case there was nothing to change focus to it just stayed open.

[quote]Tina Stancheva said:Hi you can have a look at this blog post and examine the attached sample[/quote]

There doesn't seem to be a link to the blog post but the sample was more than enough to solve my problem.

Thanks!