如何使Silverlight 2.0按钮完全透明？

Question

我有一个按钮,我在工具栏上使用具有漂亮的渐变.我希望按钮完全透明,以便其内容显示为渐变.当我尝试时,按钮显示为白色而不是透明.

我按钮的XAML是:

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

而风格是:

<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

最好的方法是定义一个新的按钮模板.将此添加到UserControl.Resources标记应该工作:

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

现在您的按钮应定义为:

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

如果您正在使用表达式混合,您可以使用它来编辑您的按钮模板到您心中的内容:)在设计视图中选择您的按钮 - 在设计窗口的正上方将是一个名为"NewAppointmentButton"的灰色按钮.单击它,然后"编辑控件",然后"编辑模板" - 按钮应为黄色轮廓.您现在可以编辑可视元素,状态和转换.

祝好运!