How can I make the Silverlight 2.0 button completely transparent?

Question

I have a button that I use on the toolbar with a good gradient. I want the button to be completely transparent so that its contents are simply displayed against the gradient. When I try, the button appears white, not transparent.

XAML for my button:

<Button Name="NewAppointmentButton" Style="{StaticResource ToolbarButtonStyle}"> <TextBlock>X</TextBlock> </Button> 

and style:

 <Style x:Key="ToolbarButtonStyle" TargetType="Button"> <Setter Property="Background" Value="Transparent"/> <Setter Property="BorderThickness" Value="0"/> <Setter Property="Height" Value="24"/> <Setter Property="Width" Value="24"/> </Style> 

Answer 1

The best way is to define a new button template. Add this to your UserControl.Resources tag:

 <ControlTemplate x:Key="ButtonControlTemplate1" TargetType="Button"> <Grid> <vsm:VisualStateManager.VisualStateGroups> <vsm:VisualStateGroup x:Name="CommonStates"> <vsm:VisualState x:Name="Normal"/> <vsm:VisualState x:Name="MouseOver"> <Storyboard/> </vsm:VisualState> <vsm:VisualState x:Name="Pressed"> <Storyboard/> </vsm:VisualState> <vsm:VisualState x:Name="Disabled"> <Storyboard> <DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity"> <SplineDoubleKeyFrame KeyTime="0" Value=".55"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </vsm:VisualState> </vsm:VisualStateGroup> <vsm:VisualStateGroup x:Name="FocusStates"> <vsm:VisualState x:Name="Focused"> <Storyboard> <DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity"> <SplineDoubleKeyFrame KeyTime="0" Value="1"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </vsm:VisualState> <vsm:VisualState x:Name="Unfocused" /> </vsm:VisualStateGroup> </vsm:VisualStateManager.VisualStateGroups> <ContentPresenter x:Name="contentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"/> <Rectangle x:Name="DisabledVisualElement" RadiusX="3" RadiusY="3" Fill="#FFFFFFFF" Opacity="0" IsHitTestVisible="false" /> <Rectangle x:Name="FocusVisualElement" RadiusX="2" RadiusY="2" Margin="1" Stroke="#FF6DBDD1" StrokeThickness="1" Opacity="0" IsHitTestVisible="false" /> </Grid> </ControlTemplate> 

Your button should now be defined as:

 <Button x:Name="NewAppointmentButton" Template="{StaticResource ButtonControlTemplate1}"> <TextBlock>X</TextBlock> </Button> 

If you use a blend expression, you can use it to edit the button template in your heart content :) Select your button in design mode - just above the design window there will be a gray button called "NewAppointmentButton". Click on it, then “Change Controls”, then “Edit Template” - the button should get a yellow outline. Now you can edit visual elements, states and transitions.

Good luck

Answer 2

I agree with @BigDubb - I think this is the easiest way.

 <Border MouseLeftButtonDown="bla_Click" BorderThickness="0" Cursor="Hand"> ...content here... </Border> 

An additional Cursor property provides a visual indication that the area is interactive, which is sometimes not clear from the contents of the border.

Answer 3

If you need a transparent button with displayed text, why don't you just use the border, unless, of course, you use the button states.

You can just add a border, add your content, set the background on the border to anything, and bada boom, bada bing. One note, rather, you will need to listen to the event listener for the MouseLeftButtonDown event, not the Click event. this is much easier than going around with control templates, etc.