locked
Image Source is not set in generic.xaml in WinRT ? RRS feed

  • Question

  • Hi All,

    I am actually trying to create the custom control in WinRT platform. I just started by setting the Source for the Image tag in the generic.xaml template using the following way.

    <Image Source="MyAssembly;component/Images/WordArt.png" Width="100" Height="300"/>

    These all done in my Custom control's class library.

    I just then referred that control in MetroStyle Application. But it does not display the Image .. I don't know why it is ?,. Whether anything i am doing wrong ?. Could you please help me ?.

     

    Regards,

    David C 


    • Edited by David alice DD Monday, September 26, 2011 7:24 AM Typo mistake
    Monday, September 26, 2011 7:24 AM

Answers

  • @David - the component syntax you are using is not valid in Metro style apps.  Assuming WordArt.png is content (not embedded resource) in your MyAssembly it would be like this:

    <Image Source="ms-resource://MyAssembly/Files/Images/WordArt.png" />


    Tim Heuer | Program Manager, XAML | http://timheuer.com/blog | @timheuer
    • Marked as answer by David alice DD Tuesday, September 27, 2011 9:43 AM
    Monday, September 26, 2011 3:16 PM

All replies

  • @David - the component syntax you are using is not valid in Metro style apps.  Assuming WordArt.png is content (not embedded resource) in your MyAssembly it would be like this:

    <Image Source="ms-resource://MyAssembly/Files/Images/WordArt.png" />


    Tim Heuer | Program Manager, XAML | http://timheuer.com/blog | @timheuer
    • Marked as answer by David alice DD Tuesday, September 27, 2011 9:43 AM
    Monday, September 26, 2011 3:16 PM
  • Hi Tim,

     

    I already tried this. But it did not give success to me. I dont know the main problem.

     

    Regards,

    David C

    Tuesday, September 27, 2011 3:51 AM
  • Hi David,

    I test it in my side, a simple C# metro project, and add the reference to one class library (WinRT library), and I declare one control in this library, with one image as its content. I can view the image in my main metro style app project.

    Did you code same with me, if it is possible could you please share this simple project to us, or provide some code here? Thanks.

    Sincerely,


    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Tuesday, September 27, 2011 8:43 AM
  • Hi Bob,

    Thanks, Now the problem has been resloved.

    Regards,

    David C

    Tuesday, September 27, 2011 9:43 AM
  • Hi Tim,

     

    would it be possible for you or somebody to write a blog article on how to use resources in Metro? there is a lot of confusion out there how to load "Embedded Resources", "Content" from the same application or a DLL referenced by an application.

    Since there is no "Page" compile option in DLLs for XAML application, how do you build XAML controls hosted in a DLL would be another nice article

     

    Thanks

    Chris


    Chris Muench Embedded MVP
    Monday, November 7, 2011 7:41 PM
  • This has changed in the CP, correct?

    I tried

    <ImageBrush x:Key="MyGlasSlider" Stretch="Fill" ImageSource="ms-appx:///<MyDLL>/Images/slider.png"/>

    but that did not return any valid ImageBrush.

    In the past you had to declare the slider.png as "Resource" but that property does not exit in the CP anymore.

    What it the correct setting for pointing at an image resource embedded in a DLL and how does the image has to be declared in the DLL?


    Chris Muench, MVP

    Tuesday, March 13, 2012 4:59 AM
  • Are you sure the image is actually embedded in the DLL now?  We (the runtime and the ms-appx protocol) don't support an embedded syntax.  Resource management in WinRT is different.  Your files are loose file assets in your package (not embedded).  Given this you could just reference them using a relative URI.  If you are, however, embeddeding your resources in your DLL, you will have to manage extracting them yourself.

    Tim Heuer | Program Manager, XAML | http://timheuer.com/blog | @timheuer

    (if my post has answered your question, please consider using the 'mark as answer' feature in the forums to help others)

    Tuesday, March 13, 2012 5:19 AM
  • Well they are embedded right now in my Silverlight and my Windows Phone DLLs :)

    How is metro planning on supporting 3rd party controls that other ISVs can use in their apps if these controls require images to render correctly?

    Ship the images separate and the ISV has to add them to their project as content?

    I rather have everything "encapsulated" in my control (DLL) and hand that DLL to the ISV than give him all my mini-bitmap assets.

    If you say "manage extracting them yourself" - is there a sample for that? Can such a "Manual extraction" be referenced in XAML and ResourceDirectories?


    Chris Muench, MVP

    Tuesday, March 13, 2012 5:26 AM
  • Chris - take a look at my recent post on this exact note and introducing the Extension SDKs as a mechanism here:

    http://timheuer.com/blog/archive/2012/03/07/creating-custom-controls-for-metro-style-apps.aspx


    Tim Heuer | Program Manager, XAML | http://timheuer.com/blog | @timheuer

    (if my post has answered your question, please consider using the 'mark as answer' feature in the forums to help others)

    Tuesday, March 13, 2012 5:31 AM
  • that is a great blog article! I will go through this in details once I am ready to publish my control.

    I can see a "ResourceLoader" but only for strings...how to get to images?

    I assume the way is to "redist" your images at the end in your package, together with the Generic.xaml file and in the same (or sub)folder, right?

    Compared to the cleaner way in Silverlight and Windows Phone DLLs, I am not sure this will be an improvement. What is the reasoning behind this?


    Chris Muench, MVP

    Tuesday, March 13, 2012 5:50 AM
  • @Chris - please feel free to email me as you work through this.  My team owns this experience for XAML controls so I can help as needed.

    As for images, you just reference them as you would using a relative path.  So if in your project you have an image located at "Foo/Bar/Baz.png" then you would simply reference that as such:

    <Image Source="Foo/Bar/Baz.png" />

    You can be even more explicit and use the full ms-appx protocol as you previously were using (but making sure the image is not embedded).  Looking at the generated PRI file (using makepri dump) will help you understand how this all works.  Additionally from code you can refer to images using a method like:

    var foo = new Uri(this.BaseUri, "Foo/Bar/Baz.png");

    As to the 'why' on this infrastructure, we have to remember that this is not managed code executing and we needed a common infrastructure for all languages we support, including native.  Since native had a different mechanism of resource embedding and so did managed, we decided on the common/new method of using the new resource management APIs (ResourceManager/ResourceLoader) to accomplish our goals.  This does mean some new understanding for control developers wishing to distribute to third parties.

    Tim Heuer | Program Manager, XAML | http://timheuer.com/blog | @timheuer

    (if my post has answered your question, please consider using the 'mark as answer' feature in the forums to help others)

    Tuesday, March 13, 2012 3:10 PM
  • Tim,

    I have a custom control where I am using a image file whose BuildAction is set a Content. I am setting it in Generic.xaml file as shown below:

    <Setter Property="Background">
            <Setter.Value>
                    <ImageBrush ImageSource="ms-appx:///CustomControl/controlBackground.png" Stretch="Fill"/>

            </Setter.Value>
    </Setter>

    Now the problem is when I am adding reference to the control library in another project, it is displaying the error 'Payload file controlBackground.png does not exist'. For Silverlight and WPF users I ship the dll without any external dependency needed. Now in Metro how can I embed the image inside the dll itself? I don't want to ship the image file along with the dll to my end users as discussed here.

    Monday, April 16, 2012 11:25 AM
  • Try this, It actually works

    In Code Behind File:

    Uri uri = new Uri(this.BaseUri,"/Assets/cross.png");

                if(uri.IsAbsoluteUri)
                {
                    ImageSource source = new Windows.UI.Xaml.Media.Imaging.BitmapImage(uri);

                    this.answer_picture.Source = source;
                }

    In XAML File:

    <Image x:Name="answer_picture" Height="141" Width="360" />

    • Proposed as answer by ALI FAYYAZ Monday, March 18, 2013 9:20 AM
    Monday, March 18, 2013 9:20 AM
  • Try this, It actually works

    In Code Behind File:

    Uri uri = new Uri(this.BaseUri,"/Assets/cross.png");

                if(uri.IsAbsoluteUri)
                {
                    ImageSource source = new Windows.UI.Xaml.Media.Imaging.BitmapImage(uri);

                    this.answer_picture.Source = source;
                }

    In XAML File:

    <Image x:Name="answer_picture" Height="141" Width="360" />

    • Proposed as answer by ALI FAYYAZ Monday, March 18, 2013 9:22 AM
    Monday, March 18, 2013 9:22 AM