Merged PR 20932: fix various issues

Author: jwmsft

windows.ui.composition/images/layer-visual-blur.png

@@ -28,7 +28,8 @@ A LayerVisual is a special input type that can be used to select a tree of visua
 | 1709 | 16299 | Shadow |
 
 ## -examples
-Apply Effects to a LayerVisual
+
+This example shows how to apply a [GaussianBlurEffect](https://microsoft.github.io/Win2D/WinUI3/html/T_Microsoft_Graphics_Canvas_Effects_GaussianBlurEffect.htm) to a LayerVisual.
 
 ```csharp
 
@@ -76,7 +77,13 @@ private async void InitComposition()
 }        
 
 ```
-Add a [DropShadow](dropshadow.md)
+
+The result looks like this.
+
+:::image type="content" source="images/layer-visual-blur.png" alt-text="A red square overlapping a blue square with a blur effect applied.":::
+
+This example shows how to apply a [DropShadow](dropshadow.md) to a LayerVisual.
+
 ```csharp
 
 private async void InitComposition()
@@ -117,6 +124,9 @@ private async void InitComposition()
 
 ```
 
+The result looks like this.
+
+:::image type="content" source="images/layer-visual-shadow.png" alt-text="A red square overlapping a blue square with a shadow applied to each square.":::
 
 ## -see-also
 [ContainerVisual](containervisual.md), [IClosable](../windows.foundation/iclosable.md)

windows.ui.composition/images/layer-visual-shadow.png

@@ -10,11 +10,11 @@ public Windows.UI.Composition.CompositionEffectBrush Effect { get;  set; }
 # Windows.UI.Composition.LayerVisual.Effect
 
 ## -description
-The effect to be applied to the flattened representation of the children of a [LayerVisual](layervisual.md).
-
 
+Gets or sets the effect to be applied to the flattened representation of the children of a [LayerVisual](layervisual.md).
 
 ## -property-value
+
 The effect to be applied to the flattened representation of the children of a [LayerVisual](layervisual.md).
 
 ## -remarks
@@ -23,4 +23,57 @@ This CompositionEffectBrush cannot take a [CompositionBackdropBrush](composition
 
 ## -examples
 
+This example shows how to apply a [GaussianBlurEffect](https://microsoft.github.io/Win2D/WinUI3/html/T_Microsoft_Graphics_Canvas_Effects_GaussianBlurEffect.htm) to a LayerVisual.
+
+```csharp
+
+private async void InitComposition()
+{
+  Compositor compositor = ElementCompositionPreview.GetElementVisual(MyGrid).Compositor;
+
+  //Create LayerVisual
+  LayerVisual layerVisual = compositor.CreateLayerVisual();
+  layerVisual.Size = new Vector2(900,900);
+
+  //Create SpriteVisuals to use as LayerVisual child
+  SpriteVisual sv1 = compositor.CreateSpriteVisual();
+  sv1.Brush = compositor.CreateColorBrush(Windows.UI.Colors.Blue);
+  sv1.Size = new Vector2(300, 300);
+  sv1.Offset = new Vector3(200, 200, 0);
+
+  SpriteVisual sv2 = compositor.CreateSpriteVisual();
+  sv2.Brush = compositor.CreateColorBrush(Colors.Red);
+  sv2.Size = new Vector2(300, 300);
+  sv2.Offset = new Vector3(400, 400, 0);
+
+  //Add children to the LayerVisual
+  layerVisual.Children.InsertAtTop(sv1);
+  layerVisual.Children.InsertAtTop(sv2);
+
+  //Create Effect
+  var graphicsEffect = new GaussianBlurEffect
+  {
+     Name = "Blur",
+     Source = new CompositionEffectSourceParameter("Backdrop"),
+     BlurAmount = 10.0f,
+     BorderMode = EffectBorderMode.Hard,
+     Optimization = EffectOptimization.Balanced
+  };
+
+  var blurEffectFactory = compositor.CreateEffectFactory(graphicsEffect,
+      new[] { "Blur.BlurAmount" });
+  var blurBrush = blurEffectFactory.CreateBrush();
+
+  //Apply Effect
+  layerVisual.Effect = blurBrush;
+
+  ElementCompositionPreview.SetElementChildVisual(MyGrid, layerVisual);
+}        
+         
+```
+
+The result looks like this.
+
+:::image type="content" source="images/layer-visual-blur.png" alt-text="A red square overlapping a blue square with a blur effect applied.":::
+
 ## -see-also

windows.ui.composition/layervisual.md

@@ -10,15 +10,61 @@ public CompositionShadow Shadow { get;  set; }
 # Windows.UI.Composition.LayerVisual.Shadow
 
 ## -description
-The shadow to be applied to the flattened representation of the children of a [LayerVisual](layervisual.md).
-
 
+Gets or sets the shadow to be applied to the flattened representation of the children of a [LayerVisual](layervisual.md).
 
 ## -property-value
 
+The shadow to be applied to the flattened representation of the children of a [LayerVisual](layervisual.md).
+
 ## -remarks
 
 ## -see-also
 
 ## -examples
 
+This example shows how to apply a [DropShadow](dropshadow.md) to a LayerVisual.
+
+```csharp
+
+private async void InitComposition()
+{
+  Compositor compositor = ElementCompositionPreview.GetElementVisual(MyGrid).Compositor;
+
+  //Create LayerVisual
+  LayerVisual layerVisual = compositor.CreateLayerVisual();
+  layerVisual.Size = new Vector2(900, 900);
+
+  //Create SpriteVisuals to use as LayerVisual child
+  SpriteVisual sv1 = compositor.CreateSpriteVisual();
+  sv1.Brush = compositor.CreateColorBrush(Windows.UI.Colors.Blue);
+  sv1.Size = new Vector2(300, 300);
+  sv1.Offset = new Vector3(200, 200, 0);
+
+  SpriteVisual sv2 = compositor.CreateSpriteVisual();
+  sv2.Brush = compositor.CreateColorBrush(Colors.Red);
+  sv2.Size = new Vector2(300, 300);
+  sv2.Offset = new Vector3(400, 400, 0);
+
+  //Add children to the LayerVisual
+  layerVisual.Children.InsertAtTop(sv1);
+  layerVisual.Children.InsertAtTop(sv2);
+
+  //Create DropShadow
+  DropShadow shadow = compositor.CreateDropShadow();
+  shadow.Color = Colors.DarkSlateGray;
+  shadow.Offset = new Vector3(40, 40, 0);
+  shadow.BlurRadius = 9;
+  shadow.SourcePolicy = CompositionDropShadowSourcePolicy.InheritFromVisualContent;
+
+  //Associate Shadow with LayerVisual
+  layerVisual.Shadow = shadow;
+
+  ElementCompositionPreview.SetElementChildVisual(MyGrid, layerVisual);
+}         
+         
+```
+
+The result looks like this.
+
+:::image type="content" source="images/layer-visual-shadow.png" alt-text="A red square overlapping a blue square with a shadow applied to each square.":::

windows.ui.composition/layervisual_effect.md

@@ -10,17 +10,22 @@ public Windows.Foundation.Rect Bounds { get; }
 # Windows.UI.Core.CoreWindow.Bounds
 
 ## -description
-Gets the bounding rectangle of the window.
+
+Gets a [Rect](../windows.foundation/rect.md) value that contains the origin, height, and width of the client area of the window, in device-independent pixels (DIPs).
 
 ## -property-value
-The bounding rectangle of the window, in device-independent pixels (DIPs).
+
+A value that reports the origin, height, and width of the client area of the application window.
 
 ## -remarks
+
+The origin of the `Rect` is relative to the system window that includes both the _client_ and _non-client_ areas.
+
 To convert from DIPs to physical pixels (and back), use these equations (where DPI is the dots per inch value for the screen):
+
 + DIP value = (physical pixel x 96) / DPI
 + physical pixel value = (DIP x DPI) / 96
 
-
 ## -examples
 
 ## -see-also

windows.ui.composition/layervisual_shadow.md

@@ -10,29 +10,31 @@ public Windows.UI.Xaml.HorizontalAlignment HorizontalContentAlignment { get;  se
 # Windows.UI.Xaml.Controls.Control.HorizontalContentAlignment
 
 ## -description
-Gets or sets the horizontal alignment of the control's content.
-
 
+Gets or sets the horizontal alignment of the control's content.
 
 ## -xaml-syntax
+
 ```xaml
 <control HorizontalContentAlignment="horizontalAlignmentMemberName"/>
 ```
 
-
 ## -xaml-values
+
 <dl><dt>horizontalAlignmentMemberName</dt><dd>horizontalAlignmentMemberNameA named constant of the HorizontalAlignment enumeration, such as Stretch.</dd>
 </dl>
+
 ## -property-value
-One of the [HorizontalAlignment](../windows.ui.xaml/horizontalalignment.md) values. The default is **Left**.
+One of the [HorizontalAlignment](../windows.ui.xaml/horizontalalignment.md) values. The default is `Center`.
 
 ## -remarks
-Each control might apply this property differently based on the [Style](../windows.ui.xaml/style.md) setters for the control's implicit style, and its visual template. Also, the apparent "default value" of each individual control used in UI can be different. For example, a [Button](button.md) control starts with the value **Center**.
 
-A value for the HorizontalContentAlignment property only affects layout behavior for a control when its template uses the HorizontalContentAlignment property as the source of a [HorizontalAlignment](../windows.ui.xaml/frameworkelement_horizontalalignment.md) value for presenters or content areas within. On other controls, setting HorizontalContentAlignment has no effect. For more info about visual templates for controls, see the reference for [Control.Template](control_template.md).
-<!--link to TBW Styles and Templates overview-->
+Each control might apply this property differently based on the [Style](../windows.ui.xaml/style.md) setters for the control's implicit style, and its visual template. Also, the apparent "default value" of each individual control used in UI can be different.
+
+A value for the HorizontalContentAlignment property only affects layout behavior for a control when its template uses the HorizontalContentAlignment property as the source of a [HorizontalAlignment](../windows.ui.xaml/frameworkelement_horizontalalignment.md) value for presenters or content areas within. On other controls, setting HorizontalContentAlignment has no effect. For more info about visual templates for controls, see the reference for [Control.Template](control_template.md) and [Control templates](/windows/apps/design/style/xaml-control-templates)
 
 ## -examples
 
 ## -see-also
-[VerticalContentAlignment](control_verticalcontentalignment.md), [FrameworkElement.HorizontalAlignment](../windows.ui.xaml/frameworkelement_horizontalalignment.md), [Alignment, margin, and padding](/windows/uwp/layout/alignment-margin-padding)
+
+[VerticalContentAlignment](control_verticalcontentalignment.md), [FrameworkElement.HorizontalAlignment](../windows.ui.xaml/frameworkelement_horizontalalignment.md), [Alignment, margin, and padding](/windows/uwp/layout/alignment-margin-padding), [Control templates](/windows/apps/design/style/xaml-control-templates)

windows.ui.core/corewindow_bounds.md

@@ -10,29 +10,32 @@ public Windows.UI.Xaml.VerticalAlignment VerticalContentAlignment { get;  set; }
 # Windows.UI.Xaml.Controls.Control.VerticalContentAlignment
 
 ## -description
-Gets or sets the vertical alignment of the control's content.
-
 
+Gets or sets the vertical alignment of the control's content.
 
 ## -xaml-syntax
+
 ```xaml
 <control VerticalContentAlignment="verticalAlignmentValue"/>
 ```
 
-
 ## -xaml-values
+
 <dl><dt>verticalAlignmentValue</dt><dd>verticalAlignmentValueA named constant of the VerticalAlignment enumeration, such as Stretch.</dd>
 </dl>
+
 ## -property-value
-One of the [VerticalAlignment](../windows.ui.xaml/verticalalignment.md) values. The default is **Top**.
+
+One of the [VerticalAlignment](../windows.ui.xaml/verticalalignment.md) values. The default is `Center`.
 
 ## -remarks
-Each control might apply this property differently based on the [Style](../windows.ui.xaml/style.md) setters for the control's implicit style, and its visual template. Also, the apparent "default value" of each individual control used in UI can be different. For example, a [Button](button.md) control starts with the value **Center**.
 
-A value for the VerticalContentAlignment property only affects layout behavior for a control when its template uses the VerticalContentAlignment property as the source of a [VerticalAlignment](../windows.ui.xaml/frameworkelement_verticalalignment.md) value for presenters or content areas within. On other controls, setting VerticalContentAlignment has no effect. For more info about visual templates for controls, see the reference for [Control.Template](control_template.md).
-<!--link to TBW Styles and Templates overview-->
+Each control might apply this property differently based on the [Style](../windows.ui.xaml/style.md) setters for the control's implicit style, and its visual template. Also, the apparent "default value" of each individual control used in UI can be different.
+
+A value for the VerticalContentAlignment property only affects layout behavior for a control when its template uses the VerticalContentAlignment property as the source of a [VerticalAlignment](../windows.ui.xaml/frameworkelement_verticalalignment.md) value for presenters or content areas within. On other controls, setting VerticalContentAlignment has no effect. For more info about visual templates for controls, see the reference for [Control.Template](control_template.md) and [Control templates](/windows/apps/design/style/xaml-control-templates).
 
 ## -examples
 
 ## -see-also
-[HorizontalContentAlignment](control_horizontalcontentalignment.md), [FrameworkElement.VerticalAlignment](../windows.ui.xaml/frameworkelement_verticalalignment.md), [Alignment, margin, and padding](/windows/uwp/layout/alignment-margin-padding)
+
+[HorizontalContentAlignment](control_horizontalcontentalignment.md), [FrameworkElement.VerticalAlignment](../windows.ui.xaml/frameworkelement_verticalalignment.md), [Alignment, margin, and padding](/windows/uwp/layout/alignment-margin-padding), [Control templates](/windows/apps/design/style/xaml-control-templates)

windows.ui.xaml.controls/control_horizontalcontentalignment.md

@@ -24,14 +24,12 @@ See Remarks
 
 For more info about data templates, see the [DataTemplate](../windows.ui.xaml/datatemplate.md) class and [Item containers and templates](/windows/uwp/design/controls-and-patterns/item-containers-templates).
 
-The base DataTemplateSelector class is not used as an object element in XAML. However, it is a common scenario to derive a custom DataTemplateSelector, map a xmlns prefix for the custom class and its namespace/assembly, and then refer to an instance of the custom class as defined in a [Resources](../windows.ui.xaml/frameworkelement_resources.md) block in XAML. This makes it possible to refer to the custom template selector class by **x:Key**, and use that reference to set the value of properties such as [ItemTemplateSelector](itemscontrol_itemtemplateselector.md) in XAML templates and visual states.
+The base DataTemplateSelector class is not used as an object element in XAML. However, it is a common scenario to derive a custom DataTemplateSelector, map an `xmlns` prefix for the custom class and its namespace/assembly, and then refer to an instance of the custom class as defined in a [Resources](../windows.ui.xaml/frameworkelement_resources.md) block in XAML. This makes it possible to refer to the custom template selector class by `x:Key`, and use that reference to set the value of properties such as [ItemTemplateSelector](itemscontrol_itemtemplateselector.md) in XAML templates and visual states.
 
 The callable methods of DataTemplateSelector are the two [SelectTemplate](datatemplateselector_selecttemplate_375443783.md) overloads. The overridable methods of DataTemplateSelector are the two [SelectTemplateCore](datatemplateselector_selecttemplatecore_402628248.md) overloads. To define an effective DataTemplateSelector subclass, provide implementations for [SelectTemplateCore(Object)](datatemplateselector_selecttemplatecore_402628248.md) and [SelectTemplateCore(Object, DependencyObject)](datatemplateselector_selecttemplatecore_711611086.md). All these methods return a [DataTemplate](../windows.ui.xaml/datatemplate.md) instance that's typically a specific choice that's appropriate for the inputs of the method that was called to obtain it.
 
 App code typically doesn't call [SelectTemplate](datatemplateselector_selecttemplate_375443783.md) methods; the methods exists so that the infrastructure can call it while choosing the correct templates based on using a DataTemplateSelector instance from a property value such as [ItemsControl.ItemsTemplateSelector](itemscontrol_itemtemplateselector.md).
 
-For example XAML that references a custom DataTemplateSelector as the [HeaderTemplateSelector](groupstyle_headertemplateselector.md) value, and example code that shows the overrides for [HeaderTemplateSelector](groupstyle_headertemplateselector.md) methods, see [How to group items in a list or grid](/previous-versions/windows/apps/hh780627(v=win.10)).
-
 ### Version history
 
 | Windows version | SDK version | Value added |
@@ -42,4 +40,4 @@ For example XAML that references a custom DataTemplateSelector as the [HeaderTem
 ## -examples
 
 ## -see-also
-[ItemTemplateSelector](itemscontrol_itemtemplateselector.md), [DataTemplate](../windows.ui.xaml/datatemplate.md), [ContentControl.ContentTemplateSelector](contentcontrol_contenttemplateselector.md), [GroupStyle.HeaderTemplateSelector](groupstyle_headertemplateselector.md), [How to group items in a list or grid](/previous-versions/windows/apps/hh780627(v=win.10)), [Adding ListView and GridView controls](/previous-versions/windows/apps/hh780618(v=win.10))
+[ItemTemplateSelector](itemscontrol_itemtemplateselector.md), [DataTemplate](../windows.ui.xaml/datatemplate.md), [ContentControl.ContentTemplateSelector](contentcontrol_contenttemplateselector.md), [GroupStyle.HeaderTemplateSelector](groupstyle_headertemplateselector.md)

windows.ui.xaml.controls/control_verticalcontentalignment.md

@@ -244,7 +244,5 @@ Private Sub OnNavigationFailed(sender As Object, e As NavigationFailedEventArgs)
 End Sub
 ```
 
-For a more detailed sample, see the [XAML Navigation sample](https://github.com/microsoft/Windows-universal-samples/tree/master/Samples/XamlNavigation).
-
 ## -see-also
 [Page](page.md), [ContentControl](contentcontrol.md), [INavigate](inavigate.md)