Create and view predefined 3D shapes in mixed reality
You can use the View shape in MR control in your app to let users see if a simple cube might fit within a specified space. They might want to do this to see how a certain object that you provide would fit in their space. If you have a 3D model of your object, you might like to use the View in MR control instead.
The control creates a button in your app. When app users click the button, it overlays a cube onto the live camera feed of the device. You set up the dimensions of the cube when you edit the control in Power Apps.
Tip
The MR controls work best in well-lit environments with flat-textured surfaces. When establishing tracking, point the device at the surface you would like to track and slowly pan the device from right to left in broad arm motions. If tracking fails, exit and enter the MR view to reset the tracking and try again.
LIDAR-enabled devices will also result in better tracking.
Tip
The MR controls in Power Apps leverage Babylon and Babylon React Native. As a result of this shared MR platform, 3D content that works in the Babylon sandbox should work in Power Apps.
Use the control
Insert the control into your app as you normally would for any other button control or control.
With an app open for editing in Power Apps Studio:
Open the Insert tab.
Expand Mixed reality.
Select the control View shape in MR to place it in the center of the app screen, or drag and drop it to position it anywhere on the screen.
You can modify the control with a number of properties.
Properties
The following properties are on the control's View shape in MR pane on the Properties and Advanced tabs.
Note that some properties are only available in the Advanced tab on the View in MR pane.
| Property | Description | Type | Location |
|---|---|---|---|
| Text | Label for the button. | String | Properties (also in Advanced) |
| Alternative text | Text to be displayed if the control can't load, or if the app user hovers on the control. | String | Properties (also in Advanced as AltText) |
| Display type | Whether the button shows just an icon, text, or both. | Drop-down selection | Properties (also in Advanced) |
| Shape width | Width of the cube. | Integer | Properties (also in Advanced) |
| Shape height | Height of the cube. | Integer | Properties (also in Advanced) |
| Shape depth | The three-dimensional depth of the cube. | Integer | Properties (also in Advanced) |
| Unit of measurement | The measurement unit used for the width, height, and depth fields. | Drop-down selection | Properties (also in Advanced) |
| Photos | The photos captured during the mixed reality session. You can upload the mixed-reality photos to OneDrive and show them in a gallery. |
Not applicable (output property only) | |
| OnMixedRealitySelect | Behavior that is triggered when exiting the MR experience with new results. | Defined action | Advanced |
| OnChange | Behavior that is triggered when any property on the button is changed. | Defined action | Advanced |
Additional properties
BorderColor – The color of a control's border.
BorderStyle – Whether a control's border is Solid, Dashed, Dotted, or None.
BorderThickness – The thickness of a control's border.
Color – The color of text in a control.
DisplayMode – Whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).
DisabledBorderColor – The color of a control's border if the control's DisplayMode property is set to Disabled.
DisabledColor – The color of text in a control if its DisplayMode property is set to Disabled.
DisabledFill – The background color of a control if its DisplayMode property is set to Disabled.
FillColor – The background color of a control.
Font – The name of the family of fonts in which text appears.
FontStyle – The style of the text in the control: None, Strikethrough, Underline, or Italic.
FontSize – The font size of the text that appears on a control.
FontWeight – The weight of the text in a control: Bold, Semibold, Normal, or Lighter.
Height – The distance between a control's top and bottom edges.
HoverBorderColor – The color of a control's border when the user keeps the mouse pointer on that control.
HoverColor – The color of the text in a control when the user keeps the mouse pointer on it.
HoverFill – The background color of a control when the user keeps the mouse pointer on it.
PaddingBottom – The distance between text in a control and the bottom edge of that control.
PaddingLeft – The distance between text in a control and the left edge of that control.
PaddingRight – The distance between text in a control and the right edge of that control.
PaddingTop – The distance between text in a control and the top edge of that control.
PressedBorderColor – The color of a control's border when the user taps or clicks that control.
PressedColor – The color of text in a control when the user taps or clicks that control.
PressedFill – The background color of a control when the user taps or clicks that control.
TabIndex – Keyboard navigation order.
TextAlignment – The alignment of the text: Center, Left, Right, or Justify.
Tooltip – Explanatory text that appears when the user hovers over a control.
VerticalAlign – The location of text on a control in relation to the vertical center of that control: Middle, Top, or Bottom.
Visible – Whether a control appears or is hidden.
Width – The distance between a control's left and right edges.
X – The distance between the left edge of a control and the left edge of its parent container (or the screen if there's no parent container).
Y – The distance between the top edge of a control and the top edge of the parent container (or the screen if there's no parent container).
Other mixed reality controls
- View 3D content with the View in 3D control.
- View images and 3D content in the real world with the View in mixed reality control.
- Measure distance, area, and volume with the Measure in mixed reality control.