Ribbon Button and Vector Icon

6 posts, 0 answers
  1. Benjamin
    Benjamin avatar
    24 posts
    Member since:
    Dec 2012

    Posted 15 Mar 2013 Link to this post

    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

  2. Kiril Vandov
    Admin
    Kiril Vandov avatar
    324 posts

    Posted 20 Mar 2013 Link to this post

    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.

  3. UI for WPF is Visual Studio 2017 Ready
  4. Benjamin
    Benjamin avatar
    24 posts
    Member since:
    Dec 2012

    Posted 25 Mar 2013 Link to this post

    Ok,

    thank you for your help.

    Best regards
  5. Ilya
    Ilya avatar
    5 posts
    Member since:
    Aug 2013

    Posted 23 Aug 2013 Link to this post

    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?
  6. Kiril Vandov
    Admin
    Kiril Vandov avatar
    324 posts

    Posted 28 Aug 2013 Link to this post

    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 >>
  7. Ilya
    Ilya avatar
    5 posts
    Member since:
    Aug 2013

    Posted 28 Aug 2013 Link to this post

    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.
Back to Top
UI for WPF is Visual Studio 2017 Ready