CODEWITHSUNDEEP
c#wpfbutton
Rock3rRullz
Rock3rRullz

Reputation: 465

WPF Button Background Issue

I have a grid control that has 25 buttons ( the grid contains only buttons ). And for each button i set the same image like this:

     ImageBrush brush = new ImageBrush();
     BitmapImage bitmap = new BitmapImage();
     bitmap.BeginInit();
     bitmap.UriSource = new Uri(@"pack://application:,,,/Images/notexplored.jpg", UriKind.RelativeOrAbsolute);
     bitmap.EndInit();
     brush.ImageSource = bitmap;

     foreach (UIElement uie in myGrid.Children)
     {
        var temp = uie as Button;
        temp.Background = brush;
     }

My problem is that now when i hover over button i get this ( its a short video with the issue): https://www.dropbox.com/s/jb8fb29lrpimue5/ButtonIssue.avi

How can i correct this? After applying the Image as a background to the button, I don't want to see the default button background(look & feel) instead of applied image, if i hover over the button.

Upvotes: 3

Views: 956

Answers (4)

Siva Gopal
Siva Gopal

Reputation: 3502

For ease of recreating the sample, I took 'StackPanel' as the container here. If you don't need to set the image dynamically then, I hope applying a style as shown below should get the button with look & feel as you expect, while still allowing to work with events etc., the same way you work with a typical WPF button.

<StackPanel x:Name="sp">
        <StackPanel.Resources>
            <Style TargetType="{x:Type Button}" x:Key="btnWithImageBgStyle">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Border CornerRadius="5" BorderBrush="{TemplateBinding BorderBrush}" >
                                <Border.Background>
                                    <ImageBrush ImageSource="pack://application:,,,/Tulip.jpg"/>
                                </Border.Background>
                                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </StackPanel.Resources>
        <Button x:Name="btn1" Width="100" Height="50" Content="Button1!" Style="{StaticResource btnWithImageBgStyle}" Click="btn1_Click"/>
        <Button x:Name="btn2" Width="100" Height="50" Content="Button2!" Style="{StaticResource btnWithImageBgStyle}"/>
        <Button x:Name="btn3" Width="100" Height="50" Content="Button3!" Style="{StaticResource btnWithImageBgStyle}"/>

Upvotes: 3

feO2x
feO2x

Reputation: 5728

You have to change the control template of the button so that it does no longer respond to the MouseOver event. The simplest solution would be something like this

<Window.Resources>
    <Style TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <ContentPresenter />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

This is an implicit style that is applied to every button that resides within the window. In the control template, you can change the look of the button and also how it behaves when it state changes (e.g. when the mouse is over the button).

Normally, the Control Template would be much more code, but in this example, you just want to have a button that shows something but leaves out all the other behavioral stuff that one can see when the mouse is over or when it is clicked. You can view the default template for Buttons in WPF here on MSDN: http://msdn.microsoft.com/en-us/library/ms753328.aspx

I definitely recommend that you learn more about Styling and Templating in WPF. Here is a good starting point for this: http://msdn.microsoft.com/en-us/library/ms745683.aspx

If you have questions, feel free to leave a comment.

Upvotes: 1

dsfgsho
dsfgsho

Reputation: 2769

Rather than setting the background, just add a new image as Content of the button. A small example:

var b = new Button();

var bitmap = new BitmapImage();
bitmap.BeginInit();
bitmap.UriSource = new Uri(@"pack://application:,,,/floor.png", UriKind.RelativeOrAbsolute);
bitmap.EndInit();

var img = new Image {Source = bitmap};

b.Content = img;

Upvotes: 1

Athari
Athari

Reputation: 34293

Buttons are overkill if you just need to display an image and respond to clicks. You can use just ContentControl.

Upvotes: 1

Related Questions