Wie kann ich eine Silverlight 2.0-Schaltfläche vollständig transparent machen?

Question

Ich habe eine Schaltfläche, die ich auf einer Symbolleiste mit einem schönen Farbverlauf verwendet. Ich möchte, dass die Schaltfläche vollständig transparent ist, so dass nur ihr Inhalt gegen den Farbverlauf angezeigt wird. Wenn ich es versuche, erscheint die Schaltfläche eher weiß als transparent.

Die XAML für meine Taste ist:

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

und der Stil ist:

<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

Der beste Weg ist es, eine neue Schaltfläche Vorlage zu definieren. Addiert man diese zu Ihrem UserControl.Resources Tag sollte funktionieren:

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

Nun sollten Sie Ihre Schaltfläche wie folgt definiert werden:

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

Wenn Sie Expression Blend verwenden Sie es verwenden können Ihre Schaltfläche Vorlage zu bearbeiten, um Inhalt Ihres Herzens :) Wählen Sie Ihre Schaltfläche in der Entwurfsansicht - über dem Design-Fenster befindet sich eine graue Schaltfläche namens "NewAppointmentButton". Klicken Sie darauf, dann auf "Steuerelemente bearbeiten" und dann auf "Vorlage bearbeiten" - die Schaltfläche sollte eine gelbe Kontur erhalten. Sie können jetzt die visuellen Elemente und Zustände und Übergänge bearbeiten.

Viel Glück!

Answer 2

Wenn Sie eine transparente Schaltfläche mit angezeigtem Text wünschen, verwenden Sie einfach eine Umrandung, es sei denn, Sie nutzen die Zustände der Schaltfläche.

Sie können nur einen Rahmen hinzufügen, fügen Sie Ihren Inhalt, setzen Sie den Hintergrund auf der Grenze zu nichts und bada boom, bada bing. Beachten Sie jedoch, dass Ihr Ereignis-Listener eher auf das MouseLeftButtonDown-Ereignis als auf das Click-Ereignis warten muss. das ist viel einfacher als mit Kontrollvorlagen herumzulaufen etc.

Answer 3

Ich stimme @BigDubb zu - ich denke, das ist der einfachste Weg.

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

Die optionale Cursor-Eigenschaft bietet eine visuelle Anzeige, dass der Bereich anklickbar ist, die sich von dem Inhalt der Grenze manchmal nicht klar.