Шаблон кнопки с изображением и текстом в wpf - PullRequest
Новая
       26

Шаблон кнопки с изображением и текстом в wpf

12 голосов
/ 28 апреля 2010

Я хочу создать кнопки с изображениями и текстом внутри.Например, я бы использовал разные изображения и текст для таких кнопок, как «Обзор папок» и «Импорт».Одним из вариантов будет использование шаблона.Я посмотрел на simliar вопрос

Создание изображения + текстовая кнопка с шаблоном управления?

Но есть ли способ, которым я могу связать источник изображениябез использования свойства зависимости или любого другого класса?

Спасибо

Ответы [ 6 ]

41 голосов
/ 20 декабря 2010

Это не должно быть так сложно. Что-то простое, например, установка StackPanel внутри кнопки, поможет: 

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

Затем вы можете настроить StackPanel для управления местом отображения текста, выравниванием и т. Д.

14 голосов
/ 18 апреля 2011

Я добавил несколько вещей, чтобы выстроить их в линию 

<Button>
   <StackPanel Orientation="Horizontal">
       <Image Source="/ApplicationName;component/Images/MyImage.ico"/>
       <Label Padding="0">My Button Text</Label>
   </StackPanel>
</Button>
7 голосов
/ 01 мая 2011 
    <Button>
        <StackPanel Orientation="Horizontal">
            <Image Source="Resources/add.png" Stretch="None" />
            <TextBlock Margin="5,0,0,0">Add</TextBlock>
        </StackPanel>
    </Button>
4 голосов
/ 23 мая 2012 
<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>

3 голосов
/ 28 апреля 2010

Нет. С чем бы вы связали Image.Source? Вам нужен DependencyProperty для этого. Конечно, вы также можете определить нормальный класс, который содержит два свойства: Text и ImageSource или Uri, а затем использовать DataTemplate для визуализации экземпляров этого класса, но это будет еще больше кода для написания это немного "вонючий".

По какой причине вы не хотите использовать свойство зависимостей или пользовательский класс?

1 голос
/ 04 февраля 2015

Добавлено Stretch = "Uniform" в ответ Шона на адрес адреса, если изображение изначально больше размера кнопки (проблема BrainSlugs83 упоминается в его комментариях, с которыми я столкнулся). Подробнее о параметрах растяжения можно узнать по MSDN . 

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

Хотел добавить это как комментарий к ответу под BrainSlugs83, но пока не может из-за нехватки очков и был отклонен при редактировании ответа Шона.

...