WPF Image External Resource

Question

I have a custom control library with a resouce dictionary that references an image in the same custom control library.

I then have a WPF application with a refernce to the custom control library which contains a resouce dictionary with a style the utilizes the image.

When I try to use the style from the external resouce I get an error telling me it can't find the image referenced in the style.

I have a sample solution made that I can send anyone who needs it, but I am hoping there is someone out there who just knows the answer...

Thanks, Aaron

Answer 1

When you add the image to your project in VS, it has a property called "Copy to Output Directory". Set its value to "Always copy" or "Copy if newer". Then rebuild. I'll bet that fixes it.

Answer 2

Ok, this is what I found... If you have an external resouce dictionary with a style:

<Style x:Key="Arrow" TargetType="{x:Type Button}">
<Setter Property="Template">
  <Setter.Value>
    <ControlTemplate TargetType="{x:Type Button}">
      <StackPanel Orientation="Horizontal" Width="Auto" Height="20">
        <Image Source="/Images/RightArrow.png" />
      </StackPanel>
    </ControlTemplate>
  </Setter.Value>
</Setter>

and the image is in the Images folder of the external assembly the above source reference works just fine when you are in your development environment, but once you reference the assembly the relative path to the RightArrow.png is lost to the referencing WPF App. So the answer is to use the following for the source:

        <Image Source="/Skin;component/Images/RightArrow.png" />

Note the pick URI instead of the relative path. This assures that the referencing application knows where to really find the image.

Answer 3

I am asking question after these solutions. I've met the same problem like Aaron did. I've did try the solutions you guys suggested but still getting the "System.Windows.Markup.XamlParseException occurred" error. The project is built successfully; the images show properly in the design mode; but failed at run time. The code: The resource dictionary locates in "niuDesktopShare" project: /niuDesktopShare/niuResourceDictionary.xaml

The Button Style:

<Style x:Key="TransparentButtonStyle" TargetType="{x:Type Button}">
    <Setter Property="Focusable" Value="False" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border x:Name="Border" Margin="2,1,2,1" Padding="2,1,2,1" BorderThickness="1" Background="Transparent" CornerRadius="2,2,2,2">                        
                    <ContentPresenter  HorizontalAlignment="Center" VerticalAlignment="Center" />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource SolidBorderBrush}" />
                        <Setter TargetName="Border" Property="Background" Value="{StaticResource NormalBrush}" />
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="Border" Property="Opacity" Value="0.2"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Inherited button style as Backward Button Style:

<Style x:Key="BackwardButtonStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource TransparentButtonStyle}">
    <Setter Property="Content">
        <Setter.Value>
            <Image x:Name="imgBackward" Source="/niuDesktopShare;component/Images/Backhot32.ico" Height="32"/>
        </Setter.Value>
    </Setter>
</Style>

The xaml code uses the resource dictionary in the other project "niuDesktopContent" /niuDesktopContent/MyToolBarTray.xaml:

    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="/niuDesktopShare;component/niuResourceDictionary.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>

   <DockPanel Name="toolBarTray1" Background="Transparent" SnapsToDevicePixels="True">
    <StackPanel Name="toolBarBrowser" Orientation="Horizontal" DockPanel.Dock="Left" SnapsToDevicePixels="True">
        <Button Name="buttonPrevious" Command="niu:BrowserCommands.Back" Style="{StaticResource BackwardButtonStyle}"/>
    </StackPanel>
</DockPanel>

The image locates in /niuDesktopShare/Images/Backhot32.ico, the "copy to output directory" is changed to "copy always"

Thanks!