RibbonGallery items Command Click

Question

Using WPF MVVM'ish style. Trying to create a RibbonGallery with items that are clickable for some reason i cannot get the items to launch my delegate command

XAML CODE:

<RibbonMenuButton LargeImageSource="Images/DeleteUser1.png" Label="Delete">
                    <RibbonGallery>
                        <RibbonGalleryCategory ItemsSource="{Binding AvailibleUsers}" Header="User List">
                            <RibbonGalleryCategory.ItemTemplate>
                                <DataTemplate>
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition Width="*" />
                                        </Grid.ColumnDefinitions>
                                        <Image Source="Images/DeleteUser1.png" Width="25"/>
                                        <ContentPresenter Content="{Binding}" Grid.Column="1">
                                            <ContentPresenter.InputBindings>
                                                <MouseBinding MouseAction="LeftClick" Command="{Binding CommandDeleteAllPermissions}"/>
                                            </ContentPresenter.InputBindings>
                                        </ContentPresenter>
                                    </Grid>
                                </DataTemplate>
                            </RibbonGalleryCategory.ItemTemplate>
                        </RibbonGalleryCategory>
                    </RibbonGallery>
                </RibbonMenuButton>

The datacontext has been set to a view model. ViewModel:

    public DelegateCommand CommandDeleteAllPermissions { get { return new DelegateCommand(Delegated_DeleteAllPermissions); } }

    private void Delegated_DeleteAllPermissions(object obj)
    {
          \\todo:stuff
    }

i have tested this command using a standard button and it triggers, but using the specific XAML code i cannot get clickable items in my RibbonGallery control.

Any Ideas?

Answer 1

Galleries are some sort of categorized lists, whose items can be checked. They are suitable, when you need an options menu, where user should check/uncheck items:

This is the XAML for data-bound gallery and sample view model:

            <RibbonMenuButton Label="FooGallery">
                <RibbonGallery>
                    <RibbonGalleryCategory ItemsSource="{Binding GalleryItems}">
                        <RibbonGalleryCategory.ItemContainerStyle>
                            <Style TargetType="{x:Type RibbonGalleryItem}">
                                <Setter Property="Content" Value="{Binding Content}"/>
                                <Setter Property="IsSelected" Value="{Binding IsSelected}"/>
                            </Style>
                        </RibbonGalleryCategory.ItemContainerStyle>
                    </RibbonGalleryCategory>
                </RibbonGallery>
            </RibbonMenuButton>

Here GalleryItems is a collection of these view models:

public class GalleryItem
{
    public object Content { get; set; }

    public bool IsSelected 
    {
        get { return isSelected; }
        set
        {
            if (isSelected != value)
            {
                isSelected = value;

                // TODO: do something here, when item becomes selected/checked; 
                // handle property changing instead of commands

            }
        }
    }

    private bool isSelected;
}

If you need dropdown menu to execute some commands, then you should use regular RibbonMenuItems:

This is how it should be done, when menu items are statically known:

            <RibbonMenuButton Label="Foo">
                <RibbonMenuItem Header="Bar1" Command="{Binding Bar1Command}"/>
                <RibbonMenuItem Header="Bar2" Command="{Binding Bar2Command}"/>
                <RibbonMenuItem Header="Bar3" Command="{Binding Bar3Command}"/>
            </RibbonMenuButton>

When using ItemsSource for menu items, XAML will look like this:

            <RibbonMenuButton Label="Foo" ItemsSource="{Binding MenuItems}">
                <RibbonMenuButton.ItemContainerStyle>
                    <Style TargetType="{x:Type RibbonMenuItem}">
                        <Setter Property="Header" Value="{Binding Header}"/>
                        <Setter Property="Command" Value="{Binding Command}"/>
                    </Style>
                </RibbonMenuButton.ItemContainerStyle>
            </RibbonMenuButton>

where MenuItems is a collection of these view models:

public class MenuItemVm
{
    public object Header { get; set; }
    public ICommand Command { get; set; }
}

Answer 2

See i wanted to bind the items source. as the item source changes frequently. Doing it this way i would have to modify my collection of strings into a custom object and have each object hold an ICommand as well or other objects. this would also require getting the ViewModel programmer to change his stuff.

As i am only to change the view.

insted i just did this

              <RibbonMenuButton LargeImageSource="Images/DeleteUser1.png" Label="Delete" ItemsSource="{Binding AvailibleUsers}">
                    <RibbonGallery Command="{Binding CommandDeleteAllPermissions}">
                        <RibbonGalleryCategory ItemsSource="{Binding AvailibleUsers}" Header="User List">
                            <RibbonGalleryCategory.ItemTemplate>
                                <DataTemplate>
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition Width="*" />
                                        </Grid.ColumnDefinitions>
                                        <Image Source="Images/DeleteUser1.png" Width="25"/>
                                        <ContentPresenter Content="{Binding}" Grid.Column="1"/>
                                    </Grid>
                                </DataTemplate>
                            </RibbonGalleryCategory.ItemTemplate>
                        </RibbonGalleryCategory>
                    </RibbonGallery>
                </RibbonMenuButton>

i just needed to add the command to here

<RibbonGallery Command="{Binding CommandDeleteAllPermissions}">

and now all the items in the gallery trigger the command when clicked.

Thanks for everyones help tho