{"id":1331,"date":"2017-10-10T09:50:55","date_gmt":"2017-10-10T15:50:55","guid":{"rendered":"https:\/\/toddbaginski.com\/blog\/?p=1331"},"modified":"2018-06-04T14:48:14","modified_gmt":"2018-06-04T18:48:14","slug":"understanding-the-powerapps-add-picture-control","status":"publish","type":"post","link":"https:\/\/toddbaginski.com\/blog\/understanding-the-powerapps-add-picture-control\/","title":{"rendered":"Understanding the PowerApps Add Picture control"},"content":{"rendered":"

The PowerApps Add Picture control<\/a> allows you to select pictures from a device’s picture gallery, or take a new picture with the device’s camera and use them in your PowerApp.\u00a0 This post describes how the control handles images with different sizes and crops them.\u00a0 This is helpful information to know as you plan the user interface for PowerApps you create.<\/p>\n

To demonstrate the Add Picture control’s behavior I created a simple PowerApp.\u00a0 You can download it here<\/a>.<\/p>\n

To start, I’m going to use an image I took in portrait orientation<\/strong>\u00a0with my phone.\u00a0 The image has a native size of 1836(w) x 3264(h) pixels and an aspect ratio of\u00a09 x 16.\u00a0 It looks like this.<\/p>\n

\"\"<\/a><\/p>\n

In the screenshot of the PowerApp running on an Android phone below, check out the top picture in an Add Picture control that has a landscape orientation and an aspect ratio of 16:9.\u00a0 The Add Picture control dimensions do not have\u00a0the same orientation and ratio<\/strong> as the native picture taken with the device.\u00a0\u00a0The Image Position property is set to Center.\u00a0\u00a0Notice the top and the bottom of the image are cropped.\u00a0\u00a0<\/strong><\/p>\n

Also below, notice the bottom picture in an Add Picture control that has a portrait orientation and an aspect ratio of 9:16.\u00a0 The Add Picture control dimensions has the same orientation\u00a0and ratio<\/strong> as the native picture taken with the device.\u00a0 The Image Position property is set to Fill.\u00a0\u00a0Notice the picture is scaled perfectly and no cropping has occurred.<\/strong><\/p>\n

\"\"<\/a><\/p>\n

 <\/p>\n

 <\/p>\n

Now let’s take a look at an image I took in\u00a0landscape\u00a0orientation<\/strong>\u00a0with my phone.\u00a0 The image has a native size of 3264(h) x 1836(w) pixels and an aspect ratio of 16 x 9.\u00a0 It looks like this.\u00a0 GO BUCKEYES!<\/strong><\/p>\n

\"\"<\/a><\/p>\n

In the screenshot of the PowerApp running on an Android phone below, check out the top picture in an Add Picture control that has a landscape orientation and an aspect ratio of 16:9.\u00a0 The Add Picture control dimensions has the same orientation and ratio<\/strong> as the native picture taken with the device.\u00a0 The Image Position property is set to Center.\u00a0\u00a0However, notice the left and right of the image are cropped.<\/strong><\/p>\n

Also below, notice the bottom picture in an Add Picture control that has a portrait orientation and an aspect ratio of 9:16.\u00a0 The Add Picture control dimensions do not have the same orientation\u00a0and ratio<\/strong> as the native picture taken with the device.\u00a0 The Image Position property is set to Fill.\u00a0\u00a0Notice the left and the right of the image are cropped even more.<\/strong><\/p>\n

\"\"<\/a><\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

The PowerApps Add Picture control allows you to select pictures from a device’s picture gallery, or take a new picture with the device’s camera and use [\u2026]<\/span><\/p>\n","protected":false},"author":1,"featured_media":1356,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[103,96,121],"tags":[42,10,54,112],"class_list":["post-1331","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cloud","category-mobile","category-powerapps","tag-cloud","tag-custom-development","tag-mobile","tag-powerapps"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/posts\/1331","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/comments?post=1331"}],"version-history":[{"count":15,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/posts\/1331\/revisions"}],"predecessor-version":[{"id":1396,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/posts\/1331\/revisions\/1396"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/media\/1356"}],"wp:attachment":[{"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/media?parent=1331"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/categories?post=1331"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/tags?post=1331"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}