### Popup Placement Example (C#)

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/specs/Popup-AdditionalLayoutProperties-Spec.md

Example demonstrating how to handle the ActualPlacementChanged event and update visual states based on popup placement.

```APIDOC
## Popup Placement Example (C#)

### Description

This C# code demonstrates how to subscribe to the `ActualPlacementChanged` event of a `Popup` and use the `ActualPlacement` property to update the visual state of the control.

### Code

```csharp
void OnApplyTemplate()
{
    m_overflowPopup = GetTemplateChild("OverflowPopup");
    m_overflowPopup.ActualPlacementChanged += OnOverflowPopupActualPlacementChanged;
}

void OnOverflowPopupActualPlacementChanged(object sender, object args)
{
    UpdateVisualState(useTransitions: false);
}

void UpdateVisualState(bool useTransitions)
{
    if (m_overflowPopup.ActualPlacement == PopupPlacementMode.Top)
    {
        VisualStateManager.GoToState(this, "ExpandedUp", useTransitions);
    }
    else
    {
        VisualStateManager.GoToState(this, "ExpandedDown", useTransitions);
    }
}
```
```

--------------------------------

### Install Built WebView2 Runtime

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/src/controls/dev/WebView2/WebView2.md

Install the built Microsoft Edge WebView2 Runtime using the mini_installer.exe. The --msedgewebview and --system-level flags are used for a system-wide installation.

```batch
mini_installer.exe --msedgewebview --system-level
```

--------------------------------

### Popup Placement Example (XAML)

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/specs/Popup-AdditionalLayoutProperties-Spec.md

Example demonstrating how to use the new Popup placement properties within a XAML template.

```APIDOC
## Popup Placement Example (XAML)

### Description

This XAML snippet shows how `PlacementTarget` and `DesiredPlacement` are used to configure a `Popup` within a `CommandBarFlyoutCommandBar`'s template.

### Code

```xml
<Popup
    x:Name="OverflowPopup"
    PlacementTarget="{Binding ElementName=PrimaryItemsRoot}"
    DesiredPlacement="Bottom">
</Popup>
```
```

--------------------------------

### MonochromaticOverlayPresenter XAML Examples

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/specs/DateTimePicker-Visual-Updates-Spec.md

Examples demonstrating how to use the MonochromaticOverlayPresenter in XAML.

```APIDOC
## Example 1: Overlaying on Scrolling Text

### Description
This example places a `MonochromaticOverlayPresenter` over scrolling text to highlight its center.

### XAML
```xml
<Grid Background="White" Width="150">
    <ScrollViewer x:Name="Source" Height="300">
        <TextBlock
            Foreground="Black"
            FontSize="30"
            Text="{x:Bind LoremIpsum}"
            TextWrapping="Wrap">
        </TextBlock>
    </ScrollViewer>

    <MonochromaticOverlayPresenter
        ReplacementColor="Green"
        SourceElement="{x:Bind Source}"
        Height="30"
        IsHitTestVisible="False"
        VerticalAlignment="Center"
        HorizontalAlignment="Stretch"/>
</Grid>
```

## Example 2: Partially Highlighting a TextBlock

### Description
This example shows how to use `MonochromaticOverlayPresenter` to partially highlight a `TextBlock`.

### XAML
```xml
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel x:Name="Panel" Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">
            <Grid Margin="2,10,0,0">
                <TextBlock x:Name="Source" Text="This string will be partially highlighted"/>
                <MonochromaticOverlayPresenter
                    ReplacementColor="Black"
                    SourceElement="{x:Bind Source}"
                    Width="50"
                    VerticalAlignment="Stretch"
                    HorizontalAlignment="Center"
                    Background="LightBlue"/>
            </Grid>
        </StackPanel>
    </Grid>
```
```

--------------------------------

### Install MSBuild Log Viewer

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/src/GettingStarted.md

Run this command at the root of the repo to install the MSBuild Log Viewer, which helps in analyzing build output.

```powershell
.\OneTimeSetup.cmd -Install LogViewer
```

--------------------------------

### Example XAML resource reference

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/specs/xaml-resource-references-tracing-spec.md

This is an example of a XAML resource reference within a StackPanel.

```xml
<StackPanel >
    <StackPanel.Resources>
        <SolidColorBrush x:Key="myBrush" Color="Red"/>
    </StackPanel.Resources>

    <Rectangle Fill="{StaticResource myBrush}"/>
```

--------------------------------

### Install MSBuild Dependencies

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/src/GettingStarted.md

Ensure Visual Studio 2022 and required MSBuild components are installed for building WinUI.

```bash
cd C:\winui3\src
.\OneTimeSetup.cmd -Install MSBuild
```

--------------------------------

### Basic WrapPanel Example

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/specs/WCT/Primitives/WrapPanel.md

This example demonstrates how to create a WrapPanel with a fixed width and displays several child elements. Ensure child elements have explicit width and height set, otherwise they may not render.

```xml
    <WrapPanel Width="132">
        <Rectangle Fill="Red" Width="44" Height="44"/>
        <Rectangle Fill="Blue" Width="44" Height="44"/>
        <Rectangle Fill="Green" Width="44" Height="44"/>
        <Rectangle Fill="Orange" Width="44" Height="44"/>
    </WrapPanel>
```

--------------------------------

### Build Installer Components

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/src/controls/dev/WebView2/WebView2.md

Build the installer and mini_installer components for the Anaheim Edge project using autoninja. This is a scoped build option.

```batch
autoninja installer mini_installer
```

--------------------------------

### Control Template Example

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/src/controls/dev/AnimatedIcon/Docs/AnimatedIconDevDesign.md

An example of a Button control template that has been modified to support using an AnimatedIcon in its Icon property, demonstrating how to set the AnimatedIcon's state via VisualStateManager.

```APIDOC
## Button with AnimatedIcon Support

### XAML Structure
This example shows a Button with a Style that includes a ControlTemplate. The template defines a Grid containing a ContentPresenter and an element named 'Icon'. The 'Icon' element is set to the Button's ContentTemplate and is configured to use an AnimatedIcon.

### Visual States
The `VisualStateManager` is used to control the `AnimatedIcon.State` property based on the button's common states (Normal, PointerOver, Pressed).

### Example Snippet
```xaml
<Button Content="Hello Button" Width="200" Height="40">
    <Button.Style>
        <Style TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                        <VisualState.Setters>
                                            <Setter Target="Icon.(AnimatedIcon.State)" Value="Normal"/>
                                        </VisualSTate.Setters>
                                    </VisualState>
                                    <VisualState x:Name="PointerOver">
                                        <VisualState.Setters>
                                            <Setter Target="Icon.(AnimatedIcon.State)" Value="Hover"/>
                                        </VisualSTate.Setters>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <VisualState.Setters>
                                            <Setter Target="Icon.(AnimatedIcon.State)" Value="Pressed"/>
                                        </VisualSTate.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>

                            <ContentPresenter
                                x:Name="ContentPresenter"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Content="{TemplateBinding Content}"
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                ContentTransitions="{TemplateBinding ContentTransitions}"
                                Padding="{TemplateBinding Padding}"
                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                AutomationProperties.AccessibilityView="Raw" />

                            <Grid x:Name="Icon" HorizontalAlignment="Right" Content="{TemplateBinding Icon}"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Button.Style>
</Button>
```
```

--------------------------------

### Example XAML Resource Reference Failure Message

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/specs/xaml-resource-references-tracing-spec.md

This example shows the detailed output logged when a XAML resource reference fails. Applications should not parse this message, as its format is implementation-defined and subject to change.

```text
Beginning search for resource with key 'OutputTextBlockStyl'.
  Searching dictionary 'ms-appx:///Controls/ControlExample.xaml' for resource with key 'OutputTextBlockStyl'.
  Finished searching dictionary 'ms-appx:///Controls/ControlExample.xaml'.
  Searching dictionary 'Framework-defined colors' for resource with key 'OutputTextBlockStyl'.
  Finished searching dictionary 'Framework-defined colors'.
  Searching dictionary 'Framework ThemeResources.xbf' for resource with key 'OutputTextBlockStyl'.
    Searching theme dictionary (active theme: 'Light') for resource with key 'OutputTextBlockStyl'.
      Searching dictionary '<anonymous dictionary>' for resource with key 'OutputTextBlockStyl'.
      Finished searching dictionary '<anonymous dictionary>'.
    Finished searching theme dictionary (active theme: 'Light').
  Finished searching dictionary 'Framework ThemeResources.xbf'.
  Searching dictionary 'ms-appx:///App.xaml' for resource with key 'OutputTextBlockStyl'.
    Searching merged dictionary with index '1' for resource with key 'OutputTextBlockStyl'.
      Searching dictionary 'ms-appx:///Microsoft.UI.Xaml/Themes/themeresources.xaml' for resource with key 'OutputTextBlockStyl'.
        Searching theme dictionary (active theme: 'Light') for resource with key 'OutputTextBlockStyl'.
          Searching dictionary 'ms-appx:///Microsoft.UI.Xaml/Themes/themeresources.xaml' for resource with key 'OutputTextBlockStyl'.
          Finished searching dictionary 'ms-appx:///Microsoft.UI.Xaml/Themes/themeresources.xaml'.
        Finished searching theme dictionary (active theme: 'Light').
      Finished searching dictionary 'ms-appx:///Microsoft.UI.Xaml/Themes/themeresources.xaml'.
    Finished searching merged dictionary with index '1'.
    Searching merged dictionary with index '0' for resource with key 'OutputTextBlockStyl'.
      Searching dictionary 'ms-appx:///ItemTemplates.xaml' for resource with key 'OutputTextBlockStyl'.
      Finished searching dictionary 'ms-appx:///ItemTemplates.xaml'.
    Finished searching merged dictionary with index '0'.
    Searching theme dictionary (active theme: 'Light') for resource with key 'OutputTextBlockStyl'.
      Searching dictionary 'ms-appx:///App.xaml' for resource with key 'OutputTextBlockStyl'.
      Finished searching dictionary 'ms-appx:///App.xaml'.
    Finished searching theme dictionary (active theme: 'Light').
  Finished searching dictionary 'ms-appx:///App.xaml'.
Finished search for resource with key 'OutputTextBlockStyl'.
```

--------------------------------

### SystemBackdropElement Initialization in C#

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/specs/SystemBackdropElement_Spec.md

Provides a C# code example for creating and configuring a SystemBackdropElement with a MicaBackdrop and CornerRadius.

```APIDOC
## SystemBackdropElement in C#

### Description
This C# code snippet demonstrates how to programmatically create a `SystemBackdropElement`, assign a `MicaBackdrop` to it, set a `CornerRadius`, and add it to a parent container.

### Code
```csharp
var backdropElement = new SystemBackdropElement
{
    SystemBackdrop = new MicaBackdrop(),
    CornerRadius = new CornerRadius(12)
};
rootGrid.Children.Add(backdropElement);
```
```

--------------------------------

### Initialize Repository with Init.cmd

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/src/controls/tools/CustomTasks/readme.md

Run the Init.cmd script from the repository root to initialize or update the project. This may involve NuGet feed updates, so allow time for synchronization.

```bash
Init.cmd
```

--------------------------------

### SystemBackdropElement Initialization in C++

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/specs/SystemBackdropElement_Spec.md

Illustrates how to create and set up a SystemBackdropElement using C++ with a MicaBackdrop and CornerRadius.

```APIDOC
## SystemBackdropElement in C++

### Description
This C++ code example shows the creation of a `SystemBackdropElement`, setting its `SystemBackdrop` to `MicaBackdrop`, and applying a `CornerRadius`.

### Code
```cpp
winrt::Microsoft::UI::Xaml::Controls::SystemBackdropElement backdropElement;
backdropElement.SystemBackdrop(winrt::Microsoft::UI::Xaml::Media::MicaBackdrop());
backdropElement.CornerRadius(winrt::CornerRadius{ 12, 12, 12, 12 });
rootGrid().Children().Append(backdropElement);
```
```

--------------------------------

### Initialize Build Environment

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/src/GettingStarted.md

Initialize the build environment for WinUI. Use init.cmd for Command Prompt or .\init.ps1 for PowerShell.

```bash
cd src
init.cmd
```

```powershell
.\init.ps1
```

--------------------------------

### Build WinUI Project

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/src/GettingStarted.md

Build the WinUI project from the command line. Use the /c parameter for a clean build.

```bash
.\build.cmd
```

```bash
.\build.cmd /c
```

--------------------------------

### Initialize Build Environment with Platform/Configuration (CMD)

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/src/GettingStarted.md

Use these commands to set specific platform and configuration environments for your build. Re-run after git pull.

```batch
init.cmd  x86chk
```

```batch
init.cmd  x86fre
```

```batch
init.cmd
```

```batch
init.cmd  x64chk
```

```batch
init.cmd  x64fre
```

```batch
init.cmd  arm64chk
```

```batch
init.cmd  arm64fre
```

--------------------------------

### Replace msedge.dll

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/src/controls/dev/WebView2/WebView2.md

Manually replace the msedge.dll in the Edge installation directory with the newly built version from the Anaheim repository. This is for updating binaries without a full installer.

```batch
copy <AnaheimRepo>\src\out\release_x86\msedge.dll  <EdgeInstallDir>\msedge.dll
```

--------------------------------

### Initialize Build Environment (CMD)

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/src/GettingStarted.md

Run this command in the src/ folder to initialize your build environment for an x64chk build. Re-run after git pull.

```batch
init.cmd
```

--------------------------------

### Replace EmbeddedBrowserWebView.dll

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/src/controls/dev/WebView2/WebView2.md

Manually replace the embeddedbrowserwebview.dll in the Edge installation directory with the newly built version from the Anaheim repository. This is for updating binaries without a full installer.

```batch
copy <AnaheimRepo>\src\out\release_x86\EBWebView\x86\EmbeddedBrowserWebView.dll
<EdgeInstallDir>\EBWebView\x86\embeddedbrowserwebview.dll
```

--------------------------------

### Create NuGet Package

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/src/controls/tools/CustomTasks/readme.md

Use the BuildNupkg.cmd script to pack the MUXCustomBuildTasks.nuspec file into a NuGet package. The package will be output to the current directory.

```bash
nuget pack MUXCustomBuildTasks.nuspec -OutputDirectory .
```

--------------------------------

### Initialize Build Environment (PowerShell)

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/src/GettingStarted.md

Run this command in the src/ folder to initialize your build environment. Re-run after git pull.

```powershell
.\init.ps1
```

--------------------------------

### CalendarView Corner Radius Example (Set)

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/specs/CalendarView/CalendarViewSpec1.md

When CalendarItemCornerRadius is explicitly set, CalendarView adopts this value for the corner radius of various visuals, such as backgrounds and borders. This example shows the property set to 4px.

```xaml
<!-- CalendarItemCornerRadius property set to 4 resulting in rounded square visuals. -->
```

--------------------------------

### Build Solution with Binlogs (x86 Release)

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/docs/debugging_buildfailures.md

Use this command in the Visual Studio command line to build your solution and capture binlogs for debugging.

```bash
msbuild /p:Platform=x86 /p:Configuration=Release /bl
```

--------------------------------

### Boilerplate code to get AppWindow before new API

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/specs/appwindow-spec.md

Demonstrates the extensive boilerplate code previously required to obtain an AppWindow from a Xaml Window. This includes getting the window object, its handle, and then the AppWindow.

```csharp
// This is needed to get any Window from inside a Xaml control 
var xamlWindow = WindowHelper.GetWindowForElement(this); // api to get window object from UIElement (not a real api)  

// unnecessary boiler plate code 
var windowId = Win32Interop.GetWindowIdFromWindow(WindowNative.GetWindowHandle(xamlWindow)); 
var appWindow = AppWindow.GetFromWindowId(windowId); 

//calling function foo  (not a real appwindow function)
appWindow.foo();
```

--------------------------------

### CommandBarFlyout Popup Placement Example

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/specs/Popup-AdditionalLayoutProperties-Spec.md

Demonstrates how the Placement APIs are used within a CommandBarFlyout's default template to position its secondary commands popup.

```xml
<!-- Part of the CommandBarFlyoutCommandBar's default template -->
<Popup
    x:Name="OverflowPopup"
    PlacementTarget="{Binding ElementName=PrimaryItemsRoot}"
    DesiredPlacement="Bottom">
</Popup>
```

--------------------------------

### CalendarView Corner Radius Example (Default)

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/specs/CalendarView/CalendarViewSpec1.md

When CalendarItemCornerRadius is unset, CalendarView automatically applies a corner radius equal to half the item size, resulting in circular visuals. This example illustrates the default behavior.

```xaml
<!-- Unset CalendarItemCornerRadius property resulting in circular visuals. -->
```

--------------------------------

### Start Thumb Animation on Interaction Visual

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/specs/ScrollingControls/ScrollPresenter.md

Starts the thumb offset animation on the interaction visual's Translation property (X or Y) based on the specified orientation. This requires the interaction visual and the thumb offset animation to be ready.

```C#
private void StartThumbAnimation(Orientation orientation)
{
    if (interactionVisual != null && thumbOffsetAnimation != null)
    {
        if (orientation == Orientation.Horizontal)
        {
            interactionVisual.StartAnimation("Translation.X", thumbOffsetAnimation);
        }
        else
        {
            interactionVisual.StartAnimation("Translation.Y", thumbOffsetAnimation);
        }
    }
}
```

--------------------------------

### InteractionElement

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/specs/ScrollingControls/ScrollPresenter.md

Gets the UI element that is handling the scroll interactions.

```APIDOC
## InteractionElement

### Description
Retrieves the UI element responsible for managing scroll interactions.

### Property
```csharp
public UIElement InteractionElement { get; }
```
```

--------------------------------

### Custom MicaSystemBackdrop Implementation

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/specs/xaml-backdrop-api.md

Implement a custom system backdrop using MicaController. This example shows how to connect and disconnect targets, manage the MicaController, and handle potential sharing scenarios. Ensure to call the base OnTargetConnected to initialize default configurations.

```cs
public class MicaSystemBackdrop : SystemBackdrop
{
    MicaController _micaController;

    protected override void OnTargetConnected(ICompositionSupportsSystemBackdrop connectedTarget, XamlRoot xamlRoot)
    {
        base.OnTargetConnected(connectedTarget, xamlRoot);

        if(_micaController != null)
        {
            throw new Exception("This controller cannot be shared");
        }

        SetControllerConfig(connectedTarget, xamlRoot);

        _micaController = new MicaController();
        _micaController.AddSystemBackdropTarget(connectedTarget);
    }

    protected override void OnTargetDisconnected(ICompositionSupportsSystemBackdrop disconnectedTarget)
    {
        base.OnTargetDisconnected(disconnectedTarget);

        _micaController.RemoveSystemBackdropTarget(disconnectedTarget);
        _micaController = null;
    }

    void SetControllerConfig(ICompositionSupportsSystemBackdrop connectedTarget, XamlRoot xamlRoot)
    {

```

--------------------------------

### IRawElementProviderSimple2 Methods

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/src/controls/dev/WebView2/WebView2-Accessibility.md

Method for showing the context menu.

```APIDOC
## IRawElementProviderSimple2 Methods

### ShowContextMenu

Shows the context menu for the element.

```cpp
HRESULT ShowContextMenu();
```
```

--------------------------------

### TitleBar.IconSource Property

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/specs/TitleBar/titlebar-functional-spec.md

Gets or sets the TitleBar's icon.

```APIDOC
## TitleBar.IconSource Property

### Description
Gets or sets the TitleBar's icon.

### Property Value
Represents the icon associated with the `TitleBar`. The default is `null`.
```

--------------------------------

### TitleBar.IsPaneToggleButtonVisible Property

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/specs/TitleBar/titlebar-functional-spec.md

Gets or sets TitleBar's PaneToggleButton visiblity.

```APIDOC
## TitleBar.IsPaneToggleButtonVisible Property

### Description
Gets or sets TitleBar's PaneToggleButton visiblity.

### Property Value
Represents the visiblity of TitleBar's PaneToggleButton. The default is `false`.

### Remarks
TitleBar's PaneToggleButton is only used with NavigationView and when NavigationView is in `Minimal` DisplayMode. 
In other display mode scenarios, the PaneToggleButton is owned and handled by NavigationView.
```

--------------------------------

### Switch to WinUI Main Branch

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/src/GettingStarted.md

Switch to the main development branch of the WinUI repository.

```bash
git checkout winui3/main
```

--------------------------------

### TitleBar.IsBackButtonEnabled Property

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/specs/TitleBar/titlebar-functional-spec.md

Gets or sets BackButton's IsEnabled property.

```APIDOC
## TitleBar.IsBackButtonEnabled Property

### Description
Gets or sets BackButton's IsEnabled property.

### Property Value
Represents the IsEnabled property of TitleBar's BackButton. The default is `true`.

### Remarks
This property is typically bound to an accompanying NavFrame's `CanGoBack` property:
`IsBackButtonEnabled="{x:Bind NavFrame.CanGoBack}"`
```

--------------------------------

### IRawElementProviderSimple Methods

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/src/controls/dev/WebView2/WebView2-Accessibility.md

Implement these methods to provide basic accessibility information for UI elements.

```cpp
HRESULT get_ProviderOptions(_Out_ ProviderOptions * pRetVal);
HRESULT GetPatternProvider(_In_ PATTERNID patternId, _Out_ IUnknown ** pRetVal);
HRESULT GetPropertyValue(_In_ PROPERTYID propertyId, _Out_ VARIANT * pRetVal);
HRESULT get_HostRawElementProvider(_Out_ IRawElementProviderSimple ** pRetVal);
```

--------------------------------

### Configure System Backdrop

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/specs/xaml-backdrop-api.md

Sets the system backdrop configuration using default parameters. Ensure the SystemBackdropController is initialized before calling this method.

```csharp
var config = GetDefaultSystemBackdropConfiguration(connectedTarget, xamlRoot);
_micaController.SetSystemBackdropConfiguration(config);
```

--------------------------------

### TitleBar.IsBackButtonVisible Property

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/specs/TitleBar/titlebar-functional-spec.md

Gets or sets TitleBar's BackButton visiblity.

```APIDOC
## TitleBar.IsBackButtonVisible Property

### Description
Gets or sets TitleBar's BackButton visiblity.

### Property Value
Represents the visiblity of TitleBar's BackButton. The default is `false`.
```

--------------------------------

### AreInteractionsAllowed

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/specs/ScrollingControls/ScrollPresenter.md

Gets a value indicating whether user interactions are currently allowed.

```APIDOC
## AreInteractionsAllowed

### Description
Indicates whether the ScrollPresenter is currently accepting user input for scrolling.

### Property
```csharp
public bool AreInteractionsAllowed { get; private set; }
```
```

--------------------------------

### Pack WebView2 Runtime NuGet Package

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/src/controls/dev/WebView2/WebView2-update.md

Use the nuget pack command to create the NuGet package for the WebView2 runtime. Ensure the correct .nuspec path and output directory are specified. This command may produce warnings about deprecated elements.

```powershell
> nuget pack <repo_root>\dxaml\external\Microsoft.UI.DCPP.Dependencies.Edge.nuspec -OutputDirectory <repo_root>\packages\Microsoft.UI.DCPP.Dependencies.Edge

Attempting to build package from 'Microsoft.UI.DCPP.Dependencies.Edge.nuspec'.
Successfully created package 'C:\Users\dkomin\source\repos\microsoft-ui-xaml-lift-full\packages\Microsoft.UI.DCPP.Dependencies.Edge\Microsoft.UI.DCPP.Dependencies.Edge.80.0.333.nupkg'.
WARNING: NU5048: The 'PackageIconUrl'/'iconUrl' element is deprecated. Consider using the 'PackageIcon'/'icon' element instead. Learn more at https://aka.ms/deprecateIconUrl
```

--------------------------------

### Get Interaction Element

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/specs/ScrollingControls/ScrollPresenter.md

Retrieves the UIElement that serves as the interaction element for scrolling.

```csharp
public UIElement InteractionElement
{
    get;
}
```

--------------------------------

### CalendarView.BlackoutBackground

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/specs/CalendarView/CalendarViewSpec1.md

Gets or sets a brush that provides the background of calendar items while they are blacked out.

```APIDOC
## CalendarView.BlackoutBackground

### Description
Gets or sets a brush that provides the background of calendar items while they are blacked out.

### Property
`public Windows.UI.Xaml.Media.Brush BlackoutBackground { get; set; }`
```

--------------------------------

### Build App Package Binlogs (x86 Release)

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/docs/debugging_buildfailures.md

This command simulates collecting binlogs when encountering issues with creating app packages. Ensure you are in the Visual Studio command line.

```bash
msbuild /p:AppxBundlePlatforms=x86 /p:Platform=x86 /p:Configuration=Release /p:BuildAppxUploadPackageForUap=true /bl
```

--------------------------------

### CalendarView.CalendarItemHoverBackground

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/specs/CalendarView/CalendarViewSpec1.md

Gets or sets a brush that provides the background of a calendar item while the pointer is over it.

```APIDOC
## CalendarView.CalendarItemHoverBackground

### Description
Gets or sets a brush that provides the background of a calendar item while the pointer is over it.

### Property
`public Windows.UI.Xaml.Media.Brush CalendarItemHoverBackground { get; set; }`
```

--------------------------------

### Basic ScrollView Usage

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/specs/ScrollingControls/ScrollView.md

Shows the equivalent usage of the new ScrollView control, demonstrating how to reference it using a namespace prefix. This example is for the new ScrollView control.

```xml
<Page xmlns=<http://schemas.microsoft.com/winfx/2006/xaml/presentation>
      xmlns:mux="using:Microsoft.UI.Xaml.Controls">
    <mux:ScrollView>
        <TextBlock Text="{x:Bind AllTheText}" TextWrapping="Wrap" />
    </mux:ScrollView>
</Page>
```

--------------------------------

### CalendarView.FirstOfMonthLabelMargin

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/specs/CalendarView/CalendarViewSpec1.md

Gets or sets the margin used to display the first-of-month banner in the calendar.

```APIDOC
## CalendarView.FirstOfMonthLabelMargin

### Description
Gets or sets the margin used to display the first-of-month banner in the calendar.

### Method
Public property with get and set accessors.

### Endpoint
N/A (SDK Property)

### Parameters
N/A

### Request Example
```xml
<CalendarView FirstOfMonthLabelMargin="{Thickness 8}"/>
```

### Response
#### Success Response
Returns the current `Windows.UI.Xaml.Thickness` value.

#### Response Example
```xml
<Thickness>8</Thickness>
```
```

--------------------------------

### ScrollView.ContentOrientation Property

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/specs/ScrollingControls/ScrollView.md

Gets or sets the preferred content orientation for the ScrollView. Defaults to Vertical.

```APIDOC
## ScrollView.ContentOrientation Property

Gets or sets the preferred content orientation. Defaults to Vertical.

This property affects the ScrollPresenter's MeasureOverride behavior:

- **Vertical**: The ScrollPresenter.Content's available width is set to the ScrollPresenter's available width. Otherwise, the ScrollPresenter.Content's available width is infinity.
- **Horizontal**: The ScrollPresenter.Content's available height is set to the ScrollPresenter's available height. Otherwise, the ScrollPresenter.Content's available height is infinity.
```

--------------------------------

### Build CustomTasks.sln with MSBuild

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/src/controls/tools/CustomTasks/readme.md

Build the CustomTasks solution for the Release configuration using MSBuild. Ensure all necessary NuGet packages are restored.

```bash
MSBuild.exe CustomTasks.sln /restore /p:Configuration=Release /p:Platform="Any CPU"
```

--------------------------------

### IsInteractionElementRailEnabled

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/specs/ScrollingControls/ScrollPresenter.md

Gets a value indicating whether the interaction element's rail is enabled.

```APIDOC
## IsInteractionElementRailEnabled

### Description
Indicates whether the visual rail associated with the interaction element is enabled. This property always returns true.

### Property
```csharp
public bool IsInteractionElementRailEnabled { get; }
```
```

--------------------------------

### IsInteracting

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/specs/ScrollingControls/ScrollPresenter.md

Gets a value indicating whether the user is currently interacting with the scrollable content.

```APIDOC
## IsInteracting

### Description
Indicates whether a scroll interaction is currently in progress.

### Property
```csharp
public bool IsInteracting { get; private set; }
```
```

--------------------------------

### Initialize and Update InfoBadge in C#

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/specs/InfoBadge/InfoBadge-spec.md

This C# code demonstrates initializing NavigationViewItems with InfoBadges and updating the badge when a message is received.

```csharp
public sealed partial class MainPage : Page
{

    public MainPage()
    {
        this.InitializeComponent();

        
        // Initialize icons for NavigationView items
        SymbolIcon HomeIcon = new SymbolIcon(Symbol.Home);
        SymbolIcon AcctIcon = new SymbolIcon(Symbol.Contact);
        SymbolIcon MailIcon = new SymbolIcon(Symbol.Mail);

        // Initialize an InfoBadge for the Mail item that is not visible on page load
        InfoBadge MailBadge = new InfoBadge();
        MailBadge.Value = 0;
        MailBadge.IsOpen = false;

        //Populate NavigationView
        List<CustomNavObject> navItems = new List<CustomNavObject>(){
            new CustomNavObject("Home", "home", HomeIcon),
            new CustomNavObject("Account", "acct", AccountIcon),
            new CustomNavObject("Mail", "mail", MailIcon, MailBadge)
        };
    }

    // This function is called when a new message is received.
    private void OnMessageReceived(string msg)
    {
        //Once a new message is received, update the InfoBadge being shown on the Mail navigation item. 
           MailBadge.Value +=1;
           MailBadge.IsOpen = true;
    }
}

public class CustomNavObject
{
    public string Title { get; set; }
    public string Tag { get; set; }
    public IconSource ItemIcon { get; set; }
    public InfoBadge ItemInfoBadge { get; set; }

    public CustomNavObject(string title, string tag, IconSource icon)
    {
        Title = title;
        Tag = tag;
        ItemIcon =  icon;
    }

    public CustomNavObject(string title, string tag, IconSource icon, InfoBadge badge)
    {
        Title = title;
        Tag = tag;
        ItemIcon =  icon;
        ItemInfoBadge = badge;
    }

}
```

--------------------------------

### CalendarView.TodayBackground

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/specs/CalendarView/CalendarViewSpec1.md

Gets or sets a brush that provides the background of the calendar item for the current date.

```APIDOC
## CalendarView.TodayBackground

### Description
Gets or sets a brush that provides the background of the calendar item for the current date.

### Property
`public Windows.UI.Xaml.Media.Brush TodayBackground { get; set; }`
```

--------------------------------

### SystemBackdropElement with MicaBackdrop in C++

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/specs/SystemBackdropElement_Spec.md

Create a SystemBackdropElement with a MicaBackdrop and add it to a grid using C++ WinRT. 'rootGrid()' should be the panel containing the backdrop.

```cpp
winrt::Microsoft::UI::Xaml::Controls::SystemBackdropElement backdropElement;
backdropElement.SystemBackdrop(winrt::Microsoft::UI::Xaml::Media::MicaBackdrop());
backdropElement.CornerRadius(winrt::CornerRadius{ 12, 12, 12, 12 });
rootGrid().Children().Append(backdropElement);
```

--------------------------------

### CalendarView.CalendarItemDisabledBackground

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/specs/CalendarView/CalendarViewSpec1.md

Gets or sets a brush that provides the background of a calendar item while it's disabled.

```APIDOC
## CalendarView.CalendarItemDisabledBackground

### Description
Gets or sets a brush that provides the background of a calendar item while it's disabled.

### Property
`public Windows.UI.Xaml.Media.Brush CalendarItemDisabledBackground { get; set; }`
```

--------------------------------

### Copy WinUI Binaries Post-Build

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/src/GettingStarted.md

Add a target to your project file to automatically copy the built WinUI binaries to your app's output folder after the build completes.

```xml
<Target Name="CopyWinUIBinaries" AfterTargets="Build">
    <ItemGroup>
      <WinUIBinaries Include="C:\winui3\src\BuildOutput\packaging\Debug\runtimes\win10-$(Platform)\native\**\*.*" />
    </ItemGroup>
    <Copy SourceFiles="@(WinUIBinaries)" DestinationFolder="$(OutputPath)" />
  </Target>
```

--------------------------------

### CalendarView.CalendarItemPressedBackground

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/specs/CalendarView/CalendarViewSpec1.md

Gets or sets a brush that provides the background of a calendar item while it's pressed.

```APIDOC
## CalendarView.CalendarItemPressedBackground

### Description
Gets or sets a brush that provides the background of a calendar item while it's pressed.

### Property
`public Windows.UI.Xaml.Media.Brush CalendarItemPressedBackground { get; set; }`
```

--------------------------------

### Create a basic InfoBadge

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/specs/InfoBadge/InfoBadge-spec.md

Use this snippet to create a simple InfoBadge that displays a dot. This is useful for indicating the presence of new information without a specific count.

```xml
<InfoBadge />
```

--------------------------------

### CalendarView.SelectedHoverForeground

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/specs/CalendarView/CalendarViewSpec1.md

Gets or sets a brush that provides the foreground of a selected calendar item while the pointer is over it.

```APIDOC
## CalendarView.SelectedHoverForeground

### Description
Gets or sets a brush that provides the foreground of a selected calendar item while the pointer is over it.

### Property
`public Windows.UI.Xaml.Media.Brush SelectedHoverForeground { get; set; }`
```

--------------------------------

### Animated Icon Control Template Example

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/src/controls/dev/AnimatedIcon/Docs/AnimatedIconDevDesign.md

Demonstrates how to integrate an AnimatedIcon into a Button's control template, allowing its state to be controlled by VisualStateManager.

```xaml
<Button Content="Hello Button" Width="200" Height="40">
    <Button.Style>
        <Style TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                        <VisualState.Setters>
                                            <Setter Target="Icon.(AnimatedIcon.State)" Value="Normal"/>
                                        </VisualSTate.Setters>
                                    </VisualState>
                                    <VisualState x:Name="PointerOver">
                                        <VisualState.Setters>
                                            <Setter Target="Icon.(AnimatedIcon.State)" Value="Hover"/>
                                        </VisualSTate.Setters>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <VisualState.Setters>
                                            <Setter Target="Icon.(AnimatedIcon.State)" Value="Pressed"/>
                                        </VisualSTate.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>

                            <ContentPresenter
                                x:Name="ContentPresenter"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Content="{TemplateBinding Content}"
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                ContentTransitions="{TemplateBinding ContentTransitions}"
                                Padding="{TemplateBinding Padding}"
                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                AutomationProperties.AccessibilityView="Raw" />

                            <Grid x:Name="Icon" HorizontalAlignment="Right" Content="{TemplateBinding Icon}"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Button.Style>
</Button>
```

--------------------------------

### CalendarView.DisabledForeground

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/specs/CalendarView/CalendarViewSpec1.md

Gets or sets a brush that provides the foreground of a calendar item while it's disabled.

```APIDOC
## CalendarView.DisabledForeground

### Description
Gets or sets a brush that provides the foreground of a calendar item while it's disabled.

### Method
Public property with get and set accessors.

### Endpoint
N/A (SDK Property)

### Parameters
N/A

### Request Example
```xml
<CalendarView DisabledForeground="{StaticResource CalendarViewDisabledForeground}"/>
```

### Response
#### Success Response
Returns the current `Windows.UI.Xaml.Media.Brush` value.

#### Response Example
```xml
<Brush>#808080</Brush>
```
```

--------------------------------

### CalendarView.FirstOfYearDecadeLabelMargin

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/specs/CalendarView/CalendarViewSpec1.md

Gets or sets the margin used to display the first of year/decade banner in the calendar.

```APIDOC
## CalendarView.FirstOfYearDecadeLabelMargin

### Description
Gets or sets the margin used to display the first of year/decade banner in the calendar.

### Method
Public property with get and set accessors.

### Endpoint
N/A (SDK Property)

### Parameters
N/A

### Request Example
```xml
<CalendarView FirstOfYearDecadeLabelMargin="{Thickness 12}"/>
```

### Response
#### Success Response
Returns the current `Windows.UI.Xaml.Thickness` value.

#### Response Example
```xml
<Thickness>12</Thickness>
```
```

--------------------------------

### Initialize Interaction Element and Event Handlers

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/specs/ScrollingControls/ScrollPresenter.md

Sets up the interaction element, retrieves its visual, enables translation, and attaches event handlers for pointer and manipulation events. It also enables tap events on the parent element.

```C#
if (interactionFrameworkElement != null)
{
    interactionVisual = ElementCompositionPreview.GetElementVisual(interactionFrameworkElement);
    ElementCompositionPreview.SetIsTranslationEnabled(interactionFrameworkElement, true);
    StartThumbAnimation(Orientation);

    interactionFrameworkElement.PointerPressed += InteractionFrameworkElement_PointerPressed;
    interactionFrameworkElement.ManipulationStarting += InteractionFrameworkElement_ManipulationStarting;
    interactionFrameworkElement.ManipulationDelta += InteractionFrameworkElement_ManipulationDelta;
    interactionFrameworkElement.ManipulationCompleted += InteractionFrameworkElement_ManipulationCompleted;

    FrameworkElement parent = interactionFrameworkElement.Parent as FrameworkElement;
    if (parent != null)
    {
        parent.IsTapEnabled = true;
        parent.PointerPressed += Parent_PointerPressed;
    }
}
else
{
    interactionVisual = null;
}
```

--------------------------------

### IRawElementProviderSimple2 Methods

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/src/controls/dev/WebView2/WebView2-Accessibility.md

Extend accessibility with additional methods for UI element interaction.

```cpp
HRESULT ShowContextMenu();
```

--------------------------------

### TitleBar.ContentAfter Property

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/specs/TitleBar/titlebar-functional-spec.md

Gets and sets elements within the TitleBar's ContentAfter column.

```APIDOC
## TitleBar.ContentAfter Property

### Description
Gets and sets elements within the TitleBar's ContentAfter column.

### Property Value
Represents the ContentAfter property of the `TitleBar` control which can be populated in both XAML markup and code.

This is typically used to populate controls such as `PersonPicture` and the "More" `AppBarButton`. The default is `null`.

### Remarks
The content property of `ContentAfter` can only be set once. Elements are right aligned by default.

If the property is not `null`, TitleBar automatically configures its height to `TitleBarExpandedHeight` in codebehind. See ThemeResources section for further details.
```

--------------------------------

### Apply Mica Backdrop to Window

Source: https://context7.com/microsoft/microsoft-ui-xaml/llms.txt

Use MicaBackdrop with MicaKind BaseAlt for a frosted effect on transparent areas like navigation panes.

```xml
<!-- Mica BaseAlt variant — transparent nav pane becomes frosted -->
<Window x:Class="MyApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Window.SystemBackdrop>
        <MicaBackdrop MicaKind="BaseAlt"/>
    </Window.SystemBackdrop>

    <Grid ColumnDefinitions="240,*">
        <!-- Transparent nav pane: Mica shows through -->
        <NavigationView Background="Transparent" Grid.Column="0"/>
        <!-- Opaque content area: backdrop not visible -->
        <Frame x:Name="ContentFrame" Grid.Column="1" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"/>
    </Grid>
</Window>
```

--------------------------------

### TitleBar.Content Property

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/specs/TitleBar/titlebar-functional-spec.md

Gets and sets elements within the TitleBar's Content column.

```APIDOC
## TitleBar.Content Property

### Description
Gets and sets elements within the TitleBar's Content column.

### Property Value
Represents the Content property of the `TitleBar` control which can be populated in both XAML markup and code.

This is typically used to populate controls such as `AutoSuggestBox`. The default is `null`.

### Remarks
The content property of `Content` can only be set once. Elements are center aligned by default.

If the property is not `null`, TitleBar automatically configures its height to `TitleBarExpandedHeight` in codebehind. See ThemeResources section for further details.
```

--------------------------------

### Set TitleBar Icon

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/specs/TitleBar/titlebar-functional-spec.md

Gets or sets the icon for the TitleBar. The default value is null.

```cs
public IconSource IconSource { get; set; }
```

--------------------------------

### ColorPicker.Orientation Property

Source: https://github.com/microsoft/microsoft-ui-xaml/blob/main/specs/ColorPicker/ColorPicker.Orientation.md

Gets or sets the orientation in which the parts of the ColorPicker will be laid out. Defaults to Vertical.

```APIDOC
## ColorPicker.Orientation Property

### Description
Gets or sets the orientation in which the parts of the ColorPicker will be laid out. Defaults to `Vertical`.

Using the orientation, you can specify whether the editing controls should be laid out underneath the color area (vertical orientation) or to the side of it (horizontal orientation).

| Orientation | Meaning |
|-------------|---------|
| Horizontal  | The editing controls will be put to the side of the color spectrum.|
| Vertical    | The editing controls will be put underneath the color spectrum.|

### Note
When the `Orientation` property is set to `Horizontal`, the ColorPicker will NOT respect the IsMoreButton enabled property. Instead, the text input fields will always be displayed to the side of the ColorPicker. In addition to that, when in `Horizontal` mode, when the text input fields are being used, there will be a margin of `122px` to the right of the input fields. This margin accounts for the different localizations of the different localizations of the labels of said fields and ensures that those labels will not be cut off. This margin is determined by the `ColorPickerTextInputHorizontalOrientationMargin` lightweight styling resource. If your app is only available in English, you can override this resource and set the margin to `74px` to improve the horizontal footprint of the control. The resource does have not have any effect when the `Orientation` is set to `Vertical`.

### API Details

```csharp
namespace Microsoft.UI.Xaml.Controls
{
  [webhosthidden]
  unsealed runtimeclass ColorPicker
  {
      // Existing ...

      // Gets or sets the Orientation of the ColorPicker
      Windows.UI.Xaml.Controls.Orientation Orientation;
  }
}
```
```