Content of a WPF button - unable to put anything but text

Question

I designed a nice STOP graphic with red bg and gradient and all that in Expression Design - just like it'll look on a real taperecorder or something.

I exported it as a XAML WPF Resource dictionary and got the XAML code.

I want this graphic to appear inside the button along with the text "STOP".

If I directly paste the XAML inside the button tag, it is not working.

I tried searching, but all search results seem to be talking about something called button template and they are setting styles and stuff. that's not what i want.

Is it like, not everything you design in Expression Design won't go inside a button? How can I put any design XAML as the content of a button?

Edit

This is what I got from exporting as XAML. Can this be put inside Button tag?

<DrawingBrush x:Key="Layer_1" Stretch="Uniform">
  <DrawingBrush.Drawing>
    <DrawingGroup>
      <DrawingGroup.Children>
        <GeometryDrawing Geometry="F1 M 2.72,0.160004L 16.0533,0.160004C 17.4672,0.160004 18.6133,1.30615 18.6133,2.72L 18.6133,12.96C 18.6133,14.3739 17.4672,15.52 16.0533,15.52L 2.72,15.52C 1.30615,15.52 0.16,14.3739 0.16,12.96L 0.16,2.72C 0.16,1.30615 1.30615,0.160004 2.72,0.160004 Z ">
          <GeometryDrawing.Pen>
            <Pen Thickness="0.32" LineJoin="Round" Brush="#FFFFFFFF"/>
          </GeometryDrawing.Pen>
          <GeometryDrawing.Brush>
            <LinearGradientBrush StartPoint="0.5,-0.111111" EndPoint="0.5,1.11111">
            <LinearGradientBrush.GradientStops>
              <GradientStop Color="#FFDDB8B8" Offset="0.00465116"/>
              <GradientStop Color="#FFA60E0E" Offset="0.986046"/>
            </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </GeometryDrawing.Brush>
        </GeometryDrawing>
      </DrawingGroup.Children>
    </DrawingGroup>
  </DrawingBrush.Drawing>

.

Answer 1

You have defined a Brush. Now you need something to paint on. Try using:

 <Button Background="{StaticResource Layer_1}" Content="STOP"> />

You'll probably need to edit the button template to change other button states, like pressed, MouseOver and so on.

Answer 2

Rather than using a DrawingBrush, how about just using a Rectange? Expression Design is great, but the XAML it exports tends to be a little too much for my taste. I recommend adding a rectangle as a resource, and then setting the content of your button to the resource, as follows:

<Grid>
    <Grid.Resources>
        <Rectangle x:Key="Stop" RadiusX="3" RadiusY="3" Width="20" Height="20">
            <Rectangle.Fill>
                <LinearGradientBrush StartPoint="0.5,1" EndPoint="0.5,0">
                    <LinearGradientBrush.GradientStops>
                        <GradientStop Color="#FFAD2323" Offset="0"/>
                        <GradientStop Color="#FFD6A0A0" Offset="1"/>
                    </LinearGradientBrush.GradientStops>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
    </Grid.Resources>

    <Button Width="100" Height="30" Content="{StaticResource Stop}"/>
</Grid>

Of course you could also export your design to a .png as well...