diff --git a/hub/apps/develop/ui/controls/auto-suggest-box.md b/hub/apps/develop/ui/controls/auto-suggest-box.md index ede503c307..5c33b8ee47 100644 --- a/hub/apps/develop/ui/controls/auto-suggest-box.md +++ b/hub/apps/develop/ui/controls/auto-suggest-box.md @@ -144,5 +144,5 @@ Here's an AutoSuggestBox with a 'find' icon. - [Text controls](../../../design/controls/text-controls.md) - [Spell checking](../../../design/controls/text-controls.md) - [TextBox class](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.textbox) -- [Windows.UI.Xaml.Controls PasswordBox class](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.passwordbox) +- [Microsoft.UI.Xaml.Controls.PasswordBox class](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.passwordbox) - [String.Length property](/dotnet/api/system.string.length) \ No newline at end of file diff --git a/hub/apps/develop/ui/controls/commanding.md b/hub/apps/develop/ui/controls/commanding.md index cbcb222447..17731cb818 100644 --- a/hub/apps/develop/ui/controls/commanding.md +++ b/hub/apps/develop/ui/controls/commanding.md @@ -16,7 +16,7 @@ In this topic, we describe commanding in Windows applications. Specifically, we ## Important APIs -- [Windows.UI.Xaml.Input.ICommand](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.input.icommand) and [System.Windows.Input.ICommand](/dotnet/api/system.windows.input.icommand) +- [Microsoft.UI.Xaml.Input.ICommand](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.input.icommand) and [System.Windows.Input.ICommand](/dotnet/api/system.windows.input.icommand) - [XamlUICommand](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.input.xamluicommand) - [StandardUICommand](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.input.standarduicommand) @@ -70,16 +70,16 @@ To provide rich and comprehensive user experiences across command surfaces effic To bind a control to a shared command resource, you can implement the ICommand interfaces yourself, or you can build your command from either the [XamlUICommand](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.input.xamluicommand) base class or one of the platform commands defined by the [StandardUICommand](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.input.standarduicommand) derived class. -- The ICommand interface ([Windows.UI.Xaml.Input.ICommand](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.input.icommand) or [System.Windows.Input.ICommand](/dotnet/api/system.windows.input.icommand)) lets you create fully customized, reusable commands across your app. +- The ICommand interface ([Microsoft.UI.Xaml.Input.ICommand](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.input.icommand) or [System.Windows.Input.ICommand](/dotnet/api/system.windows.input.icommand)) lets you create fully customized, reusable commands across your app. - [XamlUICommand](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.input.xamluicommand) also provides this capability but simplifies development by exposing a set of built-in command properties such as the command behavior, keyboard shortcuts (access key and accelerator key), icon, label, and description. - [StandardUICommand](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.input.standarduicommand) simplifies things further by letting you choose from a set of standard platform commands with predefined properties. > [!Important] -> In WinUI applications, commands are implementations of either the [Windows.UI.Xaml.Input.ICommand](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.input.icommand) (C++) or the [System.Windows.Input.ICommand](/dotnet/api/system.windows.input.icommand) (C#) interface, depending on your chosen language framework. +> In WinUI applications, commands are implementations of either the [Microsoft.UI.Xaml.Input.ICommand](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.input.icommand) (C++) or the [System.Windows.Input.ICommand](/dotnet/api/system.windows.input.icommand) (C#) interface, depending on your chosen language framework. ## Command experiences using the StandardUICommand class -Derived from [XamlUICommand](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.input.xamluicommand) (derived from [Windows.UI.Xaml.Input.ICommand](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.input.icommand) for C++ or [System.Windows.Input.ICommand](/dotnet/api/system.windows.input.icommand) for C#), the [StandardUICommand](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.input.standarduicommand) class exposes a set of standard platform commands with pre-defined properties such as icon, keyboard accelerator, and description. +Derived from [XamlUICommand](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.input.xamluicommand) (derived from [Microsoft.UI.Xaml.Input.ICommand](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.input.icommand) for C++ or [System.Windows.Input.ICommand](/dotnet/api/system.windows.input.icommand) for C#), the [StandardUICommand](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.input.standarduicommand) class exposes a set of standard platform commands with pre-defined properties such as icon, keyboard accelerator, and description. A [StandardUICommand](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.input.standarduicommand) provides a quick and consistent way to define common commands such as `Save` or `Delete`. All you have to do is provide the execute and canExecute functions. @@ -91,7 +91,7 @@ A [StandardUICommand](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.input | Download the code for this example | | -------------------- | -| [Commanding sample (StandardUICommand)](https://github.com/MicrosoftDocs/windows-topic-specific-samples/archive/uwp-commanding-standarduicommand.zip) | +| [StandardUICommandPage (WinUI Gallery)](https://github.com/microsoft/WinUI-Gallery/blob/main/WinUIGallery/Samples/ControlPages/StandardUICommandPage.xaml.cs) | In this example, we show how to enhance a basic [ListView](../../../design/controls/listview-and-gridview.md) with a Delete item command implemented through the [StandardUICommand](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.input.standarduicommand) class, while optimizing the user experience for a variety of input types using a [MenuBar](../../../design/controls/menus.md), [Swipe](../../../design/controls/swipe.md) control, hover buttons, and [context menu](../../../design/controls/menus.md). @@ -371,10 +371,10 @@ If you need to create a command that isn't defined by the [StandardUICommand](/w | Download the code for this example | | -------------------- | -| [WinUI commanding sample (XamlUICommand)](https://github.com/MicrosoftDocs/windows-topic-specific-samples/archive/uwp-commanding-xamluicommand.zip) | +| [XamlUICommandPage (WinUI Gallery)](https://github.com/microsoft/WinUI-Gallery/blob/main/WinUIGallery/Samples/ControlPages/XamlUICommandPage.xaml.cs) | | Download the code for this example | | -------------------- | -| [Commanding sample (XamlUICommand)](https://github.com/MicrosoftDocs/windows-topic-specific-samples/archive/uwp-commanding-xamluicommand.zip) | +| [XamlUICommandPage (WinUI Gallery)](https://github.com/microsoft/WinUI-Gallery/blob/main/WinUIGallery/Samples/ControlPages/XamlUICommandPage.xaml.cs) | Many platform controls use the XamlUICommand properties under the covers, just like our StandardUICommand example in the previous section. **Xaml:** @@ -605,7 +605,7 @@ private void ListViewSwipeContainer_PointerExited(object sender, PointerRoutedEv Standard WinUI controls (button, list, selection, calendar, predictive text) provide the basis for many common command experiences. For a complete list of control types, see [Controls and patterns for Windows apps](../../../design/controls/index.md). -The most basic way to support a structured commanding experience is to define an implementation of the ICommand interface ([Windows.UI.Xaml.Input.ICommand](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.input.icommand) for C++ or [System.Windows.Input.ICommand](/dotnet/api/system.windows.input.icommand) for C#). This ICommand instance can then be bound to controls such as buttons. +The most basic way to support a structured commanding experience is to define an implementation of the ICommand interface ([Microsoft.UI.Xaml.Input.ICommand](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.input.icommand) for C++ or [System.Windows.Input.ICommand](/dotnet/api/system.windows.input.icommand) for C#). This ICommand instance can then be bound to controls such as buttons. > [!NOTE] > In some cases, it might be just as efficient to bind a method to the Click event and a property to the IsEnabled property. @@ -618,13 +618,13 @@ Standard WinUI controls (button, list, selection, calendar, predictive text) pro | Download the code for this example | | -------------------- | -| [Commanding sample (ICommand)](https://github.com/MicrosoftDocs/windows-topic-specific-samples/archive/uwp-commanding-icommand.zip) | +| [CommandBarPage (WinUI Gallery)](https://github.com/microsoft/WinUI-Gallery/blob/main/WinUIGallery/Samples/ControlPages/CommandBarPage.xaml.cs) | In this basic example, we demonstrate how a single command can be invoked with a button click, a keyboard accelerator, and rotating a mouse wheel. | Download the code for this example | | -------------------- | -| [Commanding sample (ICommand)](https://github.com/MicrosoftDocs/windows-topic-specific-samples/archive/uwp-commanding-icommand.zip) | +| [CommandBarPage (WinUI Gallery)](https://github.com/microsoft/WinUI-Gallery/blob/main/WinUIGallery/Samples/ControlPages/CommandBarPage.xaml.cs) | ```xaml **Important APIs**: [MediaPlayerElement](/uwp/api/windows.ui.xaml.controls.mediaplayerelement), [MediaPlayerElement.AreTransportControlsEnabled](/uwp/api/windows.ui.xaml.controls.mediaplayerelement.aretransportcontrolsenabled), [MediaTransportControls](/uwp/api/Windows.Media.SystemMediaTransportControls) +> **Important APIs**: [MediaPlayerElement](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.mediaplayerelement), [MediaPlayerElement.AreTransportControlsEnabled](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.mediaplayerelement.aretransportcontrolsenabled), [MediaTransportControls](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.mediatransportcontrols) Before starting, you should be familiar with the MediaPlayerElement and the MediaTransportControls classes. For more info, see the MediaPlayerElement control guide. > [!TIP] -> The examples in this topic are based on the [Media Transport Controls sample](https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/XamlCustomMediaTransportControls). You can download the sample to view and run the completed code. +> The examples in this topic are based on the [Media Transport Controls sample](https://github.com/microsoft/WinUI-Gallery/blob/main/WinUIGallery/Samples/ControlPages/MediaPlayerElementPage.xaml.cs). You can download the sample to view and run the completed code. ## When should you customize the template? -**MediaPlayerElement** has built-in transport controls that are designed to work well without modification in most video and audio playback apps. They're provided by the [**MediaTransportControls**](/uwp/api/Windows.UI.Xaml.Controls.MediaTransportControls) class and include buttons to play, stop, and navigate media, adjust volume, toggle full screen, cast to a second device, enable captions, switch audio tracks, and adjust the playback rate. MediaTransportControls has properties that let you control whether each button is shown and enabled. You can also set the [**IsCompact**](/uwp/api/windows.ui.xaml.controls.mediatransportcontrols.iscompact) property to specify whether the controls are shown in one row or two. +**MediaPlayerElement** has built-in transport controls that are designed to work well without modification in most video and audio playback apps. They're provided by the [**MediaTransportControls**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.MediaTransportControls) class and include buttons to play, stop, and navigate media, adjust volume, toggle full screen, cast to a second device, enable captions, switch audio tracks, and adjust the playback rate. MediaTransportControls has properties that let you control whether each button is shown and enabled. You can also set the [**IsCompact**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.mediatransportcontrols.iscompact) property to specify whether the controls are shown in one row or two. However, there may be scenarios where you need to further customize the look of the control or change its behavior. Here are some examples: - Change the icons, slider behavior, and colors. @@ -42,17 +42,17 @@ You can customize the appearance of the control by modifying the default templat ## Template structure -The [**ControlTemplate**](/uwp/api/Windows.UI.Xaml.Controls.ControlTemplate) is part of the default style. You can copy this default style into your project to modify it. The ControlTemplate is divided into sections similar to other XAML control templates. -- The first section of the template contains the [**Style**](/uwp/api/Windows.UI.Xaml.Style) definitions for the various components of the MediaTransportControls. +The [**ControlTemplate**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.ControlTemplate) is part of the default style. You can copy this default style into your project to modify it. The ControlTemplate is divided into sections similar to other XAML control templates. +- The first section of the template contains the [**Style**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.Style) definitions for the various components of the MediaTransportControls. - The second section defines the various visual states that are used by the MediaTransportControls. -- The third section contains the [**Grid**](/uwp/api/Windows.UI.Xaml.Controls.Grid) that holds that various MediaTransportControls elements together and defines how the components are laid out. +- The third section contains the [**Grid**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.Grid) that holds that various MediaTransportControls elements together and defines how the components are laid out. > [!NOTE] -> For more info about modifying templates, see [Control templates](../../platform/xaml/xaml-control-templates.md). You can use a text editor or similar editors in your IDE to open the XAML files in \(*Program Files*)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\\(*SDK version*)\Generic. The default style and template for each control is defined in the **generic.xaml** file. You can find the MediaTransportControls template in generic.xaml by searching for "MediaTransportControls". +> For more info about modifying templates, see [Control templates](../../platform/xaml/xaml-control-templates.md). In WinUI 3, you can extract the default control template using Visual Studio: right-click the control in the XAML designer and select **Edit Template > Edit a Copy**. This creates a local copy of the MediaTransportControls style and template that you can customize. In the following sections, you learn how to customize several of the main elements of the transport controls: -- [**Slider**](/uwp/api/Windows.UI.Xaml.Controls.Slider): allows a user to scrub through their media and also displays progress -- [**CommandBar**](/uwp/api/Windows.UI.Xaml.Controls.CommandBar): contains all of the buttons. +- [**Slider**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.Slider): allows a user to scrub through their media and also displays progress +- [**CommandBar**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.CommandBar): contains all of the buttons. For more info, see the Anatomy section of the MediaTransportControls reference topic. ## Customize the transport controls @@ -86,7 +86,7 @@ For more info about modifying styles and templates, see [Styling controls](../.. ### Create a derived control -To add to or modify the functionality of the transport controls, you must create a new class that's derived from MediaTransportControls. A derived class called `CustomMediaTransportControls` is shown in the [Media Transport Controls sample](https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/XamlCustomMediaTransportControls) and the remaining examples on this page. +To add to or modify the functionality of the transport controls, you must create a new class that's derived from MediaTransportControls. A derived class called `CustomMediaTransportControls` is shown in the [Media Transport Controls sample](https://github.com/microsoft/WinUI-Gallery/blob/main/WinUIGallery/Samples/ControlPages/MediaPlayerElementPage.xaml.cs) and the remaining examples on this page. **To create a new class derived from MediaTransportControls** 1. Add a new class file to your project. @@ -100,9 +100,9 @@ public sealed class CustomMediaTransportControls : MediaTransportControls } ``` -3. Copy the default style for [**MediaTransportControls**](/uwp/api/Windows.UI.Xaml.Controls.MediaTransportControls) into a [ResourceDictionary](/uwp/api/Windows.UI.Xaml.ResourceDictionary) in your project. This is the style and template you modify. +3. Copy the default style for [**MediaTransportControls**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.MediaTransportControls) into a [ResourceDictionary](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.ResourceDictionary) in your project. This is the style and template you modify. (In the Media Transport Controls sample, a new folder called "Themes" is created, and a ResourceDictionary file called generic.xaml is added to it.) -4. Change the [**TargetType**](/uwp/api/windows.ui.xaml.style.targettype) of the style to the new custom control type. (In the sample, the TargetType is changed to `local:CustomMediaTransportControls`.) +4. Change the [**TargetType**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.style.targettype) of the style to the new custom control type. (In the sample, the TargetType is changed to `local:CustomMediaTransportControls`.) ```xaml xmlns:local="using:CustomMediaTransportControls"> @@ -110,7 +110,7 @@ xmlns:local="using:CustomMediaTransportControls">