'Using DrawingImage as Button Content in WPF

I want to use a DrawingImage, created from an svg, as content for a WPF Button control. If I set the DrawingImage to Button.Content it only shows the name of the type (probably just using .ToString()):

  using (FileStream stream = new FileStream("test10.svg", FileMode.Open, FileAccess.Read))
  {
    DrawingImage di = SvgReader.Load(stream);
    Button_Test.Content = di;
  }

What I want to do is:

  1. Storing the DrawingImage, which is created from an svg in a ResourceDirectory and bind it to the Button.Content

  2. Manipulating the DrawingImage for Hover, Buttonpressed, Disabled to visualize these states

    ==> ?? ==> ??

So my questions are:

A) How can I display the DrawingImage on my Button
B) How can I manipulate the DrawingImage when States change?

Thanks in advance.

wpfsvgbuttonstyling


Solution 1:[1]

You shoud set the Content to an System.Windows.Controls.Image to be able to display it on the Button: 

Button_Test.Content = new Image { Source = di };

Solution 2:[2]

Here is how you can do it

<Style TargetType="Button" x:Key="myDrawingImageButtonStyle">
<Setter Property="Template">
  <Setter.Value>
    <ControlTemplate TargetType="Button">
        <Image Source="/test10.svg" 
               Width="54" Height="24" x:Name="Image">   
            <VisualStateManager.VisualStateGroups>
              <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal"/>
                <VisualState x:Name="Disabled"/>
                <VisualState x:Name="MouseOver">
                    <Storyboard Storyboard.TargetName="Image" 
                                Storyboard.TargetProperty="Source">
                      <ObjectAnimationUsingKeyFrames>
                        <DiscreteObjectKeyFrame KeyTime="0" Value="/test11.svg"/>
                      </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Pressed">
                    <Storyboard Storyboard.TargetName="Image" 
                                Storyboard.TargetProperty="Source">
                      <ObjectAnimationUsingKeyFrames>
                        <DiscreteObjectKeyFrame KeyTime="0" Value="/test12.svg"/>
                      </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
              </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
      </Image>
    </ControlTemplate>
  </Setter.Value>
</Setter>

PS: Not tested, hope it gives right direction.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 mm8
Solution 2 Cinchoo

Related Questions