CODEWITHSUNDEEP
wpfimagexamlbuttonbackground
user3678081
user3678081

Reputation: 65

How to change button background in 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>

thanks

Upvotes: 2

Views: 6658

Answers (3)

MRebai
MRebai

Reputation: 5474

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

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

Upvotes: 2

Sajeetharan
Sajeetharan

Reputation: 222722

You need to change your code like this,

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

Upvotes: 0

Umesh
Umesh

Reputation: 31

*If want to set image as background use

<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>
  • If want to set background color,then remove the stackpannel and add background color on
    button

Upvotes: 0

Related Questions