wpf create image button

Question

my control template and style:

 <ControlTemplate TargetType="{x:Type Button}" x:Key="ImageButtonTemplate">
        <Image Source="..//..//images//ok.png" 
                           Width="{TemplateBinding Width}" 
                           Height="{TemplateBinding Height}"/>

  </ControlTemplate>

  <Style TargetType="{x:Type Button}" x:Key="ImageButton">
        <Setter Property="Template" Value="{StaticResource ImageButtonTemplate}"/>                        
  </Style>

  <Button Style="{StaticResource ImageButton}" />

the button isn't visible ... what am i missing ?

EDIT :

tried defining panel with height and width , button image is still not visible .. little help .

    <ControlTemplate TargetType="{x:Type Button}" x:Key="ImageButtonTemplate">
        <Grid>
            <Image Source="..//images//ok.png"  Width="{TemplateBinding Width}"  Height="{TemplateBinding Height}" />              
        </Grid>
    </ControlTemplate>

and aren't i suppose to put a in there ?
what am i doing wrong ?

You are not setting the width an height. Depending on the type of container you'll need it in order to be visible (if using stackpanel for example, instead of grid). — Erre Efe, Apr 21 '12 at 00:08
@RandolfRincón-Fadul how do i set them ? i thought i needed to add a contentpresenter and do it there but it does not let me add one in the template ? could you refer me to a good example ? — eran otzap, Apr 21 '12 at 00:18

score 2 · Accepted Answer · edited May 23 '17 at 12:23

You are not setting the width and height. Depending on the type of container you'll need it in order to be visible (if using stackpanel for example).

Here you have another related question that explains it.

WPF TriState Image Button

EDIT:

I create a new project and within the start window wrote:

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="WpfApplication.MainWindow"
    x:Name="Window"
    Title="MainWindow"
    Width="640" Height="480">
    <Window.Resources>
    <ControlTemplate TargetType="{x:Type Button}" x:Key="ImageButtonTemplate">
        <Grid>
            <Image Source="MB_0024_YT2.png"  Width="{TemplateBinding Width}"  Height="{TemplateBinding Height}"  />              
        </Grid>
    </ControlTemplate>
  <Style TargetType="{x:Type Button}" x:Key="ImageButton">
        <Setter Property="Template" Value="{StaticResource ImageButtonTemplate}"/>                        
  </Style>
    </Window.Resources>
    <Grid x:Name="LayoutRoot">
     <Button Style="{StaticResource ImageButton}" Width="120" Height="120" Click="Button_Click" />
     </Grid>
</Window>

Now it's working. The button It's visible and within the event handler is working also.

Event Handler:

    private void Button_Click(object sender, System.Windows.RoutedEventArgs e)
    {
        MessageBox.Show("Hello");
    }

i think my problem is the way i specified the path . when i gave a full path , it showed the image .. would it know to find the Images folder from the application root ? Source ="Images/ok.png" or do i need to specify it like "..//..//Images//ok.png " ? — eran otzap, Apr 21 '12 at 21:55
You specify the resources (without //) from the root directly. — Erre Efe, Apr 22 '12 at 17:34

wpf create image button

1 Answers1