Comment rendre un bouton Silverlight 2.0 entièrement transparent?

Question

J'ai un bouton que j'utilise sur une barre d'outils qui a un joli dégradé. Je veux que le bouton soit complètement transparent de sorte que son contenu soit visible par rapport au dégradé. Quand j'essaie, le bouton apparaît blanc plutôt que transparent.

Le XAML pour mon bouton est:

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

et le style est:

<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

La meilleure façon est de définir un nouveau modèle de bouton. L'ajout de ce à votre balise UserControl.Resources devrait fonctionner:

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

maintenant votre bouton doit être défini comme:

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

Si vous utilisez un mélange d'expression, vous pouvez l'utiliser pour modifier votre modèle de bouton le contenu de votre coeur :) Sélectionnez votre bouton en mode design - juste au-dessus de la fenêtre de conception sera un bouton gris appelé 'NewAppointmentButton'. Cliquez dessus, puis sur 'Modifier les parties du contrôle' puis sur 'Modifier le modèle' - le bouton devrait avoir un contour jaune. Vous pouvez maintenant modifier les éléments visuels, les états et les transitions.

Bonne chance!

Answer 2

Si vous voulez un bouton transparent avec le texte affiché, pourquoi n'utilisez-vous pas simplement une bordure, à moins bien sûr que vous ne profitiez des états du bouton.

Vous pouvez simplement ajouter une bordure, ajouter votre contenu, définir l'arrière-plan sur la bordure à rien et bada boom, bada bing. Une note, vous devrez plutôt que votre écouteur d'événement écoute l'événement MouseLeftButtonDown plutôt que l'événement Click. Ceci est beaucoup plus facile que de bouger avec des modèles de contrôle, etc.

Answer 3

Je suis d'accord avec @BigDubb - Je pense que c'est le moyen le plus simple.

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

L'option propriété Cursor fournit une indication visuelle que la zone est cliquable, ce qui est parfois pas clairement le contenu de la frontière.