0

I'm working on a WPF application. I have a Resource Dictionary in which I wrote custom Styles for the ToolTip and for the Button. Actually, for the button i've made two styles. One of them, has included an image to appear to the left of the content in the buttoon. 

<Style x:Key="ButtonImageStyle" TargetType="{x:Type Button}">
     ........
   <TextBlock Margin="5.25,2.417,5.583,5.25" Foreground = White />
   <Image x:Name="ButtonImage" Source="/MyProject;component/Images/icoMainMenu01.png" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="-100,0,0,0" Width="16" Height="16"/>
   .... </Style

Now, in the MainWindow.xaml i have the following: 

<Button Style="{DynamicResource ButtonImageStyle}" x:Name="JustButton" Click="JustButton_Click" Height="50" ToolTip="Press for 1" Content="1" Margin="310,282,400,238"  />

I want to be able to change that Image. I will have like 8 buttons and I want each button to have a different image associated with it. Do you guys have any idea ? Thanks!

Mihaiu Adrian
  • 69
  • 1
  • 1
  • 8

1 Answers1

0

There are various options, from (ab)using properties like the Tag to subclassing or composition in a UserControl, you could also create an attached property.

The cleanest would probably be subclassing though, then you can create a new dependency property for the ImageSource to be used which you then can bind in the default template using a TemplateBinding.

To do the subclassing you can use VS, from the new items choose Custom Control (WPF), this should create a class file and add a base-style to a themes resource dictionary which usually is found in Themes/Generic.xaml. The class would just look like this:

//<Usings>

namespace Test.Controls
{
    public class ImageButton : Button
    {
        public static readonly DependencyProperty ImageProperty =
            DependencyProperty.Register("Image", typeof(ImageSource), typeof(ImageButton), new UIPropertyMetadata(null));
        public ImageSource Image
        {
            get { return (ImageSource)GetValue(ImageProperty); }
            set { SetValue(ImageProperty, value); }
        }
    }
}

Now the theme would be more complicated, you can just copy one of the default templates for a button and paste it into the the default style. Then you only need to add your image somewhere but with this binding:

<Image Source="{TemplateBinding Image}" .../>

When you use this control you will then no longer need to reference a style, as everything is in the default style, there is now a property for the image:

<controls:ImageButton Content="Lorem Ipsum"
                      Image="Img.png"/>

(To use the Tag you would just stick with the normal button and use a TemplateBinding to the tag and set the Tag of the buttons to the URL)

I forgot to mention another possiblity which uses dynamic resources, it's a bit verbose but very simple, see this answer of mine for an example.

Community
  • 1
  • 1
H.B.
  • 166,899
  • 29
  • 327
  • 400
  • Wow. Thanks for the answer. The problem is is that I'm _kinda_ new to WPF. Can you provide a single, simple example attached to my problem? It would make my life much much easier – Mihaiu Adrian Sep 24 '11 at 16:01
  • Thanks. I passed to something else till you answer. Thank you very much! :) – Mihaiu Adrian Sep 24 '11 at 16:09
  • @MihaiuAdrian: Added an example, i did not end up making it self-contained again so sorry about that but i did not want to copy the whole default button template in. – H.B. Sep 24 '11 at 16:17
  • Thanks a million! I'll try everything until I make it work. Thank you! All the best ! :D – Mihaiu Adrian Sep 24 '11 at 16:22
  • So I looked at the _verbose but very simple_ example and it took me 2 minutes to adapt my code to what you answered there. Thank you very much. It works awesome! :D – Mihaiu Adrian Sep 24 '11 at 16:32