I write the following code to show image over the button but when i run the project it is not displaying anything.
<Button x:Name="Employee">
<Button.Template>
<ControlTemplate>
<Border HorizontalAlignment="Center" VerticalAlignment="Center" >
<Image Source="images/Employee.png"
Width="50"
Height="50"/>
</Border>
</ControlTemplate>
</Button.Template>
<TextBlock>Add New Epmloyee</TextBlock>
</Button>
The relative path is correct? The folder "images" must be located in the same folder where the Window's XAML is saved.
Ensure that the Build Action for file "Employee.png" is "Resource".
I just tried your xaml code and it works fine. please make sure that you have images folder under your root directory and an image below it with name employee.png
Finally i nail the problem. The problem was that i create the folder by going directly to project folder through My Computer that's why it was not showing in Visual studio. Now I add the folder from VS and drag the images in it. And Woah! it works fine. Thanks to all of you.
Related
so i have a button whos XAML is as follows:
<Grid>
<!--MoreCode -->
<Button x:Name="Camera2" Grid.Column="2" Grid.Row="7">
<Grid>
<Image Source="images\tabNormal.png"></Image>
<Image Source="images\OfflineRed_21x76.png" Height="18"
VerticalAlignment="Bottom" Margin="0,0,0,5"></Image>
<TextBlock HorizontalAlignment="Center" Text="Camera 2"
VerticalAlignment="Center"/>
</Grid>
</Button>
<!--MoreCode -->
</Grid>
and it Previews ok.
But when i Run the project I get this:
In the end I will end up making this button a standard control, but i want to understand why it does not seem to build right when I run.
in Closing, the problem seemed to be something with the compiler not referencing the images properly (perhaps because I added the images folder to the project after building everything?), the solution was to add the full path to the images i.e. C:\...folders...\images\filename.png as opposed to the initial images\filename.png once this was done once for one file all files in that folder are readable and you can return to a relitive location. Everything seems to be working fine now even after deleting and re adding the files/folder
I samples of FlowDocument in C# show images pointing to a location on disk in the xaml file. If I want to point source to image inside program as resource or how do i set the source setting then? I ship my program flowdocument as part of the program and I cant install images on disk. I want them as resource inside the program.
<InlineUIContainer >
<Image Margin="2,0" Width="50" Source="C:\sample.jpg" ></Image>
</InlineUIContainer>
You should set image's Build action to Resource and use following code:
<InlineUIContainer >
<Image Margin="2,0" Width="50" Source="pack://application:,,,/YourAssemblyName;Images/sample.jpg"></Image>
</InlineUIContainer>
sample.jpg must be in folder "Images" in your project in this example.
Following problem:
I just have an Image box on my window with following XAML Code:
<Image x:Name="image1" HorizontalAlignment="Left" Height="100" Margin="261,161,0,0" VerticalAlignment="Top" Width="100" Stretch="Fill" IsHitTestVisible="True" Source="Resources/Jellyfish.jpg"/>
There are no errors and the image is shown in editing mode:
Screenshot 1
But when I debug the program, the Image doesn't appear :(
Screenshot 2
Does anybody see a mistake?
Regards
MightyM
All you have to do is
Ensure the your project has a folder called Resources
Your Resources folder has a file called jellyfish.jpg
The properties window of JellyFish.jpg shows the the Build Action is set to "Resource"
3 will ensure that the JellyFish.jpg is embedded into your assembly as a resource stream. If you don't want an embedded resource you can look at PACK URI for your other choices
I'm using the following code I found on a question a few hours ago to make a button have an image:
<Button Name="bPlay" Height="70" Width="70" Margin="359,480,349,11">
<Button.Template>
<ControlTemplate>
<Border HorizontalAlignment="Center" VerticalAlignment="Center">
<Image Source="pack://siteoforigin:,,,/Resources/play.bmp" Width="70" Height="70" />
</Border>
</ControlTemplate>
</Button.Template>
</Button>
The problem is that for some reason it looks fine on Visual Studio, but when I run the program those buttons won't appear. I can't find the problem and I'm a little bit stuck. The image play.bmp is added to resources obviously, but still I don't know what the problem is, thanks!
"siteoforigin" in the URI indicates the file must be in the given path relative to the directory of the executing assembly. Your executable file is most likely in a bin/Debug folder. It's looking in the subdirectory of the executable, which probably doesn't exist ("bin/Debug/Resources/play.bmp").
If you want to link to the file that way then you have to tell Visual Studio to copy it to the output folder (from the Properties pane). Or copy it yourself.
Or better yet you should link to it as a resource and it will get embedded in the application. Set the file's build type to Resource in the properties pane, and link to it using the relative path in your project folder. In this case, literally write "Resources/play.bmp" in the XAML.
Try simplifying your code, perhaps just pull the image out and see if that displays.
<Button Name="bPlay" Height="70" Width="70" Margin="359,480,349,11">
<Image Source="pack://siteoforigin:,,,/Resources/play.bmp" Width="70" Height="70" />
</Button>
should be valid as well
I'm new to WPF, facing a problem in locating an image file on a button.
It's not working when I put a relative path, as shown(Window1.xaml):
<Button Height="23" HorizontalAlignment="Right" Margin="0,33,38,0" Name="button1" VerticalAlignment="Top" Width="24" Background="AliceBlue" OpacityMask="Cyan" Grid.Column="1" Click="button1_Click">
<Image Source="Folder-icon.png"></Image>
</Button>
However, it's working when i put an absolute path:
<Button Height="23" HorizontalAlignment="Right" Margin="0,33,38,0" Name="button1" VerticalAlignment="Top" Width="24" Background="AliceBlue" OpacityMask="Cyan" Grid.Column="1" Click="button1_Click">
<Image Source="D:\Folder-icon.png"></Image>
</Button>
I try to describe my folder structure in picture.
Hope someone can guide me to load the image to the button within the same workspace using relative path.
If you compare the Image.Source values for both cases, you will see in the cast that it does work the underlying Uri looks like:
file:///D:/Folder-icon.png
In the case where it does not work, the Image.Source value is null. The problem is that without the full path, WPF assumes it is a relative path to an embedded resource, not a file on disk.
This link provides a detailed description of URIs. But you'd need to use something like the following to use relative paths.
pack://siteoforigin:,,,/Folder-icon.png
One other note, the default path will be in the <Your Project Path\bin\Debug folder, not the <Your Property Path> folder.
if is because you are not giving it correct path .Here is sample
/EmailScrapperWpf;component/Images/SearchDog.gif
it is like /projectname;then path where your image is placed
i think in your case it should be
<Image Source="/WPF1;Folder-icon.png"></Image>
when you Select image from the properties when you select the Image and press F4 there source navigate to the image then see what path is displayed after selecting the image and you have to place that path in Source=""