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