Link to home
Start Free TrialLog in
Avatar of chugarah
chugarahFlag for Sweden

asked on

C# WPF Create Button with image as background

Hello again :) Currnely learning C# and WPF, got interested :) Windows APpz..

I am trying to create dynamicly an button with image as an background.
This is bit tricky becouse I have notice you can do this in serveral ways.

1. Create XAML styles and then link it to the newly created button
2. Create the button and the style it self.

My queston is, how can I create an button and add image as background on the button. This is my current code

Is it possible to specify the image in the style XAML allready there?


A: I have created the button with no colors on first state
B. When you hover then the hover takes over and give it defaukt
    colors and stuff

A: I am trying to add background image
But getting this error
annot implicitly convert type 'System.Windows.Controls.Image' to 'System.Windows.Media.Brush'


1. Style

        <!-- Style for the button -->
        <Style x:Key="childButton" TargetType="{x:Type Button}">
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="Padding" Value="2"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True">
                            <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="BorderBrush" TargetName="Bd" Value="#FF3399FF"/>
                                <Setter Property="Background" TargetName="Bd" Value="#FFC2E0FF"/>
                            </Trigger>
                            <Trigger Property="IsKeyboardFocused" Value="True">
                                <Setter Property="BorderBrush" TargetName="Bd" Value="#FF3399FF"/>
                                <Setter Property="Background" TargetName="Bd" Value="#FFC2E0FF"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="BorderBrush" TargetName="Bd" Value="#FF3399FF"/>
                                <Setter Property="Background" TargetName="Bd" Value="#FF99CCFF"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    <!-- Style for the button -->

Open in new window


2. Creating the button :S

            // Getting the image here....somehow
            Image myImage = new Image();
            myImage.Source = new BitmapImage(new Uri("/bilder/knapp.png", UriKind.Relative));

            // Creating the button here
            Button childButton = new Button();
            childButton.Margin = new Thickness(-550,-350,0,0);

            childButton.Height = 62;
            childButton.Width = 238;
            childButton.Content = "d";
            childButton.Foreground = new SolidColorBrush(Colors.Black);
            childButton.Name = "random_ID";
// Error below annot implicitly convert type 'System.Windows.Controls.Image' to 'System.Windows.Media.Brush'
            childButton.Background = myImage; // Trying here but getting error


            // Nothing fancy
            debugging.Content = "d";

            // Attacked the style for the button
            childButton.Style = FindResource("childButton") as Style;

Open in new window


How can I do that?. Thanks alot
Just ask me for more info if the information is bad.
ASKER CERTIFIED SOLUTION
Avatar of Jaime Olivares
Jaime Olivares
Flag of Peru image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of chugarah

ASKER

Wery nice :), I tried to change to your explanation and I got stuck on path for the image.
Using Visual Studio 2012

Solution Explorer
MainWindow.xaml
<images> <!-- Folder-->
 - knapp.png

Getting error
no source available
My guess is pathing error.

Here is the changes

Removed the old Background Setter and replaced with your code
            <Setter Property="Background">
                <Setter.Value>
                <ImageBrush ImageSource="/bilder/knapp.png" />
                </Setter.Value>
            </Setter>

Open in new window


Also changed the object type to ImageBrush

            // Getting the image here....somehow
            var myImage = new ImageBrush
            {
                ImageSource =
                  new BitmapImage(
                    new Uri(@"bilder/knapp.png", UriKind.Relative)
                  )
            };

            childButton.Background = myImage;

Open in new window


Also getting abit confused over these options
new Uri(@"bilder/knapp.png", UriKind.Relative)
// That one has absolute and relative oO?
new Uri(@"pack://application:,,,/Images/bg1.jpg", UriKind.RelativeOrAbsolute);

Open in new window


Thanks, so close now ^^
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial