wpf - 如何更改 WPF xaml 中的按钮背景？

Question

大家好，我是 WPF 和 XAML 的新手。 我一直在改变按钮背景、图像、颜色或其他什么，它只是保持白色。 当我在可视化编辑器中双击它时，它只是显示背景，这样我就可以在上面输入一些文本，然后它再次变成白色。

知道我做错了什么吗？

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

谢谢

Answer 1

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

这是一个 WPF 按钮的 Metro 风格，尝试使用它:

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

编辑

尝试使用这种风格:

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

然后你只需应用这样的样式:

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