This is a migrated thread and some comments may be shown as answers.
Ribbon Button and Vector Icon
5 Answers 79 Views
This is a migrated thread and some comments may be shown as answers.
Benjamin
Top achievements
Rank 1
Benjamin asked on 15 Mar 2013, 01:23 PM
Hello,

I have vector Icon like that :
<ControlTemplate x:Key="AboutImage">
  <Viewbox Stretch="Uniform">
    <Canvas Width="512" Height="512">
      <Rectangle Canvas.Left="0" Canvas.Top="0" Width="512" Height="512" Fill="{TemplateBinding Background}"/>
      <Path Data="..."  Fill="{TemplateBinding Foreground}"/>
    </Canvas>
  </Viewbox>
</ControlTemplate>

How can I use this with RadRibbonButton ?

Thank you

5 Answers, 1 is accepted

Sort by
0
Kiril Vandov
Telerik team
answered on 20 Mar 2013, 01:34 PM
Hello Benjamin,

The RadRibbonButtons SmallImage/LargeImage properties are of type Image and therefore you can not use them to display an image created through a Path.

However if you want to place the code snippet, you proved us with, inside the RadRibbonButton you could use the Content property. Doing so you will need to set the text displayed in the button on your own, here is a code sample:
<telerik:RadRibbonButton>
    <StackPanel>
        <Viewbox Stretch="Uniform">
            <Grid Background="Red">
                <Rectangle Width="35" Height="35" Fill="Lime" />
                <Path Stroke="DarkGoldenRod" StrokeThickness="3" Data="M 10,20 C 10,25 40,35 40,17 H 28" />
            </Grid>
        </Viewbox>
        <TextBlock Text="Text button" />
    </StackPanel>
</telerik:RadRibbonButton>


Kind regards,
Kiril Vandov
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Benjamin
Top achievements
Rank 1
answered on 25 Mar 2013, 02:59 PM
Ok,

thank you for your help.

Best regards
0
Ilya
Top achievements
Rank 1
answered on 23 Aug 2013, 09:57 AM
Hello.

Can I use the same but changing the style of the RibbonBarButton? For example, I would like to change propertie LargeImage with help of style and to replace it with your's: <Rectangle Width="35" Height="35" Fill="Lime" />. Is it possible?

I have read here http://www.telerik.com/help/wpf/radribbonview-styling-ribbonbutton.html that I can change style. I have tried it, but got error in here:

<VisualState x:Name="MouseOver">
  <Storyboard>
    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
      <DiscreteObjectKeyFrame KeyTime="0" Value="{DynamicResource}"/>
    </ObjectAnimationUsingKeyFrames>
  </Storyboard>
</VisualState>

The DiscreteObjectKeyFrame's value DynamicResource is not working.

But still, can I manage to do such kind of style with Rectangle instead of Image?
0
Kiril Vandov
Telerik team
answered on 28 Aug 2013, 09:19 AM
Hello Ilya,

A possible reason for the error is that you have not placed a Resource name in the Value of the DiscreteObjectKeyFrame : Value="{DynamicResource}".

However you can modify the default template and add an Rectangle which you could animate depending on the state of the button. Also you will not be able to transfer data through the LargeImage property to the Rectangle.

I have created a sample in which I have added a rectangle with x:name="RectangleImage"  to the RadButtonTemplate and using the VisualStates I am animating its Fill property, like follow:
<VisualState x:Name="MouseOver">
    <Storyboard>
        ...
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="RectangleImage">
            <DiscreteObjectKeyFrame KeyTime="0">
                <DiscreteObjectKeyFrame.Value>
                    <SolidColorBrush Color="Red"/>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
        ...

I hope this information helps.

Kind regards,
Kiril Vandov
Telerik
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
0
Ilya
Top achievements
Rank 1
answered on 28 Aug 2013, 09:23 AM
Than you for helping me.

I will check your solution today or tomorrow and will write back if it worked for me.

Kind regards,
Ilya.
Asked by
Benjamin
Top achievements
Rank 1
Answers by
Kiril Vandov
Telerik team
Benjamin
Top achievements
Rank 1
Ilya
Top achievements
Rank 1
Share this question
or