Silverlight: Transparent image on button

1
votes

I would like to use a transparent png file on a silverlight button. In addition I would like the button itself to be transparent so the background (behind the button) shows through. I find that if I set the opacity of the button it also affects the image. I don't want the entire image to be transparent - just the transparent parts of it as defined in the PNG.

Any ideas on how this can be accomplished?

3
silverlightimagebuttonopacity

3 Answers

3
votes

Silverlight supports png transparency. This works:

<UserControl x:Class="SilverlightApplication17.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="Green">
<Button Width="200" Height="200">
  <Button.Content>
    <Image Source="http://wildermuth.com/images/tx_head.png" />  
  </Button.Content>
</Button>

You should see the image is transparent to the back of the button. If you want the button transparent, then yuo need to create a button template that is clear. The link in texmex5's answer is a descent one.

1
votes

From my subsequent investigations, it seems that not all transparent PNGs will work. They have to be alpha-based transparencies (as opposed to palette-based). They also have to be at least 16-bit images. The standard 8-bit does not work.

0
votes
<UserControl x:Class="MyProject.SilverlightControl1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

        <Grid x:Name="LayoutRoot" Background="Green">
            <Image Width="18" Height="18" DataContext="{Binding PrintMovementCommand}" Source="{Binding IconSource}" VerticalAlignment="Center" HorizontalAlignment="Center" ToolTipService.ToolTip="{Binding Title}" Cursor="Hand">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="MouseLeftButtonUp">
                        <i:InvokeCommandAction Command="{Binding Command}"/>
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </Image>
        </Grid>

    </UserControl>