locked
Button with image instead of text RRS feed

  • Question

  • Hello everyone,

    Couldn't find an answer to this on the forum so I'll go ahead and ask it...

    I've used the standard simple button from blend... styled it...

    Now here is the problem... what I would like in the content presenter is an image AND text.... is this possible? and without losing the event properties of the button?

    Problem is, I am able to have one or the other...

    Any suggestions? workarounds?

    --Joe
    Monday, May 12, 2008 3:33 PM

Answers

  • Howdy,

    So when you create a button you sometimes write it like this in XAML:

    <Button Content="Hello"/>

    The Content allows you to specify only one child but that child can be a grid... so you could do something like this:

    1         <Button Margin="237,31,217,0" VerticalAlignment="Top" Height="51">  
    2             <Grid Width="160" Height="45">  
    3                 <Grid.ColumnDefinitions> 
    4                     <ColumnDefinition Width="0.235*"/>  
    5                     <ColumnDefinition Width="0.765*"/>  
    6                 </Grid.ColumnDefinitions> 
    7                 <Image Source="MyImage.gif" Stretch="Fill" Height="45" VerticalAlignment="Top" Margin="0,0,2,0"/>  
    8                 <Label HorizontalAlignment="Stretch" VerticalAlignment="Center" Content="This is my button" Grid.Column="1"/>  
    9             </Grid> 
    10         </Button> 


    So in the above example... you need an image called MyImage.gif in your project...

    The easiest way to do this in Blend is to double click your Button.. then add a Grid from the Toolbar.. then double click the Grid... add some columns to it.. right click on the image and insert it... then add a label to the grid...

    All done...


    Cheers
    Learn Expression Blend at learnexpressionstudio.com
    Monday, May 12, 2008 7:05 PM
    Moderator

All replies

  • Howdy,

    So when you create a button you sometimes write it like this in XAML:

    <Button Content="Hello"/>

    The Content allows you to specify only one child but that child can be a grid... so you could do something like this:

    1         <Button Margin="237,31,217,0" VerticalAlignment="Top" Height="51">  
    2             <Grid Width="160" Height="45">  
    3                 <Grid.ColumnDefinitions> 
    4                     <ColumnDefinition Width="0.235*"/>  
    5                     <ColumnDefinition Width="0.765*"/>  
    6                 </Grid.ColumnDefinitions> 
    7                 <Image Source="MyImage.gif" Stretch="Fill" Height="45" VerticalAlignment="Top" Margin="0,0,2,0"/>  
    8                 <Label HorizontalAlignment="Stretch" VerticalAlignment="Center" Content="This is my button" Grid.Column="1"/>  
    9             </Grid> 
    10         </Button> 


    So in the above example... you need an image called MyImage.gif in your project...

    The easiest way to do this in Blend is to double click your Button.. then add a Grid from the Toolbar.. then double click the Grid... add some columns to it.. right click on the image and insert it... then add a label to the grid...

    All done...


    Cheers
    Learn Expression Blend at learnexpressionstudio.com
    Monday, May 12, 2008 7:05 PM
    Moderator
  • Super! I can work with this.... thanks a bunch...
    Tuesday, May 13, 2008 1:13 PM