如何更改 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 尝试使用它：

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

Answer 2

*如果要将图片设置为背景使用

<Button x:Name="bt_cam"  HorizontalAlignment="Left" Margin="5,-7,5,-1" Height="80"Width="59" VerticalAlignment="Top"  Click="Button_Click"  >
                    <Button.Effect>
                        <DropShadowEffect Opacity="0.3" ShadowDepth="12" />
                    </Button.Effect>
                    <StackPanel>
                        <Image x:Name="cam" Source="resources/main_play_normal.png" />
                    </StackPanel>
 </Button>

• 如果要设置背景颜色，请移除堆栈面板并添加背景颜色
  按钮

Answer 3

你需要像这样改变你的代码，

<Button Margin="5,-7,5,-1" Width="59" x:Name="PlayPause">
    <Image Source="resources/main_play_normal.png"/>
</Button>