Question

I have a button that I am using on a toolbar that has a nice gradient. I want the button to be completely transparent so that just its contents show against the gradient. When I try, the button appears white rather than being transparent.

The XAML for my button is:

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

and the style is:

<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. Adding this to your UserControl.Resources tag should work:

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

Now your button should be defined as:

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

If you’re using expression blend you can use it to edit your button template to your heart’s content 🙂 Select your button in design view – just above the design window will be a grey button called ‘NewAppointmentButton’. Click on it, then ‘Edit control parts’ then ‘Edit template’ – the button should get a yellow outline. You can now edit the visual elements and states and transitions.

Good luck!