This is a migrated thread and some comments may be shown as answers.

Wiring the RadSplitButton (Dropdown Contents) to ICommands

3 Answers 259 Views
Buttons
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 2
Chris asked on 18 Feb 2011, 01:06 PM
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"
        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.

3 Answers, 1 is accepted

Sort by
0
Chris
Top achievements
Rank 2
answered on 21 Feb 2011, 07:15 AM
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.

0
Tina Stancheva
Telerik team
answered on 23 Feb 2011, 03:12 PM
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
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
0
David Totzke
Top achievements
Rank 2
answered on 12 May 2016, 10:20 PM

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!

Tags
Buttons
Asked by
Chris
Top achievements
Rank 2
Answers by
Chris
Top achievements
Rank 2
Tina Stancheva
Telerik team
David Totzke
Top achievements
Rank 2
Share this question
or