Using WPF 22.2 and .NET 4.8.
I am trying to set up a GalleryTool using MVVM and it's working so far except the text alignment is always centered instead of left justified. I'm setting the GalleryItemSettings but the text alignment settings are not being respected.
I'm using Brian Lagunas' approach to binding the items (and groups):
public class GalleryToolAttachedProperties { #region Items Property public static readonly DependencyProperty ItemsProperty = DependencyProperty.RegisterAttached("Items", typeof(IEnumerable<GalleryItem>), typeof(GalleryToolAttachedProperties), new UIPropertyMetadata(null, new PropertyChangedCallback(OnItemsPropertyChanged))); public static IEnumerable<GalleryItem> GetItems(DependencyObject obj) { return (IEnumerable<GalleryItem>) obj.GetValue(ItemsProperty); } public static void SetItems(DependencyObject obj, IEnumerable<GalleryItem> value) { obj.SetValue(ItemsProperty, value); } private static void OnItemsPropertyChanged(DependencyObject obj, DependencyPropertyChangedEventArgs e) { GalleryTool tool = obj as GalleryTool ?? throw new ArgumentException("Items can only be set on a GalleryTool."); if (e.NewValue is IEnumerable<GalleryItem> items) { tool.Items.AddRange(items); } } #endregion #region Groups Property public static readonly DependencyProperty GroupsProperty = DependencyProperty.RegisterAttached("Groups", typeof(IEnumerable<GalleryItemGroup>), typeof(GalleryToolAttachedProperties), new UIPropertyMetadata(null, new PropertyChangedCallback(OnGroupsPropertyChanged))); public static IEnumerable<GalleryItemGroup> GetGroups(DependencyObject obj) { return (IEnumerable<GalleryItemGroup>) obj.GetValue(GroupsProperty); } public static void SetGroups(DependencyObject obj, IEnumerable<GalleryItemGroup> value) { obj.SetValue(GroupsProperty, value); } private static void OnGroupsPropertyChanged(DependencyObject obj, DependencyPropertyChangedEventArgs e) { GalleryTool tool = obj as GalleryTool ?? throw new ArgumentException("Groups can only be set on a GalleryTool."); if (e.NewValue is IEnumerable<GalleryItemGroup> groups) { foreach (GalleryItemGroup group in groups) { tool.Groups.Add(group); } } } #endregion }
<igRibbon:MenuTool x:Name="_addRunMenuTool" Margin="10,0,0,0" Caption="Add" ToolTip="Adds an analysis run" ShouldDisplayGalleryPreview="False" ButtonType="DropDown" LargeImage="{StaticResource AddIcon}" SmallImage="{StaticResource AddIcon}" igRibbon:RibbonGroup.MaximumSize="ImageAndTextLarge" IsEnabled="{Binding SelectedAnalysisRun.IsEditingLabel, Converter={StaticResource InverseBooleanConverter}}"> <igRibbon:GalleryTool ssiInfragistics:GalleryToolAttachedProperties.Items="{Binding NewAnalysisRunOptions}" ssiInfragistics:GalleryToolAttachedProperties.Groups="{Binding NewAnalysisRunGroups}"> <igRibbon:GalleryTool.ItemSettings> <igRibbon:GalleryItemSettings TextDisplayMode="Always" HorizontalTextAlignment="Left" VerticalTextAlignment="Center" TextPlacement="LeftOfImage" SelectionDisplayMode="HighlightEntireItem" /> </igRibbon:GalleryTool.ItemSettings> <i:Interaction.Triggers> <i:EventTrigger EventName="ItemSelected"> <prism:InvokeCommandAction Command="{Binding ElementName=_addRunMenuTool, Path=DataContext.NewAnalysisRunCommand}" /> </i:EventTrigger> </i:Interaction.Triggers> </igRibbon:GalleryTool> </igRibbon:MenuTool>
private ObservableCollection<GalleryItem> _newAnalysisRunOptions; public ObservableCollection<GalleryItem> NewAnalysisRunOptions { get => _newAnalysisRunOptions; private set => SetProperty(ref _newAnalysisRunOptions, value); } private ObservableCollection<GalleryItemGroup> _newAnalysisRunGroups; public ObservableCollection<GalleryItemGroup> NewAnalysisRunGroups { get => _newAnalysisRunGroups; private set => SetProperty(ref _newAnalysisRunGroups, value); }
The EventTrigger is also not working, so if you have any idea on what's going on with either issue I'd really appreciate it.
That worked! Here is the final code that is working well. I changed the ItemBehavior to Button and used ItemClicked because I don't want the state to be saved.
<igRibbon:MenuTool x:Name="_addRunMenuTool" Margin="10,0,0,0" Caption="Add" ToolTip="Adds an analysis run" ShouldDisplayGalleryPreview="False" ButtonType="DropDown" LargeImage="{StaticResource AddIcon}" SmallImage="{StaticResource AddIcon}" igRibbon:RibbonGroup.MaximumSize="ImageAndTextLarge" IsEnabled="{Binding SelectedAnalysisRun.IsEditingLabel, Converter={StaticResource InverseBooleanConverter}}"> <igRibbon:GalleryTool ssiInfragistics:GalleryToolAttachedProperties.Items="{Binding NewAnalysisRunOptions}" ssiInfragistics:GalleryToolAttachedProperties.Groups="{Binding NewAnalysisRunGroups}" ItemBehavior="Button"> <igRibbon:GalleryTool.ItemSettings> <igRibbon:GalleryItemSettings TextDisplayMode="Always" HorizontalTextAlignment="Left" TextPlacement="LeftOfImage" SelectionDisplayMode="HighlightEntireItem"> <igRibbon:GalleryItemSettings.GalleryItemPresenterStyle> <Style TargetType="{x:Type igRibbon:GalleryItemPresenter}" BasedOn="{x:Static igThemes:RibbonOffice2013.GalleryItemPresenter}"> <Setter Property="HorizontalAlignment" Value="Left" /> <Setter Property="Margin" Value="5,2" /> </Style> </igRibbon:GalleryItemSettings.GalleryItemPresenterStyle> </igRibbon:GalleryItemSettings> </igRibbon:GalleryTool.ItemSettings> <i:Interaction.Triggers> <i:EventTrigger EventName="ItemClicked"> <prism:InvokeCommandAction Command="{Binding ElementName=_addRunMenuTool, Path=DataContext.NewAnalysisRunCommand}" /> </i:EventTrigger> </i:Interaction.Triggers> </igRibbon:GalleryTool> </igRibbon:MenuTool>
Hello Walter,
Thank you for confirming the behavior you are seeing.
I have reproduced this, and it appears to be the actual alignment of the item and not so much the text that is causing this behavior when there is no image present.
My best recommendation to change this is to assign the following Style to the GalleryItemPresenterStyle property of the GalleryItemSettings that you have applied:
<Style TargetType="{x:Type igRibbon:GalleryItemPresenter}" BasedOn="{x:Static igThemes:RibbonOffice2013.GalleryItemPresenter}"> <Setter Property="HorizontalAlignment" Value="Left" /> </Style>
Note that “igThemes” is pointed at:
xmlns:igThemes="">infragistics.com/Themes"
Please let me know if you have any other questions or concerns on this matter.
Thanks for the quick response. When I change the TextPlacement="AboveImage", the text still appears to be centered.
What I've been trying to accomplish is to have a menu with groups. I know I could just do a menu with submenus, but I wanted to see if this would work. I'm open to suggestion.
As for the InvokeCommandAction, setting the ItemBehavior="StateButton" worked.
I have been investigating into the behavior you are seeing, and I have some information for you on this matter.
Regarding the TextAlignment settings, with the GalleryTool, this is dependent on the TextPlacement relative to the image for the GalleryItem. The HorizontalTextAlignment will be respected when the TextPlacement is Above or Below the image. The VerticalTextAlignment is respected when the TextPlacement is to the Left or Right of the image. This is because the TextPlacement already sets the alignment for one of them depending on the chosen value (e.g. BelowImage = VerticalTextAlignment=”Bottom”).
Regarding the InvokeCommandAction, you need to set the ItemBehavior property to “StateButton” on the GalleryTool for this to work, otherwise you are never really “selecting” the item.