C#•10mo ago

Image not showing in wpf button

I made a button theme as a resource dictionary and made a sure the content of the button is an image whose source is binded to the constructor of the button when is being made in the application. The problem is the button is not showing. Please i need assistance

83 Replies

KingdawanageOP•10mo ago

Dictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style BasedOn="{StaticResource {x:Type Button}}"
           TargetType="{x:Type Button}"
           x:Key="SearchButton">
        <Style.Setters>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Width="100"
                                Height="100"
                                CornerRadius="15"
                                Background="{TemplateBinding Background}"
                                x:Name="buttonBackground">
                            <Grid>
                                <Image VerticalAlignment="Center"
                                       HorizontalAlignment="Center"
                                       Source="{TemplateBinding Content}"/>
                            </Grid>
                        </Border>

                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="buttonBackground" Property="Background" Value="#999999"/>
                            </Trigger>

                            <Trigger Property="IsPressed" Value="True">
                                <Setter TargetName="buttonBackground" Property="Background" Value="#4c4c4c"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style.Setters>
    </Style>
</ResourceDictionary>

Dictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style BasedOn="{StaticResource {x:Type Button}}"
           TargetType="{x:Type Button}"
           x:Key="SearchButton">
        <Style.Setters>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Width="100"
                                Height="100"
                                CornerRadius="15"
                                Background="{TemplateBinding Background}"
                                x:Name="buttonBackground">
                            <Grid>
                                <Image VerticalAlignment="Center"
                                       HorizontalAlignment="Center"
                                       Source="{TemplateBinding Content}"/>
                            </Grid>
                        </Border>

                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="buttonBackground" Property="Background" Value="#999999"/>
                            </Trigger>

                            <Trigger Property="IsPressed" Value="True">
                                <Setter TargetName="buttonBackground" Property="Background" Value="#4c4c4c"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style.Setters>
    </Style>
</ResourceDictionary>

this is the resource dictionary of the button in particular

                <Button Grid.Row="0"
                             Grid.Column="0"
                             Style="{StaticResource SearchButton}"
                             Margin="10,0,0,0"
                             Background="White">
                    <Button.Content>
                        <Image Source="/Assets/Images/search1.png"/>
                    </Button.Content>
                </Button>

                <Button Grid.Row="0"
                             Grid.Column="0"
                             Style="{StaticResource SearchButton}"
                             Margin="10,0,0,0"
                             Background="White">
                    <Button.Content>
                        <Image Source="/Assets/Images/search1.png"/>
                    </Button.Content>
                </Button>

and this is the constructor of the button in my application

Klarth•10mo ago

This doesn't really make sense. So here you're binding the Image to Content, sure.

<Image VerticalAlignment="Center"
  HorizontalAlignment="Center"
  Source="{TemplateBinding Content}"/>

<Image VerticalAlignment="Center"
  HorizontalAlignment="Center"
  Source="{TemplateBinding Content}"/>

However, here, the Button.Content is...another image. So you're setting the Image.Source as an Image control...which isn't a thing.

<Button.Content>
  <Image Source="/Assets/Images/search1.png"/>
</Button.Content>

<Button.Content>
  <Image Source="/Assets/Images/search1.png"/>
</Button.Content>

It seems mostly unnecessary to replace the ControlTemplate here, but it's been awhile since I used WPF.

<Border Width="100"
        Height="100"
        CornerRadius="15"
        Background="{TemplateBinding Background}"
        x:Name="buttonBackground">
    <Grid>
        <Image VerticalAlignment="Center"
               HorizontalAlignment="Center"
               Source="{TemplateBinding Content}"/>
    </Grid>
</Border>

<Border Width="100"
        Height="100"
        CornerRadius="15"
        Background="{TemplateBinding Background}"
        x:Name="buttonBackground">
    <Grid>
        <Image VerticalAlignment="Center"
               HorizontalAlignment="Center"
               Source="{TemplateBinding Content}"/>
    </Grid>
</Border>

You should probably just be using a ContentPresenter here instead of Image (or maybe instead of the Grid altogether).

KingdawanageOP•10mo ago

I thought you can make the content as an image. I am new to this

Klarth•10mo ago

You can, by default, because the default control is correctly made. ContentPresenter is what you need here to forward the <Button.Content> into actually being presented. There's not really a need for a new ControlTemplate here, IMO. But if you still want it, check out https://github.com/dotnet/wpf/blob/991e7030d569bc6d0480d7126e01a28a9465d05e/src/Microsoft.DotNet.Wpf/src/Themes/XAML/Button.xaml#L160 to see how the button is originally made. At least the style-side

KingdawanageOP•10mo ago

Now i am confused

Klarth•10mo ago

Why?

KingdawanageOP•10mo ago

BEcause i dont know what i did wrong. I made the content of the button to be an image in the resource dictionary So that any picture i add is centre aligned I read that control template is used to change the visuals of a control That is why i used it Here i bound the source of the image to be the content of the button but the content in the constructor is already an image

Klarth•10mo ago

And you can't set an Image.Source to a Control. Image.Source needs an ImageSource. Conversely, Button.Content needs a control (well, not exactly...) and not an ImageSource. This is why you use ContentPresenter in your template.

KingdawanageOP•10mo ago

I see. So the problem was using a control template to modify the behaviour of the button? or i should use a content presenter in the control template?

Klarth•10mo ago

Right. Like the original button style does.

KingdawanageOP•10mo ago

but i dont understand how i can make the content presenter source to be the content of the button Do i use the SourceUpdated property?

Klarth•10mo ago

You just bind the Content. You keep the external XAML exactly the same. ie. This part:

<Button.Content>
  <Image Source="/Assets/Images/search1.png"/>
</Button.Content>

<Button.Content>
  <Image Source="/Assets/Images/search1.png"/>
</Button.Content>

KingdawanageOP•10mo ago

to what property when i try to do that, it tells me that Content is not recognized or accessible

Klarth•10mo ago

Hmm, this is different in WPF. Maybe it's implicit and <ContentPresenter /> doesn't need a binding here. Just follow what the original style does for ContentPresenter and see what happens. Though it should have a Content property.

KingdawanageOP•10mo ago

But i dont know how to use content presenter. I have not used it before nor do i know what it is supposed to do. It does have a content property tho

Klarth•10mo ago

https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.contentpresenter.content?view=windowsdesktop-8.0#remarks

ContentPresenter.Content Property (System.Windows.Controls)

Gets or sets the data used to generate the child elements of a ContentPresenter.

Klarth•10mo ago

Yeah, it's implicit in WPF. Did you read the style? It literally tells you the implementation. Just follow it.

KingdawanageOP•10mo ago

Okay. So you recommend i put the image in the theme and not in the constructor of the button?

Klarth•10mo ago

That is not what I said at all. I said: 1. Follow the WPF style which uses ContentPresenter 2. Keep your external XAML with <Button.Content> the same. Do not put an <Image> control in your template.

KingdawanageOP•10mo ago

Hmmm. So something like this?

<ControlTemplate TargetType="Button">
    <Border Width="30"
            Height="30"
            CornerRadius="15"
            Background="{TemplateBinding Background}"
            BorderBrush="Black"
            BorderThickness="1"
            x:Name="buttonBackground">
        <ContentPresenter VerticalAlignment="Center"
                          HorizontalAlignment="Center"
                          Content="{TemplateBinding Content}"/>
    </Border>

    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter TargetName="buttonBackground" Property="Background" Value="#999999"/>
        </Trigger>

        <Trigger Property="IsPressed" Value="True">
            <Setter TargetName="buttonBackground" Property="Background" Value="#4c4c4c"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

<ControlTemplate TargetType="Button">
    <Border Width="30"
            Height="30"
            CornerRadius="15"
            Background="{TemplateBinding Background}"
            BorderBrush="Black"
            BorderThickness="1"
            x:Name="buttonBackground">
        <ContentPresenter VerticalAlignment="Center"
                          HorizontalAlignment="Center"
                          Content="{TemplateBinding Content}"/>
    </Border>

    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter TargetName="buttonBackground" Property="Background" Value="#999999"/>
        </Trigger>

        <Trigger Property="IsPressed" Value="True">
            <Setter TargetName="buttonBackground" Property="Background" Value="#4c4c4c"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

Klarth•10mo ago

Yes, but Content="{TemplateBinding Content}" is apparently not necessary.

KingdawanageOP•10mo ago

Okay i removed it and left my button constructor the way it is, but it is not show still

Klarth•10mo ago

Ok, lets move one step backwards. Try showing your image in a normal image control, not within your styled button. Just something like:

<Grid>
  <Image Source="/Assets/Images/search1.png"/>
</Grid>

<Grid>
  <Image Source="/Assets/Images/search1.png"/>
</Grid>

KingdawanageOP•10mo ago

Okay. It shows after i comment

<!--<Button.Content>
    <Image Source="/Assets/Images/search3.png"/>
</Button.Content>-->

<!--<Button.Content>
    <Image Source="/Assets/Images/search3.png"/>
</Button.Content>-->

out

Klarth•10mo ago

That's a different image file than before.

KingdawanageOP•10mo ago

yah i have many i was trying. Before i had a problem when some image files could show

Klarth•10mo ago

I'm just trying to rule out your image resource settings being incorrect and the image not being located.

KingdawanageOP•10mo ago

But the image is displaying all the images are in one folder

Klarth•10mo ago

That doesn't matter. You still need to ensure that individually they have the right Build Action.

KingdawanageOP•10mo ago

Oh okay WHat does that mean tho I thought as long as the path is correct, it would display the object

Klarth•10mo ago

You need a Build Action to include the image as a resource (embedded within the executable) or Copy to Output so it is published to disk relative to the executable. Else the image just stays in your solution folder doing nothing.

KingdawanageOP•10mo ago

Sorry if i am asking too many questions. I am new to this but how do i ensure this

Klarth•10mo ago

You right click the image in VS and select properties. Out-of-the-box, the original Button control style already works with child Image content as long as you're correctly setup. So you can use that as another check.

KingdawanageOP•10mo ago

so what do i look for in properties. there is not much there

Klarth•10mo ago

Build Action or Copy to Output.

KingdawanageOP•10mo ago

I think this is fine tho

KingdawanageOP•10mo ago

but there is supposed to be a picture there. dunno why it's not showing

Klarth•10mo ago

If it shows in the designer and not at runtime, then your images are likely setup incorrectly as I mentioned.

KingdawanageOP•10mo ago

I see. Does rebuiding the solution fix it? Okay. I put the full path and it works. I'd like to figure out how to set the paths well

Klarth•10mo ago

No, rebuilding doesn't fix it. You need to follow what I say.

MODiX•10mo ago

Klarth

You need a Build Action to include the image as a resource (embedded within the executable) or Copy to Output so it is published to disk relative to the executable.

Quoted by

<@160638834109972480> from #Image not showing in wpf button (click here)

React with ❌ to remove this embed.

KingdawanageOP•10mo ago

But like how do i get a build action I dont find that in the image property

Klarth•10mo ago

You click it? You should have something like this (don't mind the AvaloniaResource)

KingdawanageOP•10mo ago

nope not there Do i need a nuget package like avalonia?

Klarth•10mo ago

Don't mind Avalonia. It's a different framework. I just don't have a WPF project open.

KingdawanageOP•10mo ago

okay. but what do i do. I dont have that build action property

Klarth•10mo ago

I'm trying to figure out why you don't have the extra options.

KingdawanageOP•10mo ago

Thank you sir for sticking with me. I really appreciate it

Klarth•10mo ago

Is this a .NET or .NET Framework project?

KingdawanageOP•10mo ago

.NET framework. For some reason there were no WPF controls in the .NET project

Klarth•10mo ago

FYI, nobody cares about the drag/drop designer in WPF. It leads to bad layout code. Devs write XAML by hand and use autoformat tools like XAML Styler.

KingdawanageOP•10mo ago

I found that out. That was two days ago but i wasnt sure at the moment I actually only got into .NET on monday And i have learnt a lot in that time But still have a lot to learn

Klarth•10mo ago

Yeah, it's fine for now.

KingdawanageOP•10mo ago

but i'm still confused about .NET and framework

Klarth•10mo ago

Eventually, you'll want to migrate and it's a pain. Well, there's an Upgrade Assistant tool now which works decently well. But before, you had to migrate csproj by hand.

Klarth•10mo ago

KingdawanageOP•10mo ago

So your're better off developing on .NET right?

Klarth•10mo ago

Not really sure what to say. Pops up for me in a .NET Framework project.

Klarth•10mo ago

KingdawanageOP•10mo ago

Maybe it has to do with git

Klarth•10mo ago

.NET is like 7+ years ahead of .NET Framework in terms of API/features/performance.

KingdawanageOP•10mo ago

I pushed changes i made yesterday when i hit a milestone but the images werent there yet

Klarth•10mo ago

.NET Framework only has the advantage of being preinstalled on Windows (and smaller binaries because of that).

KingdawanageOP•10mo ago

they have these weird icons

KingdawanageOP•10mo ago

Klarth•10mo ago

I can't remember exactly what that icon means. Either it exists but is not included in the project...or it's reference by the project but doesn't exist on disk. What I would do is: remove the images from the project and re-import them.

KingdawanageOP•10mo ago

Hmm. So basically delete them and copy them back in? still the same maybe i try to push the image folder to my githug repo?

Klarth•10mo ago

How are you importing them? https://stackoverflow.com/questions/38464552/what-is-the-meaning-of-the-dotted-file-icon-in-visual-studio-2015-solution-explo So the first one then...exists but not included in the project.

Klarth•10mo ago

KingdawanageOP•10mo ago

omg

Klarth•10mo ago

You should be able to do this

KingdawanageOP•10mo ago

I just added the pictures from the need to the install folder I have just included it

Klarth•10mo ago

.NET doesn't have this issue. This is an issue with the old csproj that the .NET Framework uses.

KingdawanageOP•10mo ago

How to i migrate to .NET

Klarth•10mo ago

Either run Upgrade Assistant or recreate project. It's a pain I don't have the time to walk through.

KingdawanageOP•10mo ago

Understandable. Which would you recommend

Klarth•10mo ago

Probably recreate. You don't have that much in terms of files. Probably no breaking APIs either.

KingdawanageOP•10mo ago

Hmm. Okay. I really appreciate your help and everything to be very honest. I have one more favour but i dont know if i should ask

Klarth•10mo ago

Go for it.

KingdawanageOP•10mo ago

You seem to know a lot about .NET and you use Avalonia which i heard is for season vets. I was wondering if you had time to mentor 🥺 . I really want to be a fullstack .NET dev It would be a really great help to haev someone to learn from

Klarth•10mo ago

I probably don't have the time for that, TBH. Myself and others are around in #gui to answer questions though. In general, there are a lot of professional devs in the server with much more experience than I have.

KingdawanageOP•10mo ago

alright. I appreciate the help though. I will do more research and laern .NET

Gaming

Programming

Image not showing in wpf button