Splitbutton with menu items

May 13, 2011 at 9:49 AM

Hi

Does anyone know how to make the splitbutton display menu items below when clicking on the the dropdown button. Similar to this split button: http://blogs.msdn.com/b/delay/archive/2010/07/06/banana-splitbutton-a-wpf-specific-fix-for-splitbutton-and-some-code-analysis-improvements-for-the-silverlight-version-too.aspx

 

Thanks

May 13, 2011 at 1:18 PM

Have you tried putting a menu in the SplitButton.DropDownContent?  Or you could use a list box and style it like a menu item.

May 13, 2011 at 1:35 PM

Hi

I guess I should tell you that I'm a WPF newbie. This is what I've found so far

        <extToolkit:SplitButton Margin="0,8,0,0" MinHeight="35" Content="Start">

            <extToolkit:SplitButton.DropDownContent>

                <Menu>

                    <Menu.ItemsPanel>

                        <ItemsPanelTemplate>

                            <VirtualizingStackPanel Orientation="Vertical"/>

                        </ItemsPanelTemplate>

                    </Menu.ItemsPanel>

                    <MenuItem Header="Start"/>

                    <MenuItem Header="Start med timeout"/>

                </Menu>

            </extToolkit:SplitButton.DropDownContent>

        </extToolkit:SplitButton>

 

It seems nice, the only problem is that the menu is shown as aligned to the left splitbutton. If the splitbutton is wider than the menus it seems a bit funny to click on the right and then the menu pops up to the left :-)

May 13, 2011 at 1:39 PM

This is how a split button functions.  You can control the width of the popup to make it the same as the split button if you like.

May 13, 2011 at 1:49 PM

I was trying something like this

<Menu Width="{Binding ElementName=btnStart, Path=ActualWidth}"> and also setting the name on the splitbutton in the previous code.

But the width is unchanged, can you see what I'm doing wrong?

May 13, 2011 at 1:57 PM

You're not going to be able to bind the width like that.  You could handle the window loaded event and set it accordingly:

 (btnStart.DropDownContent as FrameworkElement).Width = btnStart.ActualWidth;
May 13, 2011 at 2:00 PM

Oh, and you know that a menu item doesn't have to belong in a menu right?  You could simply do this:

<extToolkit:SplitButton.DropDownContent>
          <StackPanel>
              <MenuItem Header="Test" />
              <MenuItem Header="Test 2" />
              <MenuItem Header="Test 3" />
          </StackPanel>
</extToolkit:SplitButton.DropDownContent>