Wiring the RadSplitButton (Dropdown Contents) to ICommands

4 posts, 0 answers
  1. Chris
    Chris avatar
    7 posts
    Member since:
    Oct 2010

    Posted 18 Feb 2011 Link to this post

    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.
  2. Chris
    Chris avatar
    7 posts
    Member since:
    Oct 2010

    Posted 21 Feb 2011 Link to this post

    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.

  3. UI for WPF is Visual Studio 2017 Ready
  4. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 23 Feb 2011 Link to this post

    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!
  5. David Totzke
    David Totzke avatar
    13 posts
    Member since:
    Jul 2006

    Posted 12 May in reply to Tina Stancheva Link to this post

    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.

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

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

    Thanks!

Back to Top