如何更改按钮的背景颜色

No matter what I change the Background property to in a button it hardly changes, what am I supposed to do if I want a completely different colored button?

无论我将Background属性更改为按钮它几乎不会改变,如果我想要一个完全不同的彩色按钮,我该怎么办?

I know I can do this via editing a template of a button, but this seems like overkill.

我知道我可以通过编辑按钮模板来做到这一点,但这看起来有些过分。

3 个解决方案

#1

This looks like an issue with SilverLight 2.0 and the default ContentTemplate for a Button. I took a look at the source:

这看起来像SilverLight 2.0的问题和Button的默认ContentTemplate。我看了一眼来源:

<ControlTemplate TargetType="controls:Button"> 
<Grid>
    <!-- snipped the 36 lines of VisualStatManager here -->
    <Border x:Name="Background" CornerRadius="3" Background="White" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
        <Grid Background="{TemplateBinding Background}"  Margin="1"> 
            <Border Opacity="0"  x:Name="BackgroundAnimation" Background="#FF448DCA" />
            <Rectangle x:Name="BackgroundGradient" >
                <Rectangle.Fill> 
                    <LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
                        <GradientStop Color="#FFFFFFFF" Offset="0" />
                        <GradientStop Color="#F9FFFFFF" Offset="0.375" /> 
                        <GradientStop Color="#E5FFFFFF" Offset="0.625" /> 
                        <GradientStop Color="#C6FFFFFF" Offset="1" />
                    </LinearGradientBrush> 
                </Rectangle.Fill>
            </Rectangle>
        </Grid> 
    </Border>
    <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>

The issue is the Rectangle with it's own Background is on top of the Grid which has the Background you've set. (Also, the Border is hard-coded to White). We can fix this using our own ContentTemplate, but that means also adding all the VisualStatManager stuff to get all the animations that go along with the Button.

问题是矩形,它自己的背景位于Grid的顶部,它具有您设置的背景。 (此外,边框硬编码为白色)。我们可以使用我们自己的ContentTemplate来解决这个问题,但这意味着还要添加所有VisualStatManager内容来获取与Button一起使用的所有动画。

A second method is to subclass Button, and modify the template in the OnApplyTemplate override. Here is an example that lowers the opacity of the stock Button so the background shows through:

第二种方法是将Button子类化,并在OnApplyTemplate覆盖中修改模板。下面是一个降低股票Button不透明度的示例,以便背景显示:

public class BKButton : Button {

public override void OnApplyTemplate() {
    base.OnApplyTemplate();

    Border border = GetTemplateChild("Background") as Border;
    Rectangle rect = GetTemplateChild("BackgroundGradient") as Rectangle;

    if(border != null) {
        border.Background = this.Background;
        border.Opacity = .6;
    }
    if (rect != null) {
        LinearGradientBrush lbrush = rect.Fill as LinearGradientBrush;
        if (lbrush != null) {
            lbrush.Opacity = .6;
        }
    }
}

#2

I am not quite sure what do you mean by "button hardly changes" but when I write <Button x:Name="button" Background="Gold" Foreground="Red" Content="Hello!" /> I get a golden button with red text. If you want to edit the button even more (change how it looks when you click on it etc.) then you still have to use templates and visual state manager. I found two pretty good tutorials that specifically concentrate on the visual aspects of a Silverlight button: http://mattberseth.com/blog/2008/03/creating_a_custom_skin_for_sil.html and http://weblogs.asp.net/dwahlin/archive/2008/11/23/using-the-visual-state-manager-in-silverlight-templates.aspx

我不太清楚“按钮几乎没有变化”是什么意思,但是当我写

#3

I had the same problem. But I did workaround. Instead of changing button background color, I set the border width of button to 100, and then set the color for border, for example gray.

我有同样的问题。但我做了解决方法。我没有更改按钮背景颜色,而是将按钮的边框宽度设置为100,然后设置边框的颜色,例如灰色。

So you will have gray button. I know this is not good way, but it worked for me. Hope it helps

所以你会有灰色按钮。我知道这不是好方法,但它对我有用。希望能帮助到你

Here is code example:

这是代码示例:

    Dim btn As New Button
    btn.Width = 75
    btn.Height = 35
    btn.BorderThickness = New Thickness(0, 0, 0, 100)
    btn.BorderBrush = New SolidColorBrush(Colors.LightGray)
    AddHandler btn.Click, AddressOf btn_Click
    AddHandler btn.MouseEnter, AddressOf btn_MouseEnter
    AddHandler btn.MouseLeave, AddressOf btn_MouseLeave

    LayoutRoot.Children.Add(btn)


Private Sub btn_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)
    MessageBox.Show("pressed")
End Sub
Private Sub btn_MouseEnter(ByVal sender As System.Object, ByVal e As System.EventArgs)
    DirectCast(sender, Button).BorderBrush = New SolidColorBrush(Colors.Gray)
End Sub
Private Sub btn_MouseLeave(ByVal sender As System.Object, ByVal e As System.EventArgs)
    DirectCast(sender, Button).BorderBrush = New SolidColorBrush(Colors.LightGray)
End Sub

#1