Plantilla de botón con imagen y texto en wpf

Quiero crear botones con imágenes y texto dentro. Por ejemplo, usaría diferentes imágenes y texto para botones como 'Examinar carpetas' e 'Importar'. Una de las opciones sería usar una plantilla. Yo tenía un aspecto en cuestión simliarPlantilla de botón con imagen y texto en wpf

Creating an image+text button with a control template?

pero ¿hay alguna manera por la cual puedo obligar a la fuente de la imagen sin necesidad de utilizar una propiedad de dependencia o de cualquier otra clase?

Gracias

Fuente

2010-04-28 Archie

No. ¿Qué le obligar a la Image.Source a? Necesitas una DependencyProperty para esto. Por supuesto, también podría definir una clase normal que contenga dos propiedades: Text y ImageSource o Uri, y luego use una plantilla de datos para representar instancias de esta clase, pero eso sería aún más código para escribir, y es un poco "maloliente". ".

¿Cuál es la razón por la que no desea utilizar una propiedad de dependencia o una clase personalizada?

Fuente

2010-04-28 07:19:31 gehho

La única razón es que quería saber si hay alguna otra manera simple o puede decir más bien 'menos código' para hacerlo. Con texblock puedo usar Quería saber por qué no puedo hacer lo mismo con la propiedad Source de una imagen. – Archie

Pero ** ¿dónde pondría esa 'TemplateBinding'? ¿Y a qué propiedad ** te vincularías? – gehho

¿Puedo usar la propiedad 'Etiqueta' para enlazarlo? – Archie

No tiene por qué ser tan complicado. Algo tan simple como poner un StackPanel dentro de un botón hará el truco:

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

A continuación, se puede configurar el StackPanel para controlar que debe aparecer el texto, alineación, etc.

Fuente

2010-12-20 01:03:35 Marshal

Bien, pero ¿cómo se establece el carácter de subrayado? Si pongo "Mi texto aquí", muestra el subrayado y alt + M ya no funciona. Entonces, ¿cómo recuperas eso? – BrainSlugs83

Además, ¿cómo lo haces para reducir la imagen de modo que el botón no explote al tamaño de tu imagen (es decir, si tengo una imagen de 40x40 y un botón de botones de cualquier tamaño, no quiero para configurarlo manualmente, ¿cómo hago para que la imagen se contraiga al tamaño correcto en lugar de hacer estallar mi botón para que sea súper grande? – BrainSlugs83

Me gustaría agregar que probablemente quiera establecer la 'Orientación' del' StackPanel' en 'Horizontal' para que se alineen uno al lado del otro. Tenga en cuenta que si utilizó una cuadrícula en lugar de un StackPanel, tendría que jugar con los márgenes para centrar horizontalmente la imagen y el texto en el botón (De modo que el panel de distribución es el camino a seguir). –

he añadido algunas cosas a alinearlos bien

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

Fuente

2011-04-17 21:13:42 Sean

Bueno, eso funcionó para darme una etiqueta de botón normal (es decir, teclas de acceso rápido Alt + Letter) - Probé que haga clic en el botón cuando presiono la combinación correcta. - Ahora solo necesito descubrir cómo reducir mi imagen al tamaño del botón y no hacer que los botones sean enormes. – BrainSlugs83

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

Fuente

2011-04-30 22:57:07 mpen

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

Fuente

2012-05-23 05:04:29 daniel

Agregado Stretch = "Uniform" a la respuesta de Sean a la caja de dirección si la imagen es originalmente más grande que el tamaño del botón (tema BrainSlugs83 mencionado en sus comentarios que me encontré también). Más detalles de las opciones de estiramiento en MSDN.

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

quería añadir esto como un comentario a la respuesta bajo BrainSlugs83 pero no puede sin embargo, debido a la falta de puntos y fue rechazado de la edición de la respuesta de Sean.

Fuente

2015-02-04 18:59:23 userN45290

Plantilla de botón con imagen y texto en wpf

Respuesta

Cuestiones relacionadas