Mar 1 2011

#QuickTip 2 - [Silverlight] Botão com Imagem

Category: QuickTip | SilverlightSuzuki @ 10:28

Como colocar uma imagem em um botão no Silverlight?
Esta será a resposta que você encontrará nesta postagem.


Esta postagem foi baseada utilizado o Visual Studio 2010 Ultimate, .Net Framework 4.0, C# e Silverlight 4.
Assim que você iniciar um novo projeto Silverlight Application, abra o MainPage.xaml, agora adicione pela toolbox dando clique duplo:

  1. Button.
  2. StackPanel.
  3. Image.
  4. TextBlock.

Então, até o momento você deve ter o seguinte código xaml dentro da <Grid>:

  1. <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" Name="button1" VerticalAlignment="Top" Width="75" />  
  2. <StackPanel Height="100" HorizontalAlignment="Left" Margin="10,43,0,0" Name="stackPanel1" VerticalAlignment="Top" Width="200">  
  3.     <Image Height="150" Name="image1" Stretch="Fill" Width="200" />  
  4.     <TextBlock Height="23" Name="textBlock1" Text="TextBlock" />  
  5. </StackPanel>  

E o design deve estar assim:

QuickTip2_1

Então, clique no componente Image e nas propriedades clique em source (botão com três pontos [...]). Em seguida irá abrir um dialog para escolhermos a imagem, basta clicarmos em add e escolher a imagem.

QuickTip2_2

Em seguida clicamos em OK, a imagem aparece no componente. Ajustei também a propriedade stretch para none, pois minha imagem tem 48x48 pixels, ajustei também o tamanho do botão, TextBlock (alterei a propriedade Text para Cancelar), StackPanel e Image.
Em seguida apaguei a propriedade content do Button e fechei a TAG de forma completa, ficando assim:

  1. <Button Height="70" HorizontalAlignment="Left" Margin="10,10,0,0" Name="button1" VerticalAlignment="Top" Width="70" >       
  2. </Button>  

Isso foi feito para que possamos colocar nosso StackPanel dentro do Button, isso é possível graças ao <Button.Content>, então bastar recortar o StackPanel e colar entre as TAGs, ficando assim:

  1. <Button Height="70" HorizontalAlignment="Left" Margin="10,10,0,0" Name="button1" VerticalAlignment="Top" Width="70" >  
  2.     <Button.Content>  
  3.         <StackPanel Height="75" HorizontalAlignment="Left" Margin="0,0,0,0" Name="stackPanel1" VerticalAlignment="Top" Width="64">  
  4.             <Image Height="50" Name="image1" Stretch="None" Width="50" Source="/HelloWorld_SilverlightApp;component/Images/Cancel.png" />  
  5.             <TextBlock Height="18" Name="textBlock1" Text="Cancelar" Width="50" />  
  6.         </StackPanel>  
  7.     </Button.Content>  
  8. </Button>  

Atenção! Quando colar é possível que a imagem não apareça, então atente-se a duas coisas:

  1. Tamanho do botão.
  2. Margem do StackPanel.

O botão deve ficar assim:

QuickTip2_3

Agora é só compilar e executar!
Até a próxima QuickTip.

 

Não vos deixarei órfãos; voltarei para vós. (João 14:18)

Tags: , , , , , , , , ,

Comments

1.
trackback DotNetKicks.com says:

#QuickTip 2 - [Silverlight] Button with Image

You've been kicked (a good thing) - Trackback from DotNetKicks.com

2.
pingback thiagosatoshisuzuki.wordpress.com says:

Pingback from thiagosatoshisuzuki.wordpress.com

#QuickTip 2 – [Silverlight] Botão com Imagem « Thiago Satoshi Suzuki

3.
André @ CODIX André @ CODIX Brazil says:

Valeu pelo post!
Abraços

4.
trackback Ninja Code says:

Como trabalhar com estilos e templates no Silverlight

Como trabalhar com estilos e templates no Silverlight

5.
Monalisa Smith Monalisa Smith United States says:

Nice information.....thanks

Add comment


(Will show your Gravatar icon)

  Country flag

biuquote
  • Comment
  • Preview
Loading