{"id":6617,"date":"2018-12-13T10:51:50","date_gmt":"2018-12-13T10:51:50","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=6617"},"modified":"2018-12-13T12:52:13","modified_gmt":"2018-12-13T12:52:13","slug":"displaying-the-device-picker-in-a-uwp-application","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/displaying-the-device-picker-in-a-uwp-application\/","title":{"rendered":"Displaying the device picker in a UWP application"},"content":{"rendered":"<p>Developers can use the UWP device picker flyout control within their application to allow the user to select a device from a list of available devices. The list can be filtered to display only particular types of devices.<\/p>\n<p>For example, here&#8217;s how to display the DevicePicker flyout without filtering, i.e. showing all available devices<\/p>\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\nvar devicePicker = new DevicePicker();\r\ndevicePicker.Show(new Rect(x, y, width, height));\r\n<\/pre>\n<p>In this case we simply create a DevicePicker and call the Show method which is passed a rectangle where you want the picker to flyout from. <\/p>\n<p><em>There&#8217;s an overload Show method which allows a placement as well.<\/em><\/p>\n<p>If you run this code in your application you&#8217;ll find that devices are enumerated over and displayed as they are found, so obviously this may take a little bit of time to enumerate all devices.<\/p>\n<p>In most cases we probably want to filter the DevicePicker for a certain type of device. For example if we want to locate all Bluetooth devices we would use the following<\/p>\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\nvar devicePicker = new DevicePicker();\r\n\r\ndevicePicker.Filter\r\n   .SupportedDeviceSelectors.Add(\r\n      BluetoothLEDevice.GetDeviceSelectorFromPairingState(false));\r\ndevicePicker.Filter\r\n   .SupportedDeviceSelectors.Add(\r\n      BluetoothLEDevice.GetDeviceSelectorFromPairingState(true));\r\ndevicePicker.Filter\r\n   .SupportedDeviceSelectors.Add(\r\n      BluetoothDevice.GetDeviceSelectorFromPairingState(false));\r\ndevicePicker.Filter\r\n   .SupportedDeviceSelectors.Add(\r\n      BluetoothDevice.GetDeviceSelectorFromPairingState(true));\r\n\r\ndevicePicker.Show(new Rect(x, y, width, height));\r\n<\/pre>\n<p>In this case we&#8217;ve filtered the DevicePicker so it will only display BluetoothLE devices and Bluetooth devices both in a paired (the true parameter) or unpaired (the false parameter).<\/p>\n<p>Obviously we&#8217;re going to want to get at the device information or the selected device, when using the Show method, we will need to subscribe to the DevicePicker&#8217;s DeviceSelected event, for example<\/p>\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\ndevicePicker.DeviceSelected += (picker, args) =&gt;\r\n{\r\n   \/\/ outputs the selected device name\r\n   Debug.WriteLine(args.SelectedDevice.Name);\r\n};\r\n<\/pre>\n<p>We can also respond to a couple of other events such as the DevicePickerDismissed and DisconnectButtonClicked.<\/p>\n<p>As an alternate to the event approach, we could switch from using the Show method to use the async\/await implementation which combines the Show and the DeviceSelected into he PickSingleDeviceAsync method, i.e.<\/p>\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\nvar device = await \r\n   devicePicker.PickSingleDeviceAsync(\r\n      new Rect(x, y, width, height));\r\n\/\/ outputs the selected device name\r\nDebug.WriteLine(device.Name);\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Developers can use the UWP device picker flyout control within their application to allow the user to select a device from a list of available devices. The list can be filtered to display only particular types of devices. For example, here&#8217;s how to display the DevicePicker flyout without filtering, i.e. showing all available devices var [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[231,106,230,107],"tags":[],"class_list":["post-6617","post","type-post","status-publish","format-standard","hentry","category-bluetooth","category-universal-app","category-uwp","category-windows-10"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/6617","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=6617"}],"version-history":[{"count":3,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/6617\/revisions"}],"predecessor-version":[{"id":6620,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/6617\/revisions\/6620"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=6617"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=6617"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=6617"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}