IgRibbon Toggle Button background style on IsChecked

130

Anushri Jain posted over 3 years ago

I want to keep Background of toggle button transparent on style trigger "Is checked = true".

I Want the button to stay flat even after the button is checked.

Top Replies

2640

Offline Bozhidara Pachilova posted over 3 years ago in reply to Anushri Jain +1 verified
Hello Anushri, Thank you for clarifying the control in question. When it comes to styling the XamRibbon’s tools, it does not suffice to...view reply »

Parents

2640

Offline Bozhidara Pachilova posted over 3 years ago

Hello Anushri,

Thank you for posting to Infragistics Community.

Before answering your question, I would like to ask if you could, please, clarify whether you are referring to the WinForms UltraToolbarsManager’s Ribbon or WPF XamRibbon?

I am asking this because there is no “ToggleButton” Tool type in the WinForms Ribbon. Please, refer to the available tool types here. The StateButton is the equivalent of a toggle button and provides just this functionality – two states, checked or not. On the other hand, the WPF Ribbon, does have a ToggleButton. My guess is that you are rather referring to it, as you are also mentioning a trigger, however, I am unsure since this is the Windows Forms forum and you do not mention the parent control you are using.

Looking forward to hearing from you.

Sincerely,

Bozhidara Pachilova
Associate Software Developer
Cancel
Reply

Cancel
130

Offline Anushri Jain posted over 3 years ago in reply to Bozhidara Pachilova

I am talking about WPF XamRibbon.

Yes I am talking about ToggleButton.

I want to change its style while the button is checked. It is giving some dark background which I am trying to set to white.

Following code I have written which is not setting the background to white.

Also If u can guide me how can i make it appear flat in checked state also.

<igRibbon:ToggleButtonTool.Style>
<Style TargetType="{x:Type igRibbon:ToggleButtonTool}">
<Setter Property="Template" Value="{StaticResource RibbonButtonToolTemplate}"/>
<Setter Property="LargeImage" Value="Assets/Images/huprofile-blue.png" />
<Setter Property="Foreground" Value="#B00020" />
<Setter Property="Background" Value="Transparent" />
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="LargeImage" Value="Assets/Images/huprofile-orange.png"/>
<Setter Property="Foreground" Value="OrangeRed" />
<Setter Property="Background" Value="White" />
</Trigger>
</Style.Triggers>
</Style>

</igRibbon:ToggleButtonTool.Style>
Cancel
Reply

Cancel

2640

Verified Answer

Offline Bozhidara Pachilova posted over 3 years ago in reply to Anushri Jain

Hello Anushri,

Thank you for clarifying the control in question.

When it comes to styling the XamRibbon’s tools, it does not suffice to simply set the Background property. In this forum thread, you could refer to Andrew Smith’s answer as to why this is so. To paraphrase, the button tools original templates are quite complicated, and their borders and backgrounds are rendered by the RibbonButtonChrome class. This class uses different brushes for different states, which also depend on the theme being used.

As you can see, the suggestion for modifying the background is to either retemplate the tool or add the mentioned brushes with the required colors. However, when it comes to the ToggleButton, after referencing the default styles, I determined that retemplating a button tool would not be a trivial task and the ToggleButton uses some different brushes, shared between controls.

So, if you want to have full control over a particular toggle button style, my suggestion is to simply include your own button into a RibbonGroup, for instance. As you may know, you can use other controls, apart from the special ribbon tools in the RibbonGroups as well. WPF does provide a native ToggleButton.

Additionally, below I am attaching a small sample with a XamRibbon where such a custom toggle button is included. Of course, you could define the template and all properties differently, depending on your requirements:

<ToggleButton Content="WPF ToggleButton" Height="20" >
                                    <ToggleButton.Style>
                                        <Style TargetType="{x:Type ToggleButton}">
                                        <Setter Property="BorderBrush"
                                                Value="Transparent" />
                                        <Setter Property="Foreground"
                                                Value="#B00020" />
                                        <Setter Property="Template">
                                            <Setter.Value>
                                                <ControlTemplate TargetType="{x:Type ToggleButton}">
                                                    <StackPanel Orientation="Horizontal"
                                                                VerticalAlignment="Center"
                                                                Background="Transparent" Height="20" >
                                                        <Image Source="rocket.png"
                                                               Width="16"
                                                               Height="16"
                                                               VerticalAlignment="Center" />
                                                        <TextBlock Text="WPF ToggleButton"
                                                                   Width="100"></TextBlock>
                                                    </StackPanel>
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                        <Style.Triggers>
                                            <Trigger Property="IsChecked"
                                                     Value="True">
                                                <Setter Property="Foreground"
                                                        Value="OrangeRed" />
                                            </Trigger>
                                        </Style.Triggers>
                                    </Style>
                                    </ToggleButton.Style>
                                </ToggleButton>

Apart from that, directly styling a button tool is considered to be a new product idea. You can suggest new product ideas for future versions (or vote for existing ones) at <https://es.infragistics.com/community/ideas>.

Let me know if you have any questions.

Sincerely,
Bozhidara Pachilova
Associate Software Developer

6371.XamRibbonToggleButton.zip

Reply

130

Offline Anushri Jain posted over 3 years ago in reply to Bozhidara Pachilova

Thanks
Cancel
Reply

Cancel

Children

2640

Offline Bozhidara Pachilova posted over 3 years ago in reply to Anushri Jain

Hello Anushri,

I am glad that you find my suggestion helpful. Thank you for using Infragistics components.

Regards,
Bozhidara Pachilova
Cancel
Reply

Cancel