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 simliar 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?

Thanks

Answer 1

No. What would you bind the Image.Source to? You need a DependencyProperty for this. Of course, you could also define a normal class which contains two properties: Text and ImageSource or Uri, and then use a DataTemplate to render instances of this class, but that would be even more code to write, and it is a little "smelly".

What is the reason you do not want to use a dependency property or a custom class?

Answer 2

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 3

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 4

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

Answer 5

<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>

Answer 6

Added Stretch="Uniform" to Sean's answer to address case if the image is originally larger than the button size (issue BrainSlugs83 mentioned in his comments that I ran into as well). More details of Stretch options at MSDN.

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

Wanted to add this as a comment to the answer under BrainSlugs83 but can't yet due to lack of points and was rejected from editing Sean's answer.

Answer 7

For me the IconButton of the XCeed WPF Toolkit (freeware) does the trick.