WPF custom control library image resource

Question

Following answers from : Images in a WPF Custom Control Library and How can I get a BitmapImage from a Resource?

I made a simple custom control library:

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfCustomControlLibrary1">
<Style TargetType="{x:Type local:CustomControl1}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:CustomControl1}">
                <Border Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                    <Grid>

                        <StackPanel Orientation="Vertical">
                            <StackPanel Orientation="Horizontal">
                        <Label Content="imageone.png" />
                        <Image Source="imageone.png" />
                            </StackPanel>
                            <StackPanel Orientation="Horizontal">
                                <Label Content="/imageone.png" />
                                <Image Source="/imageone.png" />
                            </StackPanel>
                            <StackPanel Orientation="Horizontal">
                        <Label Content="Resources/imageone.png" />
                        <Image Source="Resources/imageone.png" />
                             </StackPanel>
                            <StackPanel Orientation="Horizontal">
                                <Label Content="/Resources/imageone.png" />
                                <Image Source="/Resources/imageone.png" />
                            </StackPanel>
                            <StackPanel Orientation="Horizontal">
                                <Label Content="../Resources/imageone.png" />
                                <Image Source="../Resources/imageone.png" />
                            </StackPanel>
                            <StackPanel Orientation="Horizontal">
                                <Label Content="..Resources/imageone.png" />
                                <Image Source="..Resources/imageone.png" />
                            </StackPanel>
                            <StackPanel Orientation="Horizontal">
                                <Label Content="..//Resources//imageone.png" />
                                <Image Source="..//Resources//imageone.png" />
                            </StackPanel>
                            <StackPanel Orientation="Horizontal">
                                <Label Content="pack://application:,,,/imageone.png" />
                                <Image Source="pack://application:,,,/imageone.png" />
                            </StackPanel>
                            <StackPanel Orientation="Horizontal">
                                <Label Content="pack://application:,,,/Resources/imageone.png"/>
                                <Image Source="pack://application:,,,/Resources/imageone.png"/>
                            </StackPanel>
                            <StackPanel Orientation="Horizontal">
                                <Label Content="pack://application:,,,/WpfCustomControlLibrary1;v1.0.0.0;Resources/imageone.png"/>
                                <Image Source="pack://application:,,,/WpfCustomControlLibrary1;v1.0.0.0;Resources/imageone.png"/>
                            </StackPanel>

                        </StackPanel>
                    </Grid>    
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

And added imageone.png as a resource:

With build action set to resource.

I have tried adding the file to the themes folder holding the generic.xaml file. And changed the paths accordingly, but it still produces this output:

with no images.

Whats the correct way to reference an image in a custom control library?

I have also tried to reference the images in an application:

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfApplication1"
    xmlns:custom="clr-namespace:WpfCustomControlLibrary1;assembly=WpfCustomControlLibrary1"
    mc:Ignorable="d"
    Title="MainWindow" Height="500" Width="500">
<Grid>
    <!--<custom:CustomControl1></custom:CustomControl1>-->
    <StackPanel Orientation="Vertical">
        <StackPanel Orientation="Horizontal">
            <Label Content="Resources/imageone.png" />
            <Image Width="20" Height="20" Source="Resources/imageone.png" />
        </StackPanel>
        <StackPanel Orientation="Horizontal">
            <Label Content="/Resources/imageone.png" />
            <Image  Width="20" Height="20" Source="/Resources/imageone.png" />
        </StackPanel>
        <StackPanel Orientation="Horizontal">
            <Label Content="pack://application:,,,/Resources/imageone.png"/>
            <Image Width="20" Height="20" Source="pack://application:,,,/Resources/imageone.png"/>
        </StackPanel>
    </StackPanel>
</Grid>

in designer view I can see a preview of the images which tells me the paths are correct. However the output still doesn't produce the images.

I am guessing it is some sort of build order problem? All help appreciated.

EDIT

Switching the image to an Embedded Resource works for the window but not the control.

Edit2

Switching to an embedded resources works for the control library however, the image also needs to be in the solution that runs the control. Is there a way where the image will just be from the DLL and no need for the user to reference it?

Try setting the _Build Action_ for your `imageone.png` file to either _Content_ or _Embedded Resource_ and rerunning your application. — Drew Noakes, Mar 22 '17 at 17:12
Swapping to _embeded resource_ instead of _resource_ has worked for the images shown in the window but not the control — Jack Miller, Mar 22 '17 at 17:19
If the image you're trying to reference is in another assembly, then you have to include that assembly's name in the pack URI. — Drew Noakes, Mar 22 '17 at 17:22
Switching to _content_ has worked for the control. Much appreciated — Jack Miller, Mar 22 '17 at 17:22
You should not add images as project resources. Instead, just directly add an image file (e.g. a PNG) to your project structure, e.g. to an `Images` project folder. Then set its Build Action to `Resource` (nothing else!), and load it by a [Resource File Pack URI](https://msdn.microsoft.com/en-us/library/aa970069(v=vs.110).aspx). See e.g. here: http://stackoverflow.com/a/25714375/1136211 — Clemens, Mar 22 '17 at 19:11
@Clemens Might not have been clear by my wording: _"I have tried adding the file to the themes folder"_ — Jack Miller, Mar 22 '17 at 19:21
Then the Image's Source should be `pack://application:,,,/Themes/imageone.png` (or short in XAML, `Themes/imageone.png`). A full Pack URI including assembly name would be `pack://application:,,,/WpfCustomControlLibrary1;component/Themes/imageone.png` (if `WpfCustomControlLibrary1` actually is the assembly name) — Clemens, Mar 22 '17 at 19:36
Yes and that was already tried, will update the post to include that — Jack Miller, Mar 22 '17 at 19:47

score 2 · Answer 1 · answered Mar 22 '17 at 17:23

2

Try setting the Build Action for your imageone.png file to either Content or Embedded Resource and rerunning your application.

answered Mar 22 '17 at 17:23

Drew Noakes

300,895
165
679
742

Explained the problem with your answer in original post – Jack Miller Mar 22 '17 at 17:47
Back to square one really – Jack Miller Mar 22 '17 at 17:50

WPF custom control library image resource

1 Answers1