如何在WPF xaml中更改按钮背景？ [英] How to change button background in WPF xaml?

问题描述

大家好我是WPF和XAML的新手。
我坚持改变按钮的背景，图像，颜色等等，它只是保持白色。
它只是在可视化编辑器中双击它时显示背景，这样我就可以在其上键入一些文字，然后它再次变为白色。

Hello guys I'm new to WPF and XAML. I'm stuck on changing the button background, image, colour or whatever, it just keeps being white. It just shows the background when I double click on it in the visual editor so I can type some text on it, then it becomes white again.

任何关于我做错了什么的线索？

Any clue about what I'm doing wrong?

<Button Margin="5,-7,5,-1" Width="59" Content="{Binding PlayContent}" x:Name="PlayPause"     HorizontalAlignment="Center" cal:Bind.AtDesignTime="True">
        <Button.Background>
              <ImageBrush ImageSource="resources/main_play_normal.png"/>
        </Button.Background>
</Button>

谢谢

推荐答案

你只需要使用样式和模板来修改你的按钮行为。

You just need to use style and template to modify your button behavior.

这是WPF按钮的Metro风格尝试使用它：

Here is a Metro Style for WPF Button try to use it :

  <Style
        x:Key="ButtonFocusVisual">
        <Setter
            Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="MetroButton" TargetType="{x:Type Button}">
            <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
            <Setter Property="Background" Value="#EEEEEEEE"/>
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Padding" Value="10 5"/>
            <Setter Property="FontSize" Value="14" />
            <Setter Property="BorderThickness" Value="2" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid>
                            <Border
                                x:Name="Border"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}" />

                            <ContentPresenter
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                Margin="{TemplateBinding Padding}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                RecognizesAccessKey="True" />
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="OpacityMask" Value="#AA888888"/>
                                <Setter Property="Margin" Value="2 1" />
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="BorderThickness" Value="0"/>
                                <!--<Setter Property="Background" Value="DimGray"/>-->
                                <Setter Property="Foreground" Value="White"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground" Value="#ADADAD"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

编辑

尝试使用此款式：

EDIT

Try to use this style:

          <Style x:Key="GreenButton" TargetType="Button">
                <Setter Property="OverridesDefaultStyle" Value="True"/>
                <Setter Property="Margin" Value="2"/>
                <Setter Property="FontSize" Value="12"/>
                <Setter Property="Foreground" Value="White"/>
                <Setter Property="Background" >
                    <Setter.Value>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
                            <GradientStop Color="#FF3F9542" Offset="0.85"/>
                        </LinearGradientBrush>
                    </Setter.Value>
                </Setter>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Border Name="border" 
                BorderThickness="0"
                Padding="4,2" 
                BorderBrush="LightGray" 
                CornerRadius="2" 
                Background="{TemplateBinding Background}">
                                <Grid >
                                    <ContentPresenter HorizontalAlignment="Center" 
                               VerticalAlignment="Center" Name="contentShadow" >
                                    </ContentPresenter>
                                    <ContentPresenter HorizontalAlignment="Center" 
                            VerticalAlignment="Center" Name="content"/>
                                </Grid>
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter TargetName="border" Property="BorderBrush" Value="#FF4788c8" />
                                    <Setter Property="Foreground" Value="White" />
                                    <Setter Property="Cursor" Value="Hand" />
                                    <Setter Property="Background" Value="#FF429C46"/>
                                </Trigger>
                                <Trigger Property="IsDefaulted" Value="True">
                                    <Setter TargetName="border" Property="BorderBrush" Value="#FF282828" />
                                </Trigger>
                                <Trigger Property="IsFocused" Value="True">
                                    <Setter TargetName="border" Property="BorderBrush" Value="#FF282828" />
                                </Trigger>
                                <Trigger Property="IsEnabled" Value="False">
                                    <Setter TargetName="border" Property="Opacity" Value="0.7" />
                                    <Setter Property="Foreground" Value="Black" />
                                </Trigger>

                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

然后你只需应用这样的风格：

Then you just apply that style like this :

<Button x:Name="m_Button" Height="35" Content="Submit" Style="{StaticResource GreenButton}" IsEnabled="True" Click="m_Button_Click"/>

这篇关于如何在WPF xaml中更改按钮背景？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！