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 woul开发者_StackOverflowd 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?
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.
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>
<Button>
<StackPanel Orientation="Horizontal">
<Image Source="Resources/add.png" Stretch="None" />
<TextBlock Margin="5,0,0,0">Add</TextBlock>
</StackPanel>
</Button>
<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>
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?
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.
For me the IconButton of the XCeed WPF Toolkit (freeware) does the trick.
精彩评论