Button template with image and text in wpf

Question

I want to create buttons with images and text inside. For example, i would use different images and text for buttons like 'Browse folders' and 'Import'.

One of the options would be to use a template. I had a look at similar question

Creating an image+text button with a control template?

But is there any way by which I can bind the source of image without using a dependency property or any other class?

Answer 1

It doesn't have to be that complicated. Something as simple as putting a StackPanel inside a button will do the trick:

<Button>
  <StackPanel>
    <TextBlock>My text here</TextBlock>
    <Image Source="some.jpg" Stretch="None" />
  </StackPanel>
</Button>

Then you can configure the StackPanel to control where the text should appear, alignment, etc.

Answer 2

I added a few things to line them up nicely

<Button>
   <StackPanel Orientation="Horizontal">
       <Image Source="/ApplicationName;component/Images/MyImage.ico"/>
       <Label Padding="0">My Button Text</Label>
   </StackPanel>
</Button>

Answer 3

    <Button>
        <StackPanel Orientation="Horizontal">
            <Image Source="Resources/add.png" Stretch="None" />
            <TextBlock Margin="5,0,0,0">Add</TextBlock>
        </StackPanel>
    </Button>

Answer 4

<Button x:Name="MyCoolButton"Width="200" Height="75">
    <Grid >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Image Source="Pete-Brown-Silverlight-in-Action.png" Margin="5" Grid.Column="0" />
        <StackPanel Grid.Column="1" Margin="5">
            <TextBlock Text="Buy My Book!" FontWeight="Bold" />
            <TextBlock Text="Pete is writing THE Silverlight 4 book" TextWrapping="Wrap" />
        </StackPanel>
    </Grid>
</Button>