Add icon to button with Visual Studio - c#

I have a simple question. I want to add an icon to a C# WPF Button control. I do not want to have to write C# code, or edit XAML to do this.
However, when I click on the button in the Designer, there is no option under properties to set an image. How do you do this through the Visual Studio GUI?


The easiest/best way to do this is to add an Image control as the Content of the Button.
The property window is somewhat limited in what it can do, and only supports text for that property. This does include bindings, so you could use an Image StaticResource. I couldn't find an easy way to create one from the property designer either though.
So basically, you are stuck with editing XAML. Either with a direct Content property or by creating an element in Resources Its not that bad! Just write:
<Button>
<Button.Content>
<Image ImageSource="..."/>
</Button.Content>
</Button>
Now of course, you could create a custom button that exposed that property via the designer, but thats even more XAML. Its WPF, you are going to have to write XAML, so learning how should be a priority.


Visual Studio 2015:
create a button.
create an image.
set the source of the image to the right file of your resources (e.g. a .png file that you included to your project)
drag the image over the button.
A text shows that asks you to press ALT to replace the text of the button with the image.
I currently don't know how to get both, image and text, for a button.
in XAML, it looks like this:
<Button x:Name="button12" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="75">
<Image x:Name="image" HorizontalAlignment="Left" Height="24" VerticalAlignment="Top" Width="24" Source="gfx/new.png"/>
</Button>


you could install FontAwesome on your Computer
Goto http://fontawesome.io and download. Open the downloaded ZIP file and inside the font folder there should be .otf file, Install that!
and in the content of the button you could simply type the desired icons code!
For eg:
if you want your button to look like this
then install FontAwesome Font
and in your button tag type Content="" FontFamily="FontAwesome"
More codes can be found here http://fontawesome.io/cheatsheet/

Related

How to get an icon in stackPanel in a XAML file

I am new to XAML and C#
I have an icon created already in a project and and I have to use this icon whenever I select one of the option from the dropdown menu.
I made a stackpanel in XAML file
<StackPanel Name="stackPanelforIcon">
</StackPanel>
In the code behind file I have different cases for the dropdown menu.
case IconOnSelect:
?????? = IconList.NewIcon;
This NewIcon is the one already created and I am using the source also for this
using IconProject.Iconlists;
On writing IconList.NewIcon I am not getting any error, it is referenced correctly.
What should I write at ?????? to reference it. Is there any other way apart from using stackPanel to include an icon

A StackPanel cannot show an icon on it's own. You need a control for it, for example an Image.
<StackPanel Name="stackPanelforIcon">
<Image x:Name=theImage" />
</StackPanel>
Then you can use your Icon in your code behind like this:
this.theImage.Source = IconList.NewIcon;
You may need to convert your value, you never said what type it actually is.
Please note that using code-behind is not the preferred way with WPF. Using MVVM is way easier and more natural working with WPF, using code-behind you will fight WPF all the way. Using MVVM, this could be:
<StackPanel Name="stackPanelforIcon">
<Image Source="{Binding CurrentImage}" />
</StackPanel>
with your ViewModel having a property called CurrentImage that you would set when you want to change it. Don't forget to implement INotifyPropertyChanged for the changes to take effect though.

Image is not displaying in WPF Application?

I'm trying to display an image in wpf application but the image is not displaying in my application, someone give solution for this..
<Image Source="Images/LoadTestInfo.png" Stretch="Fill" HorizontalAlignment="center" Width="1024" Height="700" VerticalAlignment="center" />
Thanks in Advance...
Regards
R.Karthik

Set Build Action as Content and select Copy if newer.

Alright, So you need to right click your solution, and ensure that you have added your image. Do this by right clicking then -> add -> new item. Once you have done this, just change the source of you image and it should display the image. Also set build action to resource.

C# xaml image not showing up in application

When I try to display some smaller (72x72) images in my xaml file as a 20x20 image, they work fine, but when I try to use one that's 96x96, they just don't show up. Here is the code:
<Image Source="/Images.Toolbox;component/Images/defaultIcon.jpg" Height="20" Width="20" Stretch="None"/>
This is how it looks like with the 72x72, how I want it to look.
And this is how it looks when I try to use my 96x96 image.
The working one is a .ico, .png also works. The nonworking one is a .jpg, but this shouldn't matter should it?

Visual Studio > Solution Explorer
right-click on the image file > Properties
make sure the Build Action is set to Resource.

Image not displaying at runtime C# WPF

I have been trying to learn C# but I'm coming across a lot of problems. I am trying to display an image in WPF but for some reason, the image won't show! It appears on the Visual Studio editor but when I run the application it doesn't appear.
Here is some of my code:
This is how I'm trying to display the image:
<Image HorizontalAlignment="Left" Height="100" Margin="273,147,0,0"
VerticalAlignment="Top" Width="100" Source="image.jpg"/>
I have also tried using this:
Source="pack://application:,,,/image.jpg"
Thanks for your help!

In your project:
Create a folder say "img", right click on it and select add existing item add image to folder
Go to properties of the added image, set Build Action as Resource.
It worked for me.
In XAML
<Image HorizontalAlignment="Left" Name="MyImg" Height="80" Margin="273,147,0,0"
VerticalAlignment="Top" Width="100" Source="/img/Desert.jpg"/>

If none of these work, try changing the Build Action to Content.
That's what worked for me after struggling for a long time with this.

Go to the properties for the image in Visual Studio and change "Build Action" to "Resource" and "Copy to Output Directory" to "Copy if newer".
I had to do a rebuild, but then it worked. Cred to swapnil.

please drag the image to a image source,it will be like this /img/image.jpg"/
<Image HorizontalAlignment="Left" Height="100" Margin="273,147,0,0"
VerticalAlignment="Top" Width="100" Source="/img/image.jpg"/>

If none of the above works, try Rebuilding your application from the build menu. Not "Build", but "Rebuild"

For example, this is your project structure
+ProjectName
+--+imagesFolder
| +--amogus.png
|
+--App.xaml
+--MainWindow.xaml
+--etc.
and you want to access the to amogus.png in your xaml window,
You have two ways:
note this way the imagesFolder will be visible in the release build to users
to set amogus.png Build Action to Content and
Copy to Output Directory to Copy always more info,
then rebuild from the build menu, then add this to the window xaml
<Image Source="pack://siteoforigin:,,/imagesFolder/amogus.png" ></Image>
note this way the imagesFolder will be not visible in the release build to users
to set amogus.png Build Action to Resource and
Copy to Output Directory to Do not copy or blank more info,
then rebuild from the build menu, then add this to the window xaml
<Image Source="/imagesFolder/amogus.png" ></Image>
more detail

Right click images on the Solution Explorer, choose Properties and then set the Build Action as Resource.

Did not have to do a clean and rebuild. I tried every combination listed above (I am in VS2017)
Go to Project->Properties->Resources
Select File (drop down with choices of strings, images, icons...)
Click Add Resource->Existing File
Navigate to the image and import it
VS identifies it as an image (mine is PNG) and switches the view to show Image resources
Select the thumbnail of the image and in the Properties of the Image (type should be Bitmap) set Persistence to Embedded in resx
I saved and closed Project Properties as I got confused here before
Go to the Resources folder under the project and select the image (it should be listed for you)
Select the image and set the BuildAction to Embedded Resource
I set the File Action to Copy if Newer
From here I move back and forth between Debug and runtime, various combinations of clean, build and publish and the image has FINALLY been displayed every time.
Last tidbit, the XAML in the dialog looks like this:
<Image Source="pack://siteoforigin:,,,/Resources/DeathSpiral.png" />
I have updated several projects that were supposed to display graphics but didn't always do so using the steps above. They all work now. Tested in both VS2017 and VS2019 and no errors so far.

Pack Strings in WPF User Control Library

I had created a User Control in my main Project Originally. I have now created a new Project that uses the WPF User Control Library Template and moved my control there.
The issue I am having, is my control uses images as the content for buttons. I have moved the images along with the controls into the new project, but I cannot get the Pack URIs to work. The Control and the images both reside in the same folder of the project called MyControl an the new Project name is MyControls.
I have tried:
<Button Name="Button1" ToolTip="Button1" Click="Button1Action">
<Image Source="pack://application:,,,/MyControl/image1.png" />
</Button>
and
<Button Name="Button1" ToolTip="Button1" Click="Button1Action">
<Image Source="pack://application:,,,MyControls;/MyControl/image1.png" />
</Button>
I also tried adding the images to the Resources.resx file, then in the Code Behind converting that to a BitmapSource, creating an Image control, setting its source to the BitmapSource, and then setting the Button.Content to the Image. I assume that since the png has a transparent background, it was messed up in the process, it was displayed with a black background using this method.
The Build Action for the Image in the project is set to Resource, so I assume I am just missing the correct Pack string.

Your second pack uri was close, but you missed one word (and a slash)! It should be
<Image Source="pack://application:,,,/MyControls;component/MyControl/image1.png" />

Categories