SplitButton

Mar 18, 2012 at 6:27 PM

Does the SplitButton have a ItemsSource that can be boud to an ObservableCollection where the observable collection contains a list of objects where is object has an image and a value. The image is placed in the button content and the value is based when the button is clicked.

Thanks

Coordinator
Mar 19, 2012 at 2:24 PM
Edited Mar 19, 2012 at 2:24 PM

The SplitButton doesn't have an ItemsSource property.  However, it has a DropDownContent property that you could use to customize the SplitButton.  For example, you may set it to an instance of a ListBox and binds the SplitButton's Content property to that ListBox's SelectedItem property.

Here is a short example of what the xaml may look like:

<toolkit:SplitButton Content="{Binding SelectedItem, ElementName=_itemsList}">
  <toolkit:SplitButton.DropDownContent>
    <ListBox x:Name="_itemsList"
             ItemsSource={Binding to your ObservableCollection} />
  </toolkit:SplitButton.DropDownContent>
</toolkit:SplitButton>

 

Since the Content of the SplitButton will be one of your custom object, you will have to set the ContentTemplate of the SplitButton to make it display the "Image".  On the SplitButton's click, you will be able to retrieve your custom object value through the Content property.

 

If you use a ListBox in the SplitButton.DropDownContent property has shown above, you will probably have to set an ItemTemplate on it to make it display your ObservableCollection correctly.

Mar 20, 2012 at 4:41 AM

Thank you

Mar 24, 2012 at 2:55 AM
Edited Mar 24, 2012 at 2:57 AM

I have an additional question related to the SplitButton. I have most of the functionality that I require. The one problem I am having is that the content stays open until I mouse select the dropdown area of the button. How do I get the content to close once an item is selected? The following is my xaml

        <extToolkit:SplitButton Width="40"
                                Height="25"
                                Margin="6,0,6,0"
                                Command="{Binding Path=SelectedMaskCommand}"
                                IsOpen="False"
                                Content="{Binding SelectedItem, ElementName=_itemsList}">
            <extToolkit:SplitButton.ContentTemplate>
                <DataTemplate>
                    <Rectangle Width="20"
                               Height="20">
                        <Rectangle.Fill>
                            <SolidColorBrush Color="{Binding ElementColor}" />
                        </Rectangle.Fill>
                    </Rectangle>
                </DataTemplate>
            </extToolkit:SplitButton.ContentTemplate>
            <extToolkit:SplitButton.DropDownContent>
                <ListBox x:Name="_itemsList"
                         ItemsSource="{Binding ApertureElements}"
                         SelectedItem="{Binding Path=SelectedElement}"
                         Background="LightGray">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <Rectangle Width="20"
                                           Height="20">
                                    <Rectangle.Fill>
                                        <SolidColorBrush Color="{Binding ElementColor}" />
                                    </Rectangle.Fill>
                                </Rectangle>
                                <Label Content="{Binding Label}" />
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </extToolkit:SplitButton.DropDownContent>
        </extToolkit:SplitButton>

Thanks

Coordinator
Mar 26, 2012 at 1:10 PM

When the "popup" is displayed, the SplitButton.IsOpen property is set to true.  If you want to hide it, you may set the SplitButton.IsOpen property to false.

 

Since you want this to happen when the selected item is changed, you should try to hide the popup on the ListBox.SelectionChanged event or when you detect a change in your "SelectedElement" property.

Mar 27, 2012 at 2:17 AM

Nebuleux,

That did it. Thanks for your help

jfraschilla