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
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 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.
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.
I have a class library that is essentially a collection of forms to be run. Consider it a module/plugin in a larger program, that can be developed independently, all the larger program cares about is the DLL (and interface).
Running the main form of the class library is fine and works well. My issue is with pictures. I've set up an Images folder in the class library, added an image, set it's Build Action to Embedded Resource and then rebuilt the project, but the images won't appear in the main program.
XAML:
<Button x:Name="btnAdd" Command="{Binding Add}">
<StackPanel Orientation="Horizontal">
<Image x:Name="imgAdd" Source="Resources/Add.png"/>
<Label>New</Label>
</StackPanel>
</Button>
The interesting part though, is that if I create a BitmapSource in code-behind and assign it to imgAdd in the constructor of the form, it works as expected. Does anyone have any ideas as to why this might be the case?
Use Pack URIs for your images.
<Button x:Name="btnAdd" Command="{Binding Add}">
<StackPanel Orientation="Horizontal">
<Image x:Name="imgAdd" Source="pack://application:,,,/ReferencedAssembly;component/Resources/Add.png"/>
<Label>New</Label>
</StackPanel>
</Button>
It turns out that the correct Build Action is actually Resource rather than Embedded Resource. Thinking about it now, Embedded Resource does seem more like a reference to a Resource in another DLL.
I inadvertently found the answer in this post while trying to improve my code.
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=""