开发者

Button template with image and text in wpf

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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜