Problems syncing selected gallery item like the “Gallery Rows Sample”

Ribbon for WPF Forum

Posted 8 years ago by Eric P
Version: 16.1.0633
Avatar

I am trying to layout a Ribbon Gallery in a very similar way to the “Gallery Rows Sample” found in the Sample Browser. Here is the XAML I have so far.

<ribbon:Group Label="Notes">
  <ribbon:Group.Variants>
    <ribbon:GroupVariant Priority="20" Size= "Medium" />
    <ribbon:GroupVariant Priority="60" Size= "Small" />
    <ribbon:GroupVariant Priority="70" Size= "Collapsed" />
  </ribbon:Group.Variants>
  <ribbon:RibbonGallery ItemsSource="{Binding NoteTypes}" IsSelectionHighlightVisible="True" LargeVariantColumnCount="3" MediumVariantColumnCount="3" VariantBehavior="NoAutoSize">
    <ribbon:RibbonGallery.ItemTemplate>
      <DataTemplate>
        <StackPanel Orientation="Vertical" Width="75">
          <Image Margin="2" Source="{Binding ImageSource}" Stretch="None" HorizontalAlighment="Center" />
          <textBlock text="{Binding Label}" HorizontalAlighment="Center" />
        </StackPanel>
      </DataTemplate>
    </ribbon:RibbonGallery.ItemTemplate>
    <ribbon:RibbonGallery.PopupContent>
      <StackPanel>
        <ribbon:PopupGallery InitialColumnCount="4" IsSelectionHighlightVisible="True"
                             ItemTempalte="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ribbon:RibbonGallery}}, Path=ItemTemplate }"
                             ItemSource="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ribbon:RibbonGallery}}, Path=ItemSource }" />
      <StackPanel>
    </ribbon:RibbonGallery.PopupContent>
  </ribbon:RibbonGallery>
</ribbon:Group>

 In my DataContext (ViewModel) I have the NoteTypes defiend like the following

public DeferrableObservableCollection<NoteType> NoteTypes { get; private set; }

 Here is the NoteType class.

public class NoteType {

  public string Label { get; set; }
  
  public ImageSource ImageSource { get; set; }

}

I have a custom async Task that reaches out to our REST API to get a collection of NoteType objects.

I have everthing displaying correctly in the Ribbon Gallery but I can not get the selected item to sync up like it does in the sample. In the sample if I click the down arrow and open the PopupContent/PopupGallery and scroll down and select an item in the list the PopupContent will collapse/close and the item I picked in list will be shown in the RibbonGallery. I do not understand how to get the RibbonGallery to scroll to the item that is picked like the sample does.

I don't see anything in the sample, that I have not added to my code, that would perform this selected item scrolling effect. What am I missing?

Thanks,

   -eric

Comments (5)

Posted 8 years ago by Eric P
Avatar

BTW I am using Actipro version 16.1.632.0.

Posted 8 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar

Hi Eric,

I believe it's using the ApplicationCommands.ApplyForeground command in the sample to accomplish this.  When there is a command like in that sample and both the ribbon and popup gallery use it, then the selections will be kept in sync.


Actipro Software Support

Posted 8 years ago by Eric P
Avatar

Thanks for the reply. So I added a command to both the RibbonGallery and the PopupGallery and I set IsPreviewEnabled="False" for both becaus it does not apply to this situation. I am uisng the Prism DelegateCommands which look like the following.

public DelegateCommand<ObjectValueCommandParameter> TestCommand { get; private set; }

 In the constructor of my ViewModel I initialize the command

TestCommand = new DelegateCommand<ObjectValueCommandParameter>(DoTest);

 The CanExecute Action.

private void DoTest(ObjectValueCommandParameter obj){

} 

The Action of the ObjectValueCommandParameter is always Commit because the preview is disabled and I can access the NoteItem that was clicked but I am not sure what to do next to get the RibbonGallery and the PopuGallery to stay in sync and I do not see any selected item in the galleries.

Well the sample does not show the item in the gallery as selected, like a selected item in a listbox, so is that even possible with the Ribbon Gallery? I am trying to achieve something similar to the Gallery in the Drawing Group under the Home Tab on the PowerPoint 3013 Ribbon.

I would like the user to be able to do the following.

  1. Click the drop down and pick an item
  2. The drop down closes
  3. The selected item is shown like a selected item in a list box
  4. The selected item scrolls to the top (like the sample)
  5. The Command executes and I perform an operation
  6. Once the operation is completed (or canceled) the selected item is unselected.

If I want to bind the selected item in a ListBoxItem to a Notifiable Property, like IsSelected, I first need to have the IsSelected property on my object (obviously) and then I need to create a Style for a ListBoxItem to bind its IsSeleced to my objects IsSelected.

<Style TargetType="{x:Type ListBoxItem}" BasedOn="{StaticResource {x:Static themes:SharedResourceKeys.ListBoxItemStyleKey}}">
  <Setter Property="IsSelected" Value="{Binding IsSelected}" />
</Style>

 Do I have to do something similar to get the RibbonGallery and PopuGallery to show its selected item and keep it in sync?

Thanks,

   -eric

Answer - Posted 8 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar

Hi Eric,

In our sample, the selected item indirectly gets updated by the code in RichTextBoxExtended.OnApplyForegroundCanExecute where it's setting UpdatedValue and is marking it Handled.  Since both the in-ribbon and popup galleries use that command, both stay in sync.

That being said, the gallery's SelectedItem property is public get/set.  You might be able to just bind that to something common and set it as needed.


Actipro Software Support

Posted 8 years ago by Eric P
Avatar

So binding the SelectedItem of the RibbonGallery and the PopuGallery to the same property in my ViewModel did the trick.

The latest build of this product (v24.1.1) was released 1 month ago, which was after the last post in this thread.

Add Comment

Please log in to a validated account to post comments.