This is a migrated thread and some comments may be shown as answers.

RadRibbonGallery MVVM

0 Answers 27 Views
RibbonView and RibbonWindow
This is a migrated thread and some comments may be shown as answers.
mo2011ti
Top achievements
Rank 1
mo2011ti asked on 16 Aug 2018, 03:49 AM

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,

 

 

 

 

 

 

 

 

No answers yet. Maybe you can help?

Tags
RibbonView and RibbonWindow
Asked by
mo2011ti
Top achievements
Rank 1
Share this question
or