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

Question

Ich habe eine Schaltfläche, die ich in einer Symbolleiste verwende und die einen schönen Farbverlauf hat. Ich möchte, dass die Schaltfläche vollständig transparent ist, so dass sich nur ihr Inhalt vom Farbverlauf abhebt. Wenn ich es versuche, erscheint die Schaltfläche weiß, anstatt transparent zu sein.

Die XAML für meine Schaltfläche 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

Am besten ist es, eine neue Schaltflächenvorlage zu definieren. Das Hinzufügen dieser Vorlage 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>

Jetzt sollte Ihre Schaltfläche wie folgt definiert sein:

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

Wenn du Expression Blend verwendest, kannst du damit deine Button-Vorlage nach Herzenslust bearbeiten :) Wählen Sie Ihre Schaltfläche in der Entwurfsansicht aus - direkt über dem Entwurfsfenster befindet sich eine graue Schaltfläche mit der Bezeichnung "NewAppointmentButton". Klicken Sie darauf, dann auf "Steuerteile bearbeiten" und dann auf "Vorlage bearbeiten" - die Schaltfläche sollte einen gelben Umriss erhalten. Sie können nun die visuellen Elemente, Zustände und Übergänge bearbeiten.

Viel Glück!

Answer 2

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

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

Die optionale Eigenschaft Cursor gibt einen visuellen Hinweis darauf, dass der Bereich anklickbar ist, was aus dem Inhalt des Rahmens manchmal nicht klar hervorgeht.

Answer 3

Wenn Sie eine transparente Schaltfläche mit angezeigtem Text wünschen, verwenden Sie einfach einen Rahmen, es sei denn, Sie nutzen den Zustand der Schaltfläche aus.

Sie können einfach einen Rahmen hinzufügen, Ihren Inhalt einfügen, den Hintergrund des Rahmens auf nichts einstellen und bada boom, bada bing. Ein Hinweis, eher müssen Sie Ihre Ereignis-Listener für die MouseLeftButtonDown-Ereignis statt der Click-Ereignis zu hören. dies ist viel einfacher als dorking um mit Steuerelementvorlagen usw.