Hello,
I'm trying to add RadRibbonGallery to MVVM examplefrom the Example Demo:
\Telerik_UI_for_WPF_2018_1_220_Demos\Examples\RibbonView\MVVM
so i already add a template selector and add the elements in view model
the RadRibbonGallery displayed
BUT, the images inside each item has border when mouse is hover, and on click the item NOT selected,
only if i click on the the BORDER of each item inside the Galley, then the item selected
here is my progress until now:
the template selector:
<mvvm:ButtonsTemplateSelector x:Key="groupsSelector" Button="{StaticResource ButtonTemplate}" SplitButton="{StaticResource SplitButtonTemplate}" ButtonsGroup="{StaticResource ButtonsGroup}" SmallButtonGroup="{StaticResource SmallButtonGroup}"Gallery="{StaticResource RibbonViewElementGalleryTemplate}" />
<DataTemplate x:Key="RibbonViewElementGalleryTemplate"> <telerik:RadRibbonGallery ItemsSource="{Binding Items}" SelectedIndex="{Binding SelectedIndex, Mode=TwoWay}" Width="240" MaxWidth="240" ViewportWidth="220" ViewportHeight="48" ItemWidth="64" ItemHeight="48" PopupViewportWidth="300"> <telerik:RadRibbonGallery.ItemsPanel> <ItemsPanelTemplate> <telerikRibbonViewPrimitives:RibbonGalleryPanel /> </ItemsPanelTemplate> </telerik:RadRibbonGallery.ItemsPanel> <telerik:EventToCommandBehavior.EventBindings> <telerik:EventBinding Command="{Binding MouseLeftButtonUpCommand}" EventName="MouseLeftButtonUp" RaiseOnHandledEvents="True" PassEventArgsToCommand="True" /> </telerik:EventToCommandBehavior.EventBindings> <telerik:RadRibbonGallery.ItemTemplate> <DataTemplate> <telerik:RadGalleryItem BorderBrush="Red" BorderThickness="1" Margin="1" Padding="0" Image="{Binding Image}" IsHeader="{Binding IsHeader}" Content="{Binding TipTitle, Mode=TwoWay}" Width="64" Height="48" telerik:ScreenTip.Description="{Binding TipDescription}" telerik:ScreenTip.Title="{Binding TipTitle}"> <telerik:RadGalleryItem.Template> <ControlTemplate TargetType="telerikRibbonView:RadGalleryItem"> <Grid> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="KeyboardNavigationStates"> <VisualState x:Name="KeyboardUnfocused" /> <VisualState x:Name="KeyboardFocused"> <Storyboard> <DoubleAnimation Storyboard.TargetName="KeyboardNavigationVisual" Storyboard.TargetProperty="Opacity" To="1" Duration="0" /> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <!--<Border x:Name="Header_Background" Opacity="0" Background="{StaticResource MainBrush}" />--> <Border x:Name="BorderVisual" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" > <Grid> <ContentControl x:Name="contentControl" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" IsTabStop="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Foreground="{TemplateBinding Foreground}" ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" ContentStringFormat="{TemplateBinding ContentStringFormat}" /> <Image x:Name="Image" Stretch="Fill" Source="{TemplateBinding Image}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /> </Grid> </Border> <!--<Border x:Name="MouseOverSelectedBorder" Opacity="0" BorderThickness="1" BorderBrush="{StaticResource MarkerBrush}"/> <Border x:Name="KeyboardNavigationVisual" Opacity="0" CornerRadius="{StaticResource CornerRadius}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{StaticResource MouseOverBrush}" />--> </Grid> <ControlTemplate.Triggers> <!--<Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="BorderVisual" Property="BorderBrush" Value="{StaticResource MouseOverBrush}" /> </Trigger> <Trigger Property="IsSelected" Value="True"> <Setter TargetName="BorderVisual" Property="BorderBrush" Value="{StaticResource PressedBrush}" /> </Trigger>--> <MultiTrigger> <MultiTrigger.Conditions> <Condition Property="IsMouseOver" Value="True" /> <Condition Property="IsSelected" Value="True" /> </MultiTrigger.Conditions> <!--<Setter TargetName="MouseOverSelectedBorder" Property="Opacity" Value="1" />--> </MultiTrigger> <Trigger Property="IsHeader" Value="True"> <Setter TargetName="BorderVisual" Property="Margin" Value="5 0 0 0" /> <!--<Setter TargetName="Header_Background" Property="Opacity" Value="1" />--> <Setter TargetName="contentControl" Property="HorizontalAlignment" Value="Left" /> <Setter TargetName="BorderVisual" Property="BorderThickness" Value="0" /> </Trigger> <!--<Trigger Property="IsEnabled" Value="False"> <Setter TargetName="contentControl" Property="Opacity" Value="{StaticResource DisabledOpacity}" /> <Setter TargetName="Image" Property="Opacity" Value="{StaticResource DisabledOpacity}" /> </Trigger>--> </ControlTemplate.Triggers> </ControlTemplate> </telerik:RadGalleryItem.Template> </telerik:RadGalleryItem> </DataTemplate> </telerik:RadRibbonGallery.ItemTemplate> </telerik:RadRibbonGallery></DataTemplate>
public class RibbonViewElementGallery : RibbonViewElementBase{ private string title; public string Title { get { return title; } set { if (this.title != value) { this.title = value; this.OnPropertyChanged("Title"); } } } private int selectedIndex; public int SelectedIndex { get { return selectedIndex; } set { if (this.selectedIndex != value) { this.selectedIndex = value; this.OnPropertyChanged("SelectedIndex"); Log.Logger.Instance.Log("RibbonViewElementGallery SelectedIndex = " + this.selectedIndex.ToString(), Prism.Logging.Category.Debug, Prism.Logging.Priority.High); } } } private int width = 300; public int Width { get { return width; } set { if (this.width != value) { this.width = value; this.OnPropertyChanged("Width"); } } } private int popupViewportWidth = 400; public int PopupViewportWidth { get { return popupViewportWidth; } set { if (this.popupViewportWidth != value) { this.popupViewportWidth = value; this.OnPropertyChanged("PopupViewportWidth"); } } } private ObservableCollection<RibbonViewElementGalleryItem> items; public ObservableCollection<RibbonViewElementGalleryItem> Items { get { return items; } set { if (this.items != value) { this.items = value; this.OnPropertyChanged("Items"); } } } // private ObservableCollection<RadMenuItem> popupMenuItems; public ObservableCollection<RadMenuItem> PopupMenuItems { get { return popupMenuItems; } set { if (this.popupMenuItems != value) { this.popupMenuItems = value; this.OnPropertyChanged("PopupMenuItems"); } } } public ICommand MouseLeftButtonUpCommand { get; private set; } private void MouseLeftButtonUpCommand_Execute(object arg) { var e = arg as System.Windows.Input.MouseButtonEventArgs; Logger.Instance.Log(String.Format("MouseButtonEventArgs Source : {0}", e.Source.ToString()), Prism.Logging.Category.Debug, Prism.Logging.Priority.High); if (e.Source != null && e.Source is RadRibbonGallery) { } } private bool MouseLeftButtonUpCommand_CanExecute(object arg) { return true; } public RibbonViewElementGallery() { string ImagePath = "/k1.Windows.Core.Resources;component/RibbonView/{0}"; this.Title = "Gallery Demo"; this.Items = new ObservableCollection<RibbonViewElementGalleryItem>(); this.Items.Add(new RibbonViewElementGalleryItem() { Image = string.Format(ImagePath, "new.png"), IsHeader = true, IsSelected = false, TipDescription = "Header of items", TipTitle = "Header1" }); for (int i = 0; i < 7; i++) { this.Items.Add(new RibbonViewElementGalleryItem(string.Format(ImagePath, "ProjectsHistory.png"), false, string.Format("Tip {0} Title", 10 * i + 1))); this.Items.Add(new RibbonViewElementGalleryItem(string.Format(ImagePath, "SampleProjects.png"), false, string.Format("Tip {0} Title", 10 * i + 2))); this.Items.Add(new RibbonViewElementGalleryItem(string.Format(ImagePath, "open.png"), false, string.Format("Tip {0} Title", 10 * i + 3))); } this.PopupMenuItems = new ObservableCollection<RadMenuItem>(); for (int i = 0; i < 5; i++) { this.PopupMenuItems.Add(new RadMenuItem() { Header = String.Format("Menu item {0}", i.ToString()) }); } this.MouseLeftButtonUpCommand = new DelegateCommand<object>(MouseLeftButtonUpCommand_Execute, MouseLeftButtonUpCommand_CanExecute); }}public class RibbonViewElementGalleryItem{ private string image; public string Image { get { return image; } set { image = value; } } private bool isSelected; public bool IsSelected { get { return isSelected; } set { isSelected = value; } } private bool isHeader = false; public bool IsHeader { get { return isHeader; } set { isHeader = value; } } private string tipDescription = "tip Description"; public string TipDescription { get { return tipDescription; } set { tipDescription = value; } } private string tipTitle = "tip Title"; public string TipTitle { get { return tipTitle; } set { tipTitle = value; } } public RibbonViewElementGalleryItem() { } public RibbonViewElementGalleryItem(string image, bool isSelected, string tipTitle) { this.Image = image; this.TipTitle = tipTitle; this.IsSelected = isSelected; } public override string ToString() { return string.Format("[GalleryItem : image = {0}]", this.image); }}
also the items with IsHeader = True
displayed inside the gallery as Item, when the Gallery is Open, they are not displayed as Headers
see images.
Can you help please with this issue or provide a link for help about this or Example of RadRibbonGallery MVVM ?
Thanks,