1. UWA Responsive design

2. Responsive design techniques:
There are six responsive design techniques you can use to customize your app's UI.
Reposition
Resize
Reflow
Reveal
Replace
Re-architect

3. Reposition:
You can alter the location and position of app UI elements to get the most out of each device.
Example, the portrait view on phone or phablet necessitates a scrolling UI because only one full frame is visible at a time. When the app translates to a device that allows two full on-screen frames, whether in portrait or landscape orientation, frame B can occupy a dedicated space. If you're using a grid for positioning, you can stick to the same grid when UI elements are repositioned.

4. Resize:
You can optimize the frame size by adjusting the margins and size of UI elements. This could allow you  to augment the reading experience on a larger screen by simply growing the content frame.

5. Reflow:
By changing the flow of UI elements based on device and orientation, your app can offer an optimal display of content. For instance, when going to a larger screen, it might make sense to switch larger containers, add columns, and generate list items in a different way.
This example shows a single column of vertically scrolling content on phone or phablet can be reflowed on a larger screen to display two columns of text.

6. Reveal:
You can reveal UI based on screen real estate, or when the device supports additional functionality, specific situations, or preferred screen orientations.
 Example of revealing or hiding UI applies to media player controls, where the button set is reduced on smaller devices and expanded on larger devices. The media player on PC, for instance, can handle far more on-screen functionality than it can on a phone.

7. Replace:
This technique lets you switch the user interface for a specific device size-class or orientation. In this example, the navigation pane and its compact, transient UI works well for a smaller device, but on a larger device tabs might be a better choice.

8. Re-architect:
You can collapse or fork the architecture of your app to better target specific devices. In this example, going from the left device to the right device demonstrates the joining of pages.

9. Visual State Manager:
The VisualStateManager class in Windows 10 has been expanded with two mechanisms to implement a responsive design in your XAML-based apps. The new VisualState.StateTriggers and VisualState.Setters APIs allow you to define visual states that correspond to certain conditions.
Using the built-in Adaptive Trigger as the Visual State's State Trigger with a MinWindowHeight and/or MinWindowWidth property, visual states can change based on app window height/width.
AdaptiveTrigger has two important properties: MinWindowWidth and MinWindowHeight. You use AdaptiveTrigger in conjunction with Visual State Manager to adapt the UI to screens and windows of various sizes. For example, you might lay out the core parts of the UI horizontally on a desktop screen, but opt for a more vertical layout on a phone. With AdaptiveTrigger and Visual State Manager, you can do that in XAML without writing a single line of (C#) code.

10. Example: <VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="WindowStates">
<VisualState x:Name="WideState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="800" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="LightYellow" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="NarrowState">
<AdaptiveTrigger MinWindowWidth="0" />
<Setter Target="LayoutRoot.Background" Value="LightGreen" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

11. The background will be light yellow when the width is greater than or equal to 800 pixels, and light green when it’s anything less.
Here we can use the adaptive trigger or we can create our own custom trigger by inheriting state trigger class.
Here we can identify the device in landscape or portrait mode by using ApplicationViewOrientation class, it will return the current mode of the device and we can pass the data dynamically based on mode , also the adaptive trigger will rearrange the data based on the width of the window.

12. RelativePanel :
You can use a Relative Panel to lay out your elements by expressing spatial relationships between elements.
<RelativePanel BorderBrush="Gray" BorderThickness="10">
<Rectangle x:Name="RedRect" Fill="Red" MinHeight="100" MinWidth="100"/>
<Rectangle x:Name="BlueRect" Fill="Blue" MinHeight="100" MinWidth="100"
RelativePanel.RightOf="RedRect" />
<!-- Width is not set on the green and yellow rectangles.
It's determined by the RelativePanel properties. -->
<Rectangle x:Name="GreenRect" Fill="Green"
MinHeight="100" Margin="0,5,0,0"
RelativePanel.Below="RedRect"
RelativePanel.AlignLeftWith="RedRect"
RelativePanel.AlignRightWith="BlueRect"/>
<Rectangle Fill="Yellow" MinHeight="100"
RelativePanel.Below="GreenRect"
RelativePanel.AlignLeftWith="BlueRect"
RelativePanel.AlignRightWithPanel="True"/>
</RelativePanel>

13. <VisualStateManager
<VisualStateManager.VisualStateGroups> <VisualStateGroup> <VisualState> <VisualState.StateTriggers> <AdaptiveTrigger MinWindowWidth="720" /> </VisualState.StateTriggers> <VisualState.Setters> <Setter Target="GreenRect.(RelativePanel.RightOf)" Value="BlueRect" /> </VisualState.Setters> </VisualState>

14. <DataTemplate x:DataType="data:RecipeGroup">
<GridView ItemsSource="{x:Bind Recipes}" SelectionMode="None"
IsItemClickEnabled="True" ItemClick="OnRecipeClicked">
<GridView.ItemTemplate>
<DataTemplate x:DataType="data:Recipe">
<Grid Width="310" Margin="0,20,20,20">
x:DataType attributes on the DataTemplates, and {x:Bind} expressions where you’d normally see {Binding} expressions. This is compiled data binding, and it’s one of the coolest new features of Windows 10.
Bindings created with {Binding} statements are late-bound. At run-time, Binding objects are created and used to marry data sources to data targets. But binding objects require memory, and they add performance overhead in the same way that late-bound IDispatch interfaces add overhead to COM calls.
Bindings created with {x:Bind} statements are different. They get compiled. Rather than emit code to instantiate and initialize a Binding object, the parser emits code that connects the data target directly to the data source. Compiled bindings perform faster and consume less memory.

15. There is one requirement for compiled data binding to work: the compiler has to know what type you’re binding against. That’s the purpose of x:DataType attributes on the DataTemplates; without them, the compiler would have no way of type-checking the property names.

16. Example:
private void Initialize() { if (!Windows.ApplicationModel.DesignMode.DesignModeEnabled) WindowActivatedEventHandler windowactivated = null; windowactivated = (s, e) => Windows.UI.Xaml.Window.Current.Activated -= windowactivated; var currentUIMode = Windows.UI.ViewManagement.UIViewSettings.GetForCurrentView().UserInteractionMode.ToString(); }; Windows.UI.Xaml.Window.Current.Activated += windowactivated; Windows.UI.Xaml.Window.Current.SizeChanged += Current_SizeChanged; } Detect_DiveMode();

17. private void Detect_DiveMode() { ApplicationViewOrientation winOrientation = ApplicationView.GetForCurrentView().Orientation; if (winOrientation == ApplicationViewOrientation.Landscape) backimage.ImageSource = new BitmapImage(new Uri("ms-appx:///Assets/banner_img.png")); } else if (winOrientation == ApplicationViewOrientation.Portrait) backimage.ImageSource = new BitmapImage(new Uri("ms-appx:///Assets/FOT_appstore _icon_1024x1024.png")); private void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e) Detect_DiveMode();

18. Page layouts with XAML:
The XAML framework provides several levels of optimization you can use to create a responsive UI.
Fluid layout
Adaptive layout 
Tailored layout
Fluid layout:
The foundation of a responsive layout is the appropriate use of layout properties and panels to reposition, resize, and reflow content.
You can set a fixed size on an element, or use automatic sizing to let the parent layout panel size it.
Adaptive layout:
Adaptive layout Use visual states to make significant alterations to your UI based on window size or other changes.
When your app window grows or shrinks beyond a certain amount, you might want to alter layout properties to reposition, resize, reflow, reveal, or replace sections of your UI. You can define different visual states for your UI, and apply them when the window width or window height crosses a specified threshold. An Adaptive Trigger provides an easy way to set the threshold (also called 'breakpoint') where a state is applied.

19. Approaches to tailoring include:
Tailored layout:
A tailored layout is optimized for a specific device family or range of screen sizes. Within the device family, the layout should still respond and adapt to changes within the range of supported window sizes.
Approaches to tailoring include:
Create custom trigger
Use separate XAML files to define distinct views for each device family.
Use separate XAML and code to provide different implementations for each device family.

20. Layout properties: Height and Width:
To control the size and position of an element, you set its layout properties. Here are some common layout properties and their effect.
Height and Width:
Set the Height and Width properties to specify the size of an element. You can use fixed values measured in effective pixels, or you can use auto or proportional sizing. To get the size of an element at runtime, use the Actual Height and Actual Width properties instead of Height and Width.
You use auto sizing to let UI elements resize to fit their content or parent container. You can also use auto sizing with the rows and columns of a grid. To use auto sizing, set the Height and/or Width of UI elements to Auto.

21. Column
Width
Remarks
Column_1
Auto
The column will size to fit its content.
Column_2 *
After the Auto columns are calculated, the column gets part of the remaining width. Column_2 will be one-half as wide as Column_4.
Column_3 44
The column will be 44 pixels wide.
Column_4 2*
After the Auto columns are calculated, the column gets part of the remaining width. Column_4 will be twice as wide as Column_2.

22. Size constraints: Alignment:
When you use auto sizing in your UI, you might still need to place constraints on the size of an element. You can set the MinWidth / MaxWidth and MinHeight / MaxHeight properties to specify values that constrain the size of an element while allowing fluid resizing.
In a Grid, MinWidth / MaxWidth can also be used with column definitions, and MinHeight/MaxHeight can be used with row definitions.
Alignment:
Use the Horizontal Alignment and Vertical Alignment properties to specify how an element should be positioned within its parent container.
The values for Horizontal Alignment are Left, Center, Right, and Stretch.
The values for Vertical Alignment are Top, Center, Bottom, and Stretch.
With the Stretch alignment, elements fill all the space they're provided in the parent container. Stretch is the default for both alignment properties.

23. Margins and padding:
Set the Margin property to control the amount of empty space around an element. Margin does not add pixels to the Actual Height and Actual Width.
Set the Padding property to control the amount of space between the inner border of an element and its content. A positive Padding value decreases the content area of the element.
The below diagram shows how Margin and Padding are applied to an element.

24. Visibility: Style resources:
You can reveal or hide an element by setting its Visibility property to one of the Visibility enumeration values: Visible or Collapsed. When an element is Collapsed, it doesn't take up any space in the UI layout.
You can change an element's Visibility property in code or in a visual state. When the Visibility of an element is changed, all of its child elements are also changed. You can replace sections of your UI by revealing one panel while collapsing another.
 When you have elements in your UI that are Collapsed by default, the objects are still created at startup, even though they aren't visible. You can defer loading these elements until they are shown by setting the x:DeferLoadStrategy attribute to "Lazy". This can improve startup performance.
Style resources:
You don't have to set each property value individually on a control. It's typically more efficient to group property values into a Style resource and apply the Style to a control. This is especially true when you need to apply the same property values to many controls.

25. Attached property syntax:
In a VisualState, you typically set a value for a control property, or for one of the attached properties of the panel that contains the control. When you set an attached property, use parentheses around the attached property name.
The below example shows how to set the RelativePanel.AlignHorizontalCenterWithPanel attached property on a TextBox named myTextBox. The first XAML uses ObjectAnimationUsingKeyFrames syntax and the second uses Setter syntax.
<!-- Set an attached property using ObjectAnimationUsingKeyFrames. -->
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="(RelativePanel.AlignHorizontalCenterWithPanel)"
Storyboard.TargetName="myTextBox">
<DiscreteObjectKeyFrame KeyTime="0" Value="True"/>
</ObjectAnimationUsingKeyFrames>
<!-- Set an attached property using Setter. -->
<Setter Target="myTextBox.(RelativePanel.AlignHorizontalCenterWithPanel)" Value="True"/>

26. Comparison B/W Layout panels
Panel Control
Description
Canvas
Canvas doesn’t support fluid UI; you control all aspects of positioning and sizing child elements. You typically use it for special cases like creating graphics or to define small static areas of a larger adaptive UI. You can use code or visual states to reposition elements at runtime.Elements are positioned absolutely using Canvas.Top and Canvas.Left attached properties.
Layering can be explicitly specified using the Canvas.ZIndex attached property.
Stretch values for HorizontalAlignment/VerticalAlignment are ignored. If an element's size is not set explicitly, it sizes to its content.
Child content is not visually clipped if larger than the panel.
Child content is not constrained by the bounds of the panel.

27. Relative Panel
Elements are arranged in relation to the edge or center of the panel, and in relation to each other.
Elements are positioned using a variety of attached properties that control panel alignment, sibling alignment, and sibling position.
Stretch values for HorizontalAlignment/VerticalAlignment are ignored unless RelativePanel attached properties for alignment cause stretching (for example, an element is aligned to both the right and left edges of the panel). If an element's size is not set explicitly and it's not stretched, it sizes to its content.
Child content is visually clipped if larger than the panel.
Content size is constrained by the bounds of the panel, so scrollable content shows scroll bars if needed.

28. StackPanel
Elements are stacked in a single line either vertically or horizontally.
Stretch values for HorizontalAlignment/VerticalAlignment are respected in the direction opposite the Orientation property. If an element's size is not set explicitly, it stretches to fill the available width (or height if the Orientation is Horizontal). In the direction specified by the Orientation property, an element sizes to its content.
Child content is visually clipped if larger than the panel.
Content size is not constrained by the bounds of the panel in the direction specified by the Orientation property, so scrollable content stretches beyond the panel bounds and doesn't show scrollbars. You must explicitly constrain the height (or width) of the child content to make its scrollbars show.

29. Grid
Grid supports fluid resizing of child elements. You can use code or visual states to reposition and reflow elements.Elements are arranged in rows and columns using Grid.Row and Grid.Column attached properties.
Elements can span multiple rows and columns using Grid.RowSpan and Grid.ColumnSpan attached properties.
Stretch values for HorizontalAlignment/VerticalAlignment are respected. If an element's size is not set explicitly, it stretches to fill the available space in the grid cell.
Child content is visually clipped if larger than the panel.
Content size is constrained by the bounds of the panel, so scrollable content shows scroll bars if needed.

30. VariableSizedWrapGrid
Elements are arranged in rows or columns that automatically wrap to a new row or column when the MaximumRowsOrColumns value is reached.
Whether elements are arranged in rows or columns is specified by the Orientation property.
Elements can span multiple rows and columns using VariableSizedWrapGrid.RowSpan and VariableSizedWrapGrid.ColumnSpan attached properties.
Stretch values for HorizontalAlignment/VerticalAlignment are ignored. Elements are sized as specified by the ItemHeight and ItemWidth properties. If these properties are not set, the item in the first cell sizes to its content, and all other cells inherit this size.
Child content is visually clipped if larger than the panel.
Content size is constrained by the bounds of the panel, so scrollable content shows scroll bars if needed.

31. Thank You