How to set relative uri from xaml in wpf?

Question

So I am wondering where the relative uri should be set relative to. I had assumed it was the main project.

I have the image stored under a folder images. The images folder is directly under the project DaedalusGraphViewer under the solution which also has the same name (DaedalusGraphViewer).

I had assumed that the relative uri was relative to the project, but I don't seem to be having any luck. Alternative ideas such as doing it from code behind are also welcome. I have done it from code behind before so I can probably figure that out since I will be able to debug it better there, but I would prefer to just do it in xaml.

I am using

<ResourceDictionary Source="DaedalusGraphViewer/ResourceDictionaries/GraphViewerBrushes.xaml" />

to do the same thing elsewhere, so I don't see what I'm doing wrong.

  <Button 
    Height="50" 
    VerticalAlignment="Top"
    >
    <Image Width="50" Height="50" Source="Images/zoominbutton.bmp" Stretch="Fill"/>
  </Button>

edit: still no luck, not sure what I'm doing wrong.

i've revised the code to use a much smaller test case.

ideally i would like to be able to set the image path from xaml, but for now i'm trying code behind just to see if I can figure out anything that will make it work.

<Window 
  x:Class="TestApp.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Window1" Height="300" Width="300"
  Loaded="Window_Loaded"
  >
    <Canvas x:Name="MainCanvas">
    <!--<Image x:Name="ImageSource2" Width="50" Height="50" Source="/DaedalusGraphViewer;component/images.jpg" Stretch="Fill"/>-->
      <!--<Image x:Name="imagetest" Stretch="Fill" Width="50">
        <Image.Source>
          <BitmapImage
              DecodePixelWidth="200"
              UriSource="/Images/images.jpg"/>
        </Image.Source>
      </Image>-->

    <!--<Image Width="50" Source="../../Images/images.jpg" Stretch="Fill"/>-->
  </Canvas>
</Window>


namespace TestApp
{
  /// <summary>
  /// Interaction logic for Window1.xaml
  /// </summary>
  public partial class Window1 : Window
  {
    public Window1()
    {
      InitializeComponent();
    }

    private void Window_Loaded(object sender, RoutedEventArgs e)
    {
      Image i1 = new Image();
      Uri relativeuri = new Uri("/DaedalusGraphViewer;component/images.jpg", UriKind.Relative);
      BitmapImage bmi = new BitmapImage(relativeuri);
      i1.Source = bmi;
      MainCanvas.Children.Add(i1);
    }
  }
}

My goal for now is just to display an image on the main canvas. When do I need to use an absolute uri and when can I use a relative Uri. I have read lots of examples of xaml using relative uris so I thought that would be possible.

Answer 1

I got it to work using "pack://application:,,,/images.jpg" as the source. However, I'm still confused as to why I can't get a relative pack uri to work like this: http://msdn.microsoft.com/en-us/library/aa970069.aspx

I thought I could just use a source = "/images.jpg"

I read elsewhere that there is a default string to uri converter that converts the relative uri to an absolute uri based on the assembly being built.

anyway if anyone knows how to get the relative pack uri to work or why it doesn't work, please let me know.

I also got ebattulga's answer to work, so I'm selecting it as the right answer. However, I would like to understand a bit better why the relative pack uri from the pack uri site doesn't work.

ps - It doesn't appear to work with the image set to content. I got it working with the image build type set to resource

ps2- I haven't been able to get the same code to work with .bmp extension images. Not sure what is going on.

Answer 2

Replace YOURAPPNAME

<Image Width="50" Height="50" Source="/YOURAPPNAME;component/Images/zoominbutton.bmp" Stretch="Fill"/>