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”的灰色按钮。单击它，然后“编辑控件”，然后“编辑模板” - 按钮应为黄色轮廓。您现在可以编辑可视元素，状态和转换。

祝你好运！

Answer 2

我同意@BigDubb - 我认为这是最简单的方法。

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

可选的Cursor属性提供该区域可单击的可视指示，有时从边框的内容中不清楚。

Answer 3

如果你想要一个显示文字的透明按钮，你为什么不使用边框，除非你正在利用按钮的状态。

你可以添加一个边框，添加你的内容，将边框上的背景设置为空白和bada boom，bada bing。请注意，您必须让您的事件侦听器侦听MouseLeftButtonDown事件而不是Click事件。这比使用控件模板等更容易。

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

3 个答案: