Programmatically select / deselect a RibbonGalleryItem

[Dov]

Hi,

In my Ribbon application I have several RibbonBar's in the same RibbonTab.

Each RibbonBar is a RibbonGallery that contain several RibbonGalleryItem's.

I would like to allow only one RibbonGalleryItem to be selected - for the same RibbonTab, so selection of one RibbonGalleryItem will deselect any other RibbonGalleryItem.

How can I achieve that?

 Regards,

Dov.

[Priyanga Balasubramaniam]

Hi Dov,

Thank you for using Syncfusion products.

We have checked your query, your requirement is to maintain more than one RibbonGallery and select single item at a time. To maintain more RibbonGallery we suggest you to use RibbonGalleryGroups in single RibbonGallery.

We have prepared simple sample using RibbonGalleryGroups with RibbonGallery. Please download the sample from the below location.

Sample: RibbonSample
For more details about RibbonGallery please refer the below link.

Link: https://help.syncfusion.com/wpf/ribbon/ribbongallery  

Please revert us if the above sample, doesn’t meet your requirement and provide more details about your scenario.

Regards,
Priyanga B

[Dov]

Thank you for your help,

The solution isn't good for me, I have to use different RibbonBar's (please see attached pic no. 1).

My problem is that when I select from one RibbonBar and then from another the first selection is still visible (please see attached pic no. 2).

I would like to remove the background from RibbonBar "STANDARD".

I think I need to change the "GallerySelectedItemIndex" value to -1 I just don't know how to.

Hope that I'm clear.

PS
How can I set the RibbonGalleryItem content to be in the center?
HorizontalAlignment="Center" VerticalAlignment="Center" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
Don't seem to do the trick.


Regards,

Dov.

Attachment: Desktop_61dd8f3.rar

[Keerthana Jegannathan]

Hi Dov, 

  

Query 1: I think I need to change the "GallerySelectedItemIndex" value to -1 I just don't know how to. 

 

Thanks for your update 

 

We have prepared work around sample in which we have unselected the GalleryItem of other RibbonBars in “SelectedItemChanged” event and it can be downloaded from the below location. 

Sample: RibbonGalleryItemSample 

 

Query 2: How can I set the RibbonGalleryItem content to be in the center?  

 

We request you to use “HorizontalAlignment” and “VerticalAlignment” property of the GalleryItem to align the content to be in center position of the RibbonBar. Please refer the above sample in which we have aligned the content of GalleryItem in center position. 

 

Regards, 

Keerthana J 

[Dov]

Thank you for your response and sorry for the delay.

Q1:

Is it possible to change the solution to MVVM based? I've tried to bind the "SelectedItemChanged" in the ViewModel but I keep on getting an exception in the XAML.


Q2:

The Selection area become smaller when I set the “HorizontalAlignment” and “VerticalAlignment” property to center, is it possible to set those properties to center but not lose the big selection area?


In the image the selection area is marked in blue.



Regards,

Dov.

[Keerthana Jegannathan]

Hi Dov, 

 

Query 1: Is it possible to change the solution to MVVM based? I've tried to bind the "SelectedItemChanged" in the ViewModel but I keep on getting an exception in the XAML. 

 

We have prepared workaround sample in MVMM pattern to unselect the GalleryItem of other RibbonBars while specific GalleryItem has been checked and it can be downloaded from the below location. 

 

Sample: RibbonGalleryMVMMSample 

 

Query 2:  The Selection area become smaller when I set the “HorizontalAlignment” and “VerticalAlignment” property to center, is it possible to set those properties to center but not lose the big  

selection area? 

 

We request you to override the style of the “RibbonGalleryItem” in Windows.Resources and change the “Margin” property of the ContentPresenter to maintain the selection area while HorizontalAlignment and VerticalAlignment is set as “Center” for RibbonGalleryItem . We have maintain the same selection area when HorizontalAlignment and VerticalAlignment is set as center is above sample. 

 

Regards, 

Keerthana J 

[Dov]

Hi,

I'm getting an InvalidCastException when I try to implement your code. in line: foreach( RibbonGallery ribbongallery in ribbobbar.Items )

Please see the sample code.
 
Any help would be highly appreciated.

Regards,

Dov.


Attachment: RibbonDemoSample_da72ec9c.rar

[Keerthana Jegannathan]

Hi Dov,   

    

Thanks for your update.   

    

In our sample, we have taken items of the RibbonBar as RibbonGallery directly as we have used only RibbonGallery inside the RibbonBar. In your shared sample, you are using RibbonButton in one of the RibbonBar while trying to iterate through it, you are facing cast exception in your sample. Now, we have modified the sample in which we have iterated through all kind of items in the RibbonBar and checked for RibbonGallery. You can refer the modified sample from below link.   

    

Sample:  RibbonDemoSample   

    

Regards,   

Keerthana J   

[Dov]

Thank you very much.

It's working great.

Regards,

Dov.

[Keerthana Jegannathan]

Hi Dov, 

 

Thanks for your update. 

 

Please let us know if you need further assistance on this. 

 

Regards, 

Keerthana J 

[Dov]

Hi,


Is it possible to adjust the following code:

     foreach( RibbonBar RibbonBar in controlTab.Items )
            {
                foreach( var RibbonGallery in RibbonBar.Items )
                {
                    if( ( RibbonGallery is RibbonGallery ) && ( RibbonGallery as RibbonGallery ).SelectedItem != null && ( RibbonGallery as RibbonGallery ).SelectedItem is                            RibbonGalleryItem )
                    {
                        ( ( RibbonGallery as RibbonGallery ).SelectedItem as RibbonGalleryItem ).IsChecked = false;
                    }
                }
            }

 to work on syncfusion:ButtonAdv?


I have the following xaml

    <syncfusion:RibbonBar Name="RunModeBar" IsLauncherButtonVisible="False" >
        <StackPanel Orientation="Vertical"   >
            <syncfusion:ButtonAdv Name="AMode" SizeMode="Normal" SmallIcon="{x:Null}" Width="120"
                                      HorizontalContentAlignment="Center" HorizontalAlignment="Center" IsCheckable="True" Background="Transparent"
                                      IsChecked="{Binding Path=IsAChecked, Mode=TwoWay}" />
            <syncfusion:ButtonAdv Name="BMode" SizeMode="Normal" SmallIcon="{x:Null}" Width="120"
                                      HorizontalContentAlignment="Center" HorizontalAlignment="Center" IsCheckable="True" Background="Transparent" 
                                       IsChecked="{Binding Path=IsBChecked, Mode=TwoWay}" />
            <syncfusion:ButtonAdv Name="CMode" SizeMode="Normal" SmallIcon="{x:Null}" Width="120"
                                      HorizontalContentAlignment="Center" HorizontalAlignment="Center" IsCheckable="True" Background="Transparent" 
                                      IsChecked="{Binding Path=IsCChecked, Mode=TwoWay}" />
        </StackPanel>
    </syncfusion:RibbonBar>


Each ButtonAdv is checkable but I want only 1 to be pressed at any time.

Regards,

Dov.

[Keerthana Jegannathan]

Hi Dov,   

   

Thanks for your update.   

   

We suspect that your requirement is to uncheck the other ButtonAdv if one of it has been checked when “IsCheckable” property has been used. We have prepared workaround sample for this requirement in which we have unchecked the items in the click event of the ButtonAdv and it can be downloaded from the below location.   

   

Sample: RibbonSample   

   

Regards,   

Keerthana J   

[Dov]

Thank you for your fast reply.

It's working great, but I can't deselect a button by pressing on it.

For example if I selected AMode I can't deselect that button (so that all RunModeBar will be unchecked).

Regards,

Dov.

[Keerthana Jegannathan]

 

Hi Dov,   

    

We have modified our previously shared sample in which button Checked and UnChecked state is handled in its click event and the sample is available in the following link.   

 

Link: RibbonButtonSample 

 

Regards, 

Keerthana J   

[Dov]

Thank you for your fast reply.

It's working great.

Dov.

[Vinothini]

Hi Dov, 

  

We are glad that the solution works. Please let us know if you need any further assistance. 

  

Regards, 

Vinothini 

[Dov]

Hi,

I've added to the Edit Tab RibbonGallery:
SelectedItemChanged="_ribbonGallery_SelectedItemChanged" With the appropriate code behind.

After the application started I selected a RibbonGalleryItem from HomeTab then I switched to the EditTab and select another RibbonGalleryItem, when I switched back to the HomeTab the RibbonGalleryItem that I previously selected got deselected.

Any chance to keep each tab separated?
So that the deselecting would occur in the same tab only, without any effect in other tabs?

Regards,

Dov.

[Keerthana Jegannathan]

Hi Dov,   

   

Thanks for your update.   

   

We have modified your sample in which we have maintained the Boolean variable to store the state of RibbonGalleryItem and handled the checked and unchecked state with “ClearRibbonGalleryItems” function in click event of it and it can be downloaded from the below location.   

   

Sample: Modified_RibbonGallery   

   

Regards,   

Keerthana J