Ninja Code

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

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

E o design deve estar assim:

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.

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:

<Button Height="70" HorizontalAlignment="Left" Margin="10,10,0,0" Name="button1" VerticalAlignment="Top" Width="70" >    
</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:

<Button Height="70" HorizontalAlignment="Left" Margin="10,10,0,0" Name="button1" VerticalAlignment="Top" Width="70" >
    <Button.Content>
        <StackPanel Height="75" HorizontalAlignment="Left" Margin="0,0,0,0" Name="stackPanel1" VerticalAlignment="Top" Width="64">
            <Image Height="50" Name="image1" Stretch="None" Width="50" Source="/HelloWorld_SilverlightApp;component/Images/Cancel.png" />
            <TextBlock Height="18" Name="textBlock1" Text="Cancelar" Width="50" />
        </StackPanel>
    </Button.Content>
</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:

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: QuickTip, silverlight, silverlight4, Visual Studio, Visual Studio 2010, VS2010, button, image, .Net Framework 4, .Net