›

How use images with UWP?

voidstreamvoidstream FRMember ✭✭✭
edited November 2017 in Xamarin.Forms

Hello,

I open my project to UWP and i don't understand the process for import images.
"Universal Windows Platform (UWP) - Place images in the application's root directory with Build Action: Content." ?

I tryed to drag & drop my images in root directory.
I tryed to drag & drop my images in assets directory.
I tryed to right click on the UWP Projet and add existing items.

Best regards.

Best Answers

Answers

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    Tutorial on Xmarin site:
    https://developer.xamarin.com/guides/xamarin-forms/user-interface/images/

  • voidstreamvoidstream FRMember ✭✭✭
    edited November 2017

    @ClintStLaurent said:
    Tutorial on Xmarin site:
    https://developer.xamarin.com/guides/xamarin-forms/user-interface/images/

    I'm from here, i use local images and i don't understand the "Build Action: Content"
    My images works on iOS (imported by Assets) and on Android (drag & drop)

    Edit: ok if i right click on my images i have "Build Action: Content", so which is the good process to include image files?

  • voidstreamvoidstream FRMember ✭✭✭
    Accepted Answer

    I found the solution, UWP require the format when you define the imagesource whereas iOS and Android doesn't need... I was thinking the format was optional because iOS use @2x @3x and more...

  • JohnHardmanJohnHardman GBUniversity ✭✭✭✭✭

    @voidstream

    For UWP, I have my images in an Images folder nested in the UWP project folder. Each has the Build Action set to Content and Copy to Output Folder set to Do not copy. When setting the Source property of Image, the string used starts "Images/"

    Of course, there are other ways of doing it, but that's what I've gone for.

  • JohnHardmanJohnHardman GBUniversity ✭✭✭✭✭

    @NMackay - I like that extension. When I finally make the switch to XAML, I'll be using that :-)

  • NMackayNMackay GBInsider, University ✭✭✭✭✭

    @JohnHardman said:
    @NMackay - I like that extension. When I finally make the switch to XAML, I'll be using that :-)

    Yeah, I went back through an app I wrote about 14+ months ago yesterday, I was moving it up to Forms 2.4.0 for a service release and while refactoring the On Platform stuff in the views I binned about 60 lines of markup using that. Got the app from 2.3.4 to 2.4.0 & all the latest Android support, Google play services, Fast Renderers & Telerik latest in 4 hours, lucky for them i'm not a contractor or I'd stick a zero onto the 4 :smile:

  • voidstreamvoidstream FRMember ✭✭✭
    edited November 2017

    @NMackay
    Thank you for your markup extension I wanted to avoid this system because using markup it decreases performance. Imagine if I have a large list with images, what will be the impact of using a markup extension? I am sure that the decline in performance exists, even if it is, psychologically it bothers me ^^

    In your markupExtension you can replace

                    case Device.iOS:
                    imagePath = SourceImage + ".png";

    By

                    case Device.iOS:
                    imagePath = SourceImage;

    Like android

  • voidstreamvoidstream FRMember ✭✭✭

    @JohnHardman said:
    @voidstream

    For UWP, I have my images in an Images folder nested in the UWP project folder. Each has the Build Action set to Content and Copy to Output Folder set to Do not copy. When setting the Source property of Image, the string used starts "Images/"

    Of course, there are other ways of doing it, but that's what I've gone for.

    But you need manage path, i wanted to avoid that. That why the markup extension is a good idea for that

  • NMackayNMackay GBInsider, University ✭✭✭✭✭

    There is a small overhead with IServiceProvider but if your using compiled XamlC it shouldn't be noticeable. I refactored an app that didn't use this markup extension as mentioned in an aearlier position but I saw no performance degradation and one tabbed page has 5 tabs with listviews with image indicators (although in newer apps we avoid this as it's an overhead).

    You'd have to do some tests with and without and draw your own conclusions. you might save a few code cycles but in a large app, OnPlatform and image handling can get out of hand quickly. It's your own call really.

  • JohnHardmanJohnHardman GBUniversity ✭✭✭✭✭

    @voidstream said:

    @JohnHardman said:
    @voidstream

    For UWP, I have my images in an Images folder nested in the UWP project folder. Each has the Build Action set to Content and Copy to Output Folder set to Do not copy. When setting the Source property of Image, the string used starts "Images/"

    Of course, there are other ways of doing it, but that's what I've gone for.

    But you need manage path, i wanted to avoid that. That why the markup extension is a good idea for that

    Yes, I use a helper that handles adding the path for UWP but not for Android or iOS. The helper is similar to @NMackay's markup extension, but it not a markup extension as I don't currently make much use of XAML.

  • voidstreamvoidstream FRMember ✭✭✭

    @NMackay said:
    There is a small overhead with IServiceProvider but if your using compiled XamlC it shouldn't be noticeable. I refactored an app that didn't use this markup extension as mentioned in an aearlier position but I saw no performance degradation and one tabbed page has 5 tabs with listviews with image indicators (although in newer apps we avoid this as it's an overhead).

    You'd have to do some tests with and without and draw your own conclusions. you might save a few code cycles but in a large app, OnPlatform and image handling can get out of hand quickly. It's your own call really.

    I did not expect any other answer from you, it's always a pleasure to talk to you :)

  • voidstreamvoidstream FRMember ✭✭✭

    @JohnHardman said:

    @voidstream said:

    @JohnHardman said:
    @voidstream

    For UWP, I have my images in an Images folder nested in the UWP project folder. Each has the Build Action set to Content and Copy to Output Folder set to Do not copy. When setting the Source property of Image, the string used starts "Images/"

    Of course, there are other ways of doing it, but that's what I've gone for.

    But you need manage path, i wanted to avoid that. That why the markup extension is a good idea for that

    Yes, I use a helper that handles adding the path for UWP but not for Android or iOS. The helper is similar to @NMackay's markup extension, but it not a markup extension as I don't currently make much use of XAML.

    XAML is really practical, try it and you never leave it after :wink:

  • NMackayNMackay GBInsider, University ✭✭✭✭✭
    edited November 2017

    @voidstream said:

    @JohnHardman said:

    @voidstream said:

    @JohnHardman said:
    @voidstream

    For UWP, I have my images in an Images folder nested in the UWP project folder. Each has the Build Action set to Content and Copy to Output Folder set to Do not copy. When setting the Source property of Image, the string used starts "Images/"

    Of course, there are other ways of doing it, but that's what I've gone for.

    But you need manage path, i wanted to avoid that. That why the markup extension is a good idea for that

    Yes, I use a helper that handles adding the path for UWP but not for Android or iOS. The helper is similar to @NMackay's markup extension, but it not a markup extension as I don't currently make much use of XAML.

    XAML is really practical, try it and you never leave it after :wink:

    ooofft, I agree but it's a hot topic here, if your not used to it you might hate it at 1st but generally your reducing your code footprint using XAML which is always a good thing. Coming to XAML from say Winforms is painful, for ex WPF/Silverlight guys though it's smooth sailing....mostly :smiley: We enforce XAML as a standard for devs in the team unless there is a justifiable cause (like a custom control) to code code based UI stuff. UWP uses XAML too, it's not going away.

  • voidstreamvoidstream FRMember ✭✭✭

    @NMackay said:

    @voidstream said:

    @JohnHardman said:

    @voidstream said:

    @JohnHardman said:
    @voidstream

    For UWP, I have my images in an Images folder nested in the UWP project folder. Each has the Build Action set to Content and Copy to Output Folder set to Do not copy. When setting the Source property of Image, the string used starts "Images/"

    Of course, there are other ways of doing it, but that's what I've gone for.

    But you need manage path, i wanted to avoid that. That why the markup extension is a good idea for that

    Yes, I use a helper that handles adding the path for UWP but not for Android or iOS. The helper is similar to @NMackay's markup extension, but it not a markup extension as I don't currently make much use of XAML.

    XAML is really practical, try it and you never leave it after :wink:

    ooofft, I agree but it's a hot topic here, if your not used to it you might hate it at 1st but generally your reducing your code footprint using XAML which is always a good thing. Coming to XAML from say Winforms is painful, for ex WPF/Silverlight guys though it's smooth sailing....mostly :smiley: We enforce XAML as a standard for devs in the team unless there is a justifiable cause (like a custom control) to code code based UI stuff. UWP uses XAML too, it's not going away.

    I'am agree, i'm from Winforms and that was really hard on start, but when you start to understand the power of XAML, you can't back! It's my point of view

  • JohnHardmanJohnHardman GBUniversity ✭✭✭✭✭

    Yeah, I know :-) If I were working with a team I'd also insist on using XAML, but I'm working on my own so have a bit more freedom. I will switch to XAML at some point, but not just yet - probably when I fire up my next side-project.

Sign In or Register to comment.