RadRibbonButton Control

[Vishal]

Hello,
I am using the RadRibbonButton in RibbonGroup control and i want to change the Image on clicking on the Button 
How to achieve that in this control cause it is just allowing to change the background of the border of the press state 

Thanks,
Vishal.

[Kiril Vandov]

Hello Vishal,

Thank you for using our controls, the easiest way to change RadRibbonButton background is via using button click event handler. I will guide you trough the process:
-the XAML should look something like that:

<telerik:RadRibbonView >
    <telerik:RadRibbonTab>
        <telerik:RadRibbonGroup>
            <telerik:RadRibbonButton Content="Ribbon Button" Click="RadRibbonButton_Click" />
        </telerik:RadRibbonGroup>
    </telerik:RadRibbonTab>
</telerik:RadRibbonView>

-code behind, change the image URI to the desired image you want.

private void RadRibbonButton_Click(object sender, RoutedEventArgs e)
{
    RadRibbonButton button = sender as RadRibbonButton;
    if (button != null)
    {
        Image image = new Image();
        var uriSource = new Uri(@"C:\Image.png");
        image.Source = new BitmapImage(uriSource);
        button.Background = new ImageBrush(image.Source);
    }
}

Hope this helps. Please let us know if the provided solution does not fit your case.

Greetings,
Kiril Vandov
the Telerik team

[Vishal]

actually I will brief the scenario 
I am setting the largeImage of the RadRibbonButton and i have created style and template for the same so in template triggers i can change the color of the background only. in the triggers how can i change that largeImage
Business Requirement is that i have to change the largeImage property on click of the button but I am using the MVVM pattern so code behind might not fit .
I have to do it in control template triggers or style triggers but it is not working for me.

Thanks. 

[Kiril Vandov]

Hello Vishal,

Than you for the detailed scenario. In order to change the LargeImage using MVVM you need to follow these steps:
1)Create a bool property in your view model.
2)Create a command that changes the bool property value.
3)Bind the RadRibbonButton Command property to the command in your view model.
4)Create a custom converter and according to its value(True) return the image path for your image.
5)Bind the RadRibbonButton LargeImage property to the bool property using the converter.

Regards,
Kiril Vandov
the Telerik team

[Vishal]

Hello Kiril ,

<telerik:RadRibbonView  Background="LightGray" HorizontalAlignment="Left"  BorderThickness="0" ApplicationName="" ApplicationButtonVisibility="Collapsed">
      <telerik:RadRibbonTab Header="File" FontSize="13" Width="80" BorderThickness="0" Height="Auto" UseLayoutRounding="False">
                    <telerik:RadRibbonGroup Width="Auto" Height="90" Header="ORIENTATION" >
                    <telerik:RadRibbonButton Tag="mybtn" Text="New" Size="Large" LargeImage="/CardLayoutEditor;component/Assets/FileTabImages/File_new_normal.png" Margin="0,0,0,4"                                        d:LayoutOverrides="Height" Style="{DynamicResource FinalStyle}"></telerik:RadRibbonButton>
       <telerik:RadRibbonToggleButton Size="Large"                      LargeImage="/CardLayoutEditor;component/Assets/FileTabImages/File_portrait_normal.png"  >
</telerik:RadRibbonToggleButton>
                </telerik:RadRibbonGroup>
                </telerik:RadRibbonTab>
</telerik:RadRibbonView>

This is my source code 
As per your suggestion my scenario will not work for it I can explain how
Using command in this case it will change the Image for sure but it will change after the clicking of button not on PressState of the button and again releasing the mouse from the button after click it will remain the same which we set on click command
so The only option to do is using Triggers in Template or Style because I am using the WPF so it support triggers 
In trigger there are different states called IsOVer , IsPressed ,IsEnabled so on this triggers i have to change the large Image
for eg :
OnMouseOver I have to show A.jpg
OnPressed I have to B.jpg
OnEnbled= False Trigger I have to show c.jpg

For all this we have to have use the Triggers not command meaning no code in View model and converter.
This is the thing I have to so I hope you are now clear about the question.
Thanks. :)

[Kiril Vandov]

Hello Vishal,

Thank you for describing your case. In order to change the RadRibbonButton LargeImage the way you want you could add the following style in your resources:

<Style TargetType="telerik:RadRibbonButton" x:Key="xRadRibbonButtonStyle">
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True" >
            <Setter Property="LargeImage" Value="AimagePath.png" />
        </Trigger>
        <Trigger Property="IsPressed" Value="True" >
            <Setter Property="LargeImage" Value="BimagePath.png" />
        </Trigger>
        <Trigger Property="IsEnabled" Value="False" >
            <Setter Property="LargeImage" Value="CimagePath.png" />
        </Trigger>
    </Style.Triggers>
</Style>

Hope this helps. Please let us know if you need more info.

Greetings,
Kiril Vandov
the Telerik team

[Vishal]

Hello,
I Have tried this in my style even I have tried it in Control Template Triggers also but unfortunately it is not working for me.
It's not changing the image on over and pressed state

Note: I have changes your images in style  with my own images :)

Even I have share that code base with you in above replies so if you apply this style to that you could also see the same problem.
Just need to change the Style="{DynamicResource FinalStyle}" from the radribbonbutton and apply your style which you send it won't work.


Thanks.

[Kiril Vandov]

Hello Vishal,

Setting the Style to Style="{DynamicResource FinalStyle}" will not work because there is no resource matching the x:Key with FinalStyle, if you are using the styles provided by me you could bind the style like follows: Style="{StaticResource xRadRibbonButtonStyle}".

Greetings,
Kiril Vandov
the Telerik team

[Kiril Vandov]

Hi Vishal,

Just to follow up on this, I am attaching you a sample application using the code provided and applying the custom style you want, the only change in your code is that I moved the initial LargeImage binding in the custom style as well.

Let us know if it works.

Regards,
Kiril Vandov
the Telerik team

[Vishal]

Replacing the DynamicResource with StaticResource it works for me I am Happy
Thanks a lot Kiril