CINXE.COM

<!DOCTYPE html><html class="hasSidebar hasPageActions hasBreadcrumb conceptual has-default-focus theme-light" lang="en-us" dir="ltr" data-authenticated="false" data-auth-status-determined="false" data-target="docs" x-ms-format-detection="none"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta property="og:title" content="XAML Overview (WPF)" /> <meta property="og:type" content="website" /> <meta property="og:url" content="https://learn.microsoft.com/en-us/previous-versions/dotnet/netframework-4.0/ms752059(v=vs.100)" /><meta property="og:image" content="https://learn.microsoft.com/en-us/media/open-graph-image.png" /> <meta property="og:image:alt" content="Microsoft Learn" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@MicrosoftLearn" /> <meta name="color-scheme" content="light dark"><meta name="author" content="Archiveddocs" /> <meta name="breadcrumb_path" content="/previous-versions/dotnet/netframework-4.0/breadcrumb/toc.json" /> <meta name="depot_name" content="MSDN.netframework-4-0-archive" /> <meta name="document_id" content="1a008938-a3c8-0e5c-6df9-bf84764dbde6" /> <meta name="document_version_independent_id" content="1a008938-a3c8-0e5c-6df9-bf84764dbde6" /> <meta name="feedback_help_link_type" content="" /> <meta name="feedback_help_link_url" content="" /> <meta name="feedback_product_url" content="" /> <meta name="feedback_system" content="None" /> <meta name="git_commit_id" content="a8afa8205f01996ae5b7a80189ad388886e3031e" /> <meta name="gitcommit" content="https://docs-archive.visualstudio.com/DefaultCollection/docs-archive-project/_git/netframework-4-0-docs-archive-pr/commit/a8afa8205f01996ae5b7a80189ad388886e3031e?path=/netframework-4-0/ms752059(v=vs.100).md&_a=contents" /> <meta name="is_archived" content="true" /> <meta name="locale" content="en-us" /> <meta name="ms:assetid" content="a80db4cd-dd0f-479f-a45f-3740017c22e4" /> <meta name="ms:contentKeyID" content="19680168" /> <meta name="ms:mtpsurl" content="https://msdn.microsoft.com/en-us/library/ms752059(v=VS.100)" /> <meta name="ms.author" content="Archiveddocs" /> <meta name="ms.date" content="02/04/2013" /> <meta name="ms.prod" content="dotnet-archive" /> <meta name="ms.technology" content="netframework-4.0" /> <meta name="ms.topic" content="archived" /> <meta name="mtps_version" content="v=VS.100" /> <meta name="original_content_git_url" content="https://docs-archive.visualstudio.com/DefaultCollection/docs-archive-project/_git/netframework-4-0-docs-archive-pr?path=/netframework-4-0/ms752059(v=vs.100).md&version=GBlive&_a=contents" /> <meta name="page_type" content="conceptual" /> <meta name="ROBOTS" content="NOINDEX,NOFOLLOW" /> <meta name="schema" content="Conceptual" /> <meta name="search.mshattr.devlang" content="xaml vb csharp" /> <meta name="site_name" content="Docs" /> <meta name="toc_rel" content="toc.json" /> <meta name="TOCTitle" content="XAML Overview (WPF)" /> <meta name="uhfHeaderId" content="MSDocsHeader-Archive" /> <meta name="updated_at" content="2021-10-25 02:38 AM" /> <meta name="word_count" content="5452" /> <meta name="persistent_id" content="f9319fbd-611a-e6cd-8241-4d4c4cc12afc" /> <meta name="platform_id" content="f9319fbd-611a-e6cd-8241-4d4c4cc12afc" /> <meta name="github_feedback_content_git_url" content="https://docs-archive.visualstudio.com/DefaultCollection/docs-archive-project/_git/netframework-4-0-docs-archive-pr?path=/netframework-4-0/ms752059(v=vs.100).md&version=GBlive&_a=contents" /><link href="https://learn.microsoft.com/en-us/previous-versions/dotnet/netframework-4.0/ms752059(v=vs.100)" rel="canonical"><title>XAML Overview (WPF) | Microsoft Learn</title><link rel="stylesheet" href="/static/assets/0.4.029766323/styles/site-ltr.css"> <script id="msdocs-script"> var msDocs = {environment: { supportLevel: 'production', accessLevel: 'online', reviewFeatures: false, systemContent: true, azurePortalHostname: 'portal.azure.com', legacyHosting: false, siteName: 'learn', },data: { timeOrigin: Date.now(), contentLocale: 'en-us', contentDir: 'ltr', userLocale: 'en-us', userDir: 'ltr', pageTemplate: 'Conceptual', brand: '', context: {}, hasBinaryRating: false, feedbackHelpLinkType:'', feedbackHelpLinkUrl:'', standardFeedback: false, showFeedbackReport: false, enableTutorialFeedback: false, feedbackSystem: 'None', feedbackGitHubRepo: '', feedbackProductUrl: '',extendBreadcrumb: true,isEditDisplayable: false, hideViewSource: false, hasPageActions: true, hasPrintButton: true, hasBookmark: true, hasShare: true, isPermissioned: false, isPrivateUnauthorized: false,hasRecommendations: true,}, functions:{} }; </script><script src="https://wcpstatic.microsoft.com/mscc/lib/v2/wcp-consent.js"></script> <script src="https://js.monitor.azure.com/scripts/c/ms.jsll-4.min.js"></script><script src="/static/assets/0.4.029766323/global/deprecation.js"></script><script src="/static/assets/0.4.029766323/scripts/en-us/index-docs.js"></script></head> <body lang="en-us" dir="ltr"> <div class="header-holder has-default-focus"> <a href="#main" style="z-index: 1070" class="outline-color-text visually-hidden-until-focused position-fixed inner-focus focus-visible top-0 left-0 right-0 padding-xs text-align-center has-body-background" tabindex="1">Skip to main content</a><div hidden id="cookie-consent-holder" data-test-id="cookie-consent-container"></div> <div id="unsupported-browser" style=" background-color: white; color: black; padding: 16px; border-bottom: 1px solid grey;" hidden > <div style="max-width: 800px; margin: 0 auto;"> <p style="font-size: 24px">This browser is no longer supported.</p> <p style="font-size: 16px; margin-top: 16px;">Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.</p> <div style="margin-top: 12px;"> <a href="https://go.microsoft.com/fwlink/p/?LinkID=2092881 " style=" background-color: #0078d4; border: 1px solid #0078d4; color: white; padding: 6px 12px; border-radius: 2px; display: inline-block; ">Download Microsoft Edge</a> <a href="https://learn.microsoft.com/en-us/lifecycle/faq/internet-explorer-microsoft-edge" style=" background-color: white; padding: 6px 12px; border: 1px solid #505050; color: #171717; border-radius: 2px; display: inline-block; ">More info about Internet Explorer and Microsoft Edge</a> </div> </div> </div>   <header id="ms--site-header" data-test-id="site-header-wrapper" role="banner" itemscope="itemscope" itemtype="http://schema.org/Organization"> <div id="ms--mobile-nav" class="site-header display-none-tablet padding-inline-none gap-none" data-bi-name="mobile-header" data-test-id="mobile-header"></div> <div id="ms--primary-nav" class="site-header display-none display-flex-tablet" data-bi-name="L1-header" data-test-id="primary-header"></div> <div id="ms--secondary-nav" class="site-header display-none display-flex-tablet" data-bi-name="L2-header" data-test-id="secondary-header"></div> </header><div id="content-header" class="content-header uhf-container has-padding has-default-focus border-bottom-none" data-bi-name="content-header"> <div class="content-header-controls margin-xxs margin-inline-sm-tablet"> <button type="button" class="contents-button button button-sm margin-right-xxs" data-bi-name="contents-expand" aria-haspopup="true" data-contents-button> <span class="icon"><span class="docon docon-menu" aria-hidden="true"></span></span> <span class="contents-expand-title">Table of contents</span> </button> <button type="button" class="ap-collapse-behavior ap-expanded button button-sm" data-bi-name="ap-collapse" aria-controls="action-panel"> <span class="icon"><span class="docon docon-exit-mode" aria-hidden="true"></span></span> <span>Exit focus mode</span> </button> </div> </div><div id="disclaimer-holder" class="has-overflow-hidden has-default-focus">  </div> </div> <div class="mainContainer uhf-container has-default-focus" data-bi-name="body"> <div class="columns has-large-gaps is-gapless-mobile "><div id="left-container" class="left-container is-hidden-mobile column is-one-third-tablet is-one-quarter-desktop"> <nav id="affixed-left-container" class="margin-top-sm-tablet position-sticky display-flex flex-direction-column" aria-label="Primary"></nav> </div> <section class="primary-holder column is-two-thirds-tablet is-three-quarters-desktop">  <div class="columns is-gapless-mobile has-large-gaps "><div id="main-column" class="column is-full is-8-desktop" data-main-column> <main id="main" class="" role="main" data-bi-name="content" lang="en-us" dir="ltr"> <div id="article-header" class="background-color-body margin-top-sm-tablet margin-bottom-xs display-none-print"> <div class="display-flex align-items-center "><details id="article-header-breadcrumbs-overflow-popover" class="popover" data-for="article-header-breadcrumbs"> <summary class="button button-clear button-primary button-sm inner-focus" aria-label="All breadcrumbs"> <span class="icon"> <span class="docon docon-more"></span> </span> </summary> <div id="article-header-breadcrumbs-overflow" class="popover-content padding-none"> </div> </details> <bread-crumbs id="article-header-breadcrumbs" data-test-id="article-header-breadcrumbs" class="overflow-hidden flex-grow-1 margin-right-sm margin-right-md-tablet margin-right-lg-desktop margin-left-negative-xxs padding-left-xxs"></bread-crumbs><div id="article-header-page-actions" class="opacity-none margin-left-auto display-flex flex-wrap-no-wrap align-items-stretch"><div class="language dropdown display-flex align-items-center"> <button class="dropdown-trigger button button-clear button-sm button-primary" aria-controls="language-menu" aria-expanded="false" title="Language" data-bi-name="language"> <span class="lang-title align-self-flex-start" dir="ltr">Language</span> <span class="icon" aria-hidden="true"> <span class="docon docon-chevron-down-light expanded-indicator"></span> </span> </button> <div class="dropdown-menu padding-xxs language-selector" name="language-selector"> <ul data-bi-name="language-links" dir="ltr"><li> <button class="button button-clear button-sm button-block" data-bi-name="lang-xaml" aria-pressed="false"></button> </li><li> <button class="button button-clear button-sm button-block" data-bi-name="lang-vb" aria-pressed="false"></button> </li><li> <button class="button button-clear button-sm button-block" data-bi-name="lang-csharp" aria-pressed="false"></button> </li></ul> </div> </div><a id="lang-link-tablet" class="button button-primary button-clear button-sm display-none display-inline-flex-tablet" title="Read in English" data-bi-name="language-toggle" data-read-in-link hidden> <span class="icon margin-none" aria-hidden="true" data-read-in-link-icon> <span class="docon docon-locale-globe"></span> </span> <span class="is-visually-hidden" data-read-in-link-text>Read in English</span> </a><button type="button" class="collection button button-clear button-sm button-primary display-none display-inline-flex-tablet" data-list-type="collection" data-bi-name="collection" title="Add to collection"> <span class="icon margin-none" aria-hidden="true"> <span class="docon docon-circle-addition"></span> </span> <span class="collection-status is-visually-hidden">Save</span> </button> <details class="popover popover-right" id="article-header-page-actions-overflow"> <summary class="justify-content-flex-start button button-clear button-sm button-primary" aria-label="More actions" title="More actions"> <span class="icon" aria-hidden="true"> <span class="docon docon-more-vertical"></span> </span> </summary> <div class="popover-content padding-xs"><button data-page-action-item="overflow-mobile" type="button" class="justify-content-flex-start button-block button-sm has-inner-focus button button-clear display-none-tablet" data-bi-name="contents-expand" data-contents-button data-popover-close> <span class="icon"> <span class="docon docon-editor-list-bullet" aria-hidden="true"></span> </span><span class="contents-expand-title">Table of contents</span></button><a id="lang-link-overflow" class="justify-content-flex-start button-sm has-inner-focus button button-clear button-block display-none-tablet" title="Read in English" data-bi-name="language-toggle" data-page-action-item="overflow-mobile" data-check-hidden="true" data-read-in-link hidden > <span class="icon" aria-hidden="true" data-read-in-link-icon> <span class="docon docon-locale-globe"></span> </span> <span data-read-in-link-text>Read in English</span> </a><button type="button" class="collection justify-content-flex-start button button-clear button-sm has-inner-focus button-block display-none-tablet" data-list-type="collection" data-bi-name="collection" title="Save" data-page-action-item="overflow-mobile" data-check-hidden="true" data-popover-close> <span class="icon" aria-hidden="true"> <span class="docon docon-circle-addition"></span> </span> <span class="collection-status">Save</span> </button> <button type="button" class="collection justify-content-flex-start button button-clear button-sm has-inner-focus button-block display-none-tablet" data-list-type="plan" data-bi-name="plan" title="Add to plan" data-page-action-item="overflow-mobile" data-check-hidden="true" data-popover-close hidden> <span class="icon" aria-hidden="true"> <span class="docon docon-circle-addition"></span> </span> <span class="plan-status">Add to plan</span> </button><div aria-hidden="true" class="margin-none" data-page-action-item="overflow-all"></div> <hr class="display-none-tablet margin-bottom-xxs margin-top-xxs" /> <h4 class="font-size-sm padding-left-xxs">Share via</h4> <a class="button button-clear button-sm button-block has-inner-focus text-decoration-none justify-content-flex-start share-facebook" data-bi-name="facebook" data-page-action-item="overflow-all"> <span class="icon" aria-hidden="true"> <span class="docon docon-facebook-share font-size-md color-primary"></span> </span> <span class="margin-left-xxs">Facebook</span> </a> <a class="button button-clear button-sm has-inner-focus button-block text-decoration-none justify-content-flex-start share-twitter" data-bi-name="twitter" data-page-action-item="overflow-all"> <span class="icon" aria-hidden="true"> <span class="docon docon-xlogo-share font-size-xxs"></span> </span> <span class="margin-left-xxs">x.com</span> </a> <a class="button button-clear button-sm has-inner-focus button-block text-decoration-none justify-content-flex-start share-linkedin" data-bi-name="linkedin" data-page-action-item="overflow-all"> <span class="icon" aria-hidden="true"> <span class="docon docon-linked-in-logo font-size-sm color-primary"></span> </span> <span class="margin-left-xxs">LinkedIn</span> </a> <a class="button button-clear button-sm button-block has-inner-focus text-decoration-none justify-content-flex-start margin-bottom-xxs share-email" data-bi-name="email" data-page-action-item="overflow-all"> <span class="icon" aria-hidden="true"> <span class="docon docon-mail-message font-size-sm color-primary"></span> </span> <span class="margin-left-xxs">Email</span> </a><hr /> <button class="button button-block button-clear button-sm justify-content-flex-start has-inner-focus margin-top-xxs" title="Print" type="button" aria-label="Print" data-bi-name="print" data-page-action-item="overflow-all" data-popover-close data-print-page data-check-hidden="true"> <span class="icon" aria-hidden="true"> <span class="docon docon-print font-size-sm color-primary"></span> </span> <span class="margin-left-xxs">Print</span> </button> </div> </details> </div></div> </div> <div> <button type="button" class="border contents-button button button-clear button-sm is-hidden-tablet has-inner-focus" data-bi-name="contents-expand" data-contents-button hidden> <span class="icon"> <span class="docon docon-editor-list-bullet" aria-hidden="true"></span> </span><span class="contents-expand-title">Table of contents</span></button> </div> <div class="content "><h1 id="xaml-overview-wpf">XAML Overview (WPF)</h1><div class="display-flex justify-content-space-between align-items-center flex-wrap-wrap page-metadata-container"> <div class="margin-right-xxs"> <ul class="metadata page-metadata" data-bi-name="page info" lang="en-us" dir="ltr"><li>Article</li><li> <time class="is-invisible" data-article-date aria-label="Article review date" datetime="2013-02-04T00:00:00.000Z" data-article-date-source="ms.date">02/04/2013</time> </li></ul> </div></div><nav id="center-doc-outline" class="doc-outline is-hidden-desktop display-none-print margin-bottom-sm" data-bi-name="intopic toc" aria-label="In this article"> <h2 id="ms--in-this-article" class="title is-6 margin-block-xs">In this article</h2> </nav><p>This topic describes the features of the XAML language and demonstrates how you can use XAML to write Windows Presentation Foundation (WPF) applications. This topic specifically describes XAML as implemented by WPF. XAML itself is a larger language concept than WPF.</p> <p>This topic contains the following sections.</p> <ul> <li>What is XAML?</li> <li>XAML Syntax in Brief</li> <li>Case and Whitespace in XAML</li> <li>Markup Extensions</li> <li>Type Converters</li> <li>XAML Root Elements and XAML Namespaces</li> <li>Custom Prefixes and Custom Types in XAML</li> <li>Events and XAML Code-Behind</li> <li>XAML Named Elements</li> <li>Attached Properties and Attached Events</li> <li>Base Types and XAML</li> <li>XAML Security</li> <li>Loading XAML from Code</li> <li>What's Next</li> <li>Related Topics</li> </ul> <h2 id="what-is-xaml">What is XAML?</h2> <p>XAML is a declarative markup language. As applied to the .NET Framework programming model, XAML simplifies creating a UI for a .NET Framework application. You can create visible UI elements in the declarative XAML markup, and then separate the UI definition from the run-time logic by using code-behind files, joined to the markup through partial class definitions. XAML directly represents the instantiation of objects in a specific set of backing types defined in assemblies. This is unlike most other markup languages, which are typically an interpreted language without such a direct tie to a backing type system. XAML enables a workflow where separate parties can work on the UI and the logic of an application, using potentially different tools.</p> <p>When represented as text, XAML files are XML files that generally have the .xaml extension. The files can be encoded by any XML encoding, but encoding as UTF-8 is typical.</p> <p>The following example shows how you might create a button as part of a UI. This example is just intended to give you a flavor of how XAML represents common UI programming metaphors (it is not a complete sample).</p> <pre><code class="lang-xaml"><StackPanel> <Button Content="Click Me"/> </StackPanel> </code></pre> <h2 id="xaml-syntax-in-brief">XAML Syntax in Brief</h2> <p>The following sections explain the basic forms of XAML syntax, and give a short markup example. These sections are not intended to provide complete information about each syntax form, such as how these are represented in the backing type system. For more information about the specifics of XAML syntax for each of the syntax forms introduced in this topic, see <a href="ms788723(v=vs.100)" data-linktype="relative-path">XAML Syntax In Detail</a>.</p> <p>Much of the material in the next few sections will be elementary to you, if you have previous familiarity with the XML language. This is a consequence of one of the basic design principles of XAML. XAML The XAML language defines concepts of its own, but these concepts work within the XML language and markup form.</p> <h3 id="xaml-object-elements">XAML Object Elements</h3> <p>An object element typically declares an instance of a type. That type is defined in the assemblies that provide the backing types for a technology that uses XAML as a language.</p> <p>Object element syntax always starts with an opening angle bracket (<). This is followed by the name of the type where you want to create an instance. (The name can possibly include a prefix, a concept that will be explained later.) After this, you can optionally declare attributes on the object element. To complete the object element tag, end with a closing angle bracket (>). You can instead use a self-closing form that does not have any content, by completing the tag with a forward slash and closing angle bracket in succession (/>). For example, look at the previously shown markup snippet again:</p> <pre><code class="lang-xaml"><StackPanel> <Button Content="Click Me"/> </StackPanel> </code></pre> <p>This specifies two object elements: <StackPanel> (with content, and a closing tag later), and <Button .../> (the self-closing form, with several attributes). The object elements StackPanel and Button each map to the name of a class that is defined by WPF and is part of the WPF assemblies. When you specify an object element tag, you create an instruction for XAML processing to create a new instance. Each instance is created by calling the default constructor of the underlying type when parsing and loading the XAML.</p> <h3 id="attribute-syntax-properties">Attribute Syntax (Properties)</h3> <p>Properties of an object can often be expressed as attributes of the object element. An attribute syntax names the property that is being set in attribute syntax, followed by the assignment operator (=). The value of an attribute is always specified as a string that is contained within quotation marks.</p> <p>Attribute syntax is the most streamlined property setting syntax and is the most intuitive syntax to use for developers who have used markup languages in the past. For example, the following markup creates a button that has red text and a blue background in addition to display text specified as Content.</p> <pre><code class="lang-xaml"><Button Background="Blue" Foreground="Red" Content="This is a button"/> </code></pre> <h3 id="property-element-syntax">Property Element Syntax</h3> <p>For some properties of an object element, attribute syntax is not possible, because the object or information necessary to provide the property value cannot be adequately expressed within the quotation mark and string restrictions of attribute syntax. For these cases, a different syntax known as property element syntax can be used.</p> <p>The syntax for the property element start tag is <typeName.propertyName>. Generally, the content of that tag is an object element of the type that the property takes as its value . After specifying content, you must close the property element with an end tag. The syntax for the end tag is </typeName.propertyName>.</p> <p>If an attribute syntax is possible, using the attribute syntax is typically more convenient and enables a more compact markup, but that is often just a matter of style, not a technical limitation. The following example shows the same properties being set as in the previous attribute syntax example, but this time by using property element syntax for all properties of the Button.</p> <pre><code class="lang-xaml"><Button> <Button.Background> <SolidColorBrush Color="Blue"/> </Button.Background> <Button.Foreground> <SolidColorBrush Color="Red"/> </Button.Foreground> <Button.Content> This is a button </Button.Content> </Button> </code></pre> <h3 id="collection-syntax">Collection Syntax</h3> <p>The XAML language includes some optimizations that produce more human-readable markup. One such optimization is that if a particular property takes a collection type, then items that you declare in markup as child elements within that property's value become part of the collection. In this case a collection of child object elements is the value being set to the collection property.</p> <p>The following example shows collection syntax for setting values of the <a href="https://msdn.microsoft.com/en-us/library/ms612354(v=vs.100)" data-linktype="external">GradientStops</a> property:</p> <pre><code class="lang-xaml"><LinearGradientBrush> <LinearGradientBrush.GradientStops>  <GradientStop Offset="0.0" Color="Red" /> <GradientStop Offset="1.0" Color="Blue" /> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </code></pre> <h3 id="xaml-content-properties">XAML Content Properties</h3> <p>XAML specifies a language feature whereby a class can designate exactly one of its properties to be the XAML content property. Child elements of that object element are used to set the value of that content property. In other words, for the content property uniquely, you can omit a property element when setting that property in XAML markup and produce a more visible parent/child metaphor in the markup.</p> <p>For example, <a href="https://msdn.microsoft.com/en-us/library/ms609067(v=vs.100)" data-linktype="external">Border</a> specifies a content property of <a href="https://msdn.microsoft.com/en-us/library/ms592526(v=vs.100)" data-linktype="external">Child</a>. The following two <a href="https://msdn.microsoft.com/en-us/library/ms609067(v=vs.100)" data-linktype="external">Border</a> elements are treated identically. The first one takes advantage of the content property syntax and omits the Border.Child property element. The second one shows Border.Child explicitly.</p> <pre><code class="lang-xaml"><Border> <TextBox Width="300"/> </Border>  <Border> <Border.Child> <TextBox Width="300"/> </Border.Child> </Border> </code></pre> <p>As a rule of the XAML language, the value of a XAML content property must be given either entirely before or entirely after any other property elements on that object element. For instance, the following markup does not compile:</p> <pre><code><Button>I am a <Button.Background>Blue</Button.Background> blue button</Button> </code></pre> <p>For more information about this restriction on XAML content properties, see the "XAML Content Properties" section of <a href="ms788723(v=vs.100)" data-linktype="relative-path">XAML Syntax In Detail</a>.</p> <h3 id="text-content">Text Content</h3> <p>A small number of XAML elements can directly process text as their content. To enable this, one of the following cases must be true:</p> <ul> <li><p>The class must declare a content property, and that content property must be of a type assignable to a string (the type could be <a href="https://msdn.microsoft.com/en-us/library/e5kfa45b(v=vs.100)" data-linktype="external">Object</a>). For instance, any <a href="https://msdn.microsoft.com/en-us/library/ms609797(v=vs.100)" data-linktype="external">ContentControl</a> uses <a href="https://msdn.microsoft.com/en-us/library/ms592476(v=vs.100)" data-linktype="external">Content</a> as its content property and it is type <a href="https://msdn.microsoft.com/en-us/library/e5kfa45b(v=vs.100)" data-linktype="external">Object</a>, and this supports the following usage on a practical <a href="https://msdn.microsoft.com/en-us/library/ms609797(v=vs.100)" data-linktype="external">ContentControl</a> such as a <a href="https://msdn.microsoft.com/en-us/library/ms609089(v=vs.100)" data-linktype="external">Button</a>: <Button>Hello</Button>.</p> </li> <li><p>The type must declare a type converter, in which case the text content is used as initialization text for that type converter. For example, <Brush>Blue</Brush>. This case is less common in practice.</p> </li> <li><p>The type must be a known XAML language primitive.</p> </li> </ul> <h3 id="content-properties-and-collection-syntax-combined">Content Properties and Collection Syntax Combined</h3> <p>Consider this example:</p> <pre><code class="lang-xaml"><StackPanel> <Button>First Button</Button> <Button>Second Button</Button> </StackPanel> </code></pre> <p>Here, each <a href="https://msdn.microsoft.com/en-us/library/ms609089(v=vs.100)" data-linktype="external">Button</a> is a child element of <a href="https://msdn.microsoft.com/en-us/library/ms612971(v=vs.100)" data-linktype="external">StackPanel</a>. This is a streamlined and intuitive markup that omits two tags for two different reasons.</p> <ul> <li><p><strong>Omitted StackPanel.Children property element:</strong> <a href="https://msdn.microsoft.com/en-us/library/ms612971(v=vs.100)" data-linktype="external">StackPanel</a> derives from <a href="https://msdn.microsoft.com/en-us/library/ms611631(v=vs.100)" data-linktype="external">Panel</a>. <a href="https://msdn.microsoft.com/en-us/library/ms611631(v=vs.100)" data-linktype="external">Panel</a> defines <a href="https://msdn.microsoft.com/en-us/library/ms605170(v=vs.100)" data-linktype="external">Panel.Children</a> as its XAML content property.</p> </li> <li><p><strong>Omitted UIElementCollection object element:</strong> The <a href="https://msdn.microsoft.com/en-us/library/ms605170(v=vs.100)" data-linktype="external">Panel.Children</a> property takes the type <a href="https://msdn.microsoft.com/en-us/library/ms617847(v=vs.100)" data-linktype="external">UIElementCollection</a>, which implements <a href="https://msdn.microsoft.com/en-us/library/30ft6hw7(v=vs.100)" data-linktype="external">IList</a>. The collection's element tag can be omitted, based on the XAML rules for processing collections such as <a href="https://msdn.microsoft.com/en-us/library/30ft6hw7(v=vs.100)" data-linktype="external">IList</a>. (In this case, <a href="https://msdn.microsoft.com/en-us/library/ms617847(v=vs.100)" data-linktype="external">UIElementCollection</a> actually cannot be instantiated because it does not expose a default constructor, and that is why the <a href="https://msdn.microsoft.com/en-us/library/ms617847(v=vs.100)" data-linktype="external">UIElementCollection</a> object element is shown commented out).</p> </li> </ul>  <pre><code class="lang-xaml"><StackPanel> <StackPanel.Children>  <Button>First Button</Button> <Button>Second Button</Button>  </StackPanel.Children> </StackPanel> </code></pre> <h3 id="attribute-syntax-events">Attribute Syntax (Events)</h3> <p>Attribute syntax can also be used for members that are events rather than properties. In this case, the attribute's name is the name of the event. In the WPF implementation of events for XAML, the attribute's value is the name of a handler that implements that event's delegate. For example, the following markup assigns a handler for the <a href="https://msdn.microsoft.com/en-us/library/ms521565(v=vs.100)" data-linktype="external">Click</a> event to a <a href="https://msdn.microsoft.com/en-us/library/ms609089(v=vs.100)" data-linktype="external">Button</a> created in markup:</p> <pre><code class="lang-xaml"><Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" x:Class="ExampleNamespace.ExamplePage"> <Button Click="Button_Click" >Click Me!</Button> </Page> </code></pre> <p>There is more to events and XAML in WPF than just this example of the attribute syntax. For example, you might wonder what the ClickHandler referenced here represents and how it is defined. This will be explained in the upcoming <a href="">Events and XAML Code-Behind</a> section of this topic.</p> <h2 id="case-and-whitespace-in-xaml">Case and Whitespace in XAML</h2> <p>XAML is generally speaking case sensitive. For purposes of resolving backing types, WPF XAML is case sensitive by the same rules that the CLR is case sensitive. Object elements, property elements, and attribute names must all be specified by using the sensitive casing when compared by name to the underlying type in the assembly, or to a member of a type. XAML language keywords and primitives are also case sensitive. Values are not always case sensitive. Case sensitivity for values will depend on the type converter behavior associated with the property that takes the value, or the property value type. For example, properties that take the <a href="https://msdn.microsoft.com/en-us/library/a28wyd50(v=vs.100)" data-linktype="external">Boolean</a> type can take either true or True as equivalent values, but only because the native WPF XAML parser type conversion for string to <a href="https://msdn.microsoft.com/en-us/library/a28wyd50(v=vs.100)" data-linktype="external">Boolean</a> already permits these as equivalents.</p> <p>WPF XAML processors and serializers will ignore or drop all nonsignificant whitespace, and will normalize any significant whitespace. This is consistent with the default whitespace behavior recommendations of the XAML specification. This behavior is generally only of consequence when you specify strings within XAML content properties. In simplest terms, XAML converts space, linefeed and tab characters into spaces, and then preserves one space if found at either end of a contiguous string. The full explanation of XAML whitespace handling is not covered in this topic. For details, see <a href="ms788746(v=vs.100)" data-linktype="relative-path">Whitespace Processing in XAML</a>.</p> <h2 id="markup-extensions">Markup Extensions</h2> <p>Markup extensions are a XAML language concept. When used to provide the value of an attribute syntax, curly braces ({ and }) indicate a markup extension usage. This usage directs the XAML processing to escape from the general treatment of attribute values as either a literal string or a string-convertible value.</p> <p>The most common markup extensions used in WPF application programming are <a href="ms750413(v=vs.100)" data-linktype="relative-path">Binding</a>, used for data binding expressions, and the resource references <a href="ms750950(v=vs.100)" data-linktype="relative-path">StaticResource</a> and <a href="ms748942(v=vs.100)" data-linktype="relative-path">DynamicResource</a>. By using markup extensions, you can use attribute syntax to provide values for properties even if that property does not support an attribute syntax in general. Markup extensions often use intermediate expression types to enable features such as deferring values or referencing other objects that are only present at run time.</p> <p>For example, the following markup sets the value of the <a href="https://msdn.microsoft.com/en-us/library/ms600899(v=vs.100)" data-linktype="external">Style</a> property using attribute syntax. The <a href="https://msdn.microsoft.com/en-us/library/ms600899(v=vs.100)" data-linktype="external">Style</a> property takes an instance of the <a href="https://msdn.microsoft.com/en-us/library/ms603146(v=vs.100)" data-linktype="external">Style</a> class, which by default could not be instantiated by an attribute syntax string. But in this case, the attribute references a particular markup extension, <a href="ms750950(v=vs.100)" data-linktype="relative-path">StaticResource</a>. When that markup extension is processed, it returns a reference to a style that was previously instantiated as a keyed resource in a resource dictionary.</p> <pre><code class="lang-xaml"><Page.Resources> <SolidColorBrush x:Key="MyBrush" Color="Gold"/> <Style TargetType="Border" x:Key="PageBackground"> <Setter Property="Background" Value="Blue"/> </Style> ... </Page.Resources> <StackPanel> <Border Style="{StaticResource PageBackground}"> ... </Border> </StackPanel> </code></pre> <p>For a reference listing of all markup extensions for XAML implemented specifically in WPF, see <a href="ms747180(v=vs.100)" data-linktype="relative-path">WPF XAML Extensions</a>. For a reference listing of the markup extensions that are defined by System.Xaml and are more widely available for .NET Framework XAML implementations, see <a href="ms753327(v=vs.100)" data-linktype="relative-path">XAML Namespace (x:) Language Features</a>. For more information about markup extension concepts, see <a href="ms747254(v=vs.100)" data-linktype="relative-path">Markup Extensions and WPF XAML</a>.</p> <h2 id="type-converters">Type Converters</h2> <p>In the section, it was stated that the attribute value must be able to be set by a string. The basic, native handling of how strings are converted into other object types or primitive values is based on the <a href="https://msdn.microsoft.com/en-us/library/s1wwdcbf(v=vs.100)" data-linktype="external">String</a> type itself, in addition to native processing for certain types such as <a href="https://msdn.microsoft.com/en-us/library/03ybds8y(v=vs.100)" data-linktype="external">DateTime</a> or <a href="https://msdn.microsoft.com/en-us/library/txt7706a(v=vs.100)" data-linktype="external">Uri</a>. But many WPF types or members of those types extend the basic string attribute processing behavior, in such a way that instances of more complex object types can be specified as strings and attributes.</p> <p>The <a href="https://msdn.microsoft.com/en-us/library/ms603275(v=vs.100)" data-linktype="external">Thickness</a> structure is an example of a type that has a type conversion enabled for XAML usages. <a href="https://msdn.microsoft.com/en-us/library/ms603275(v=vs.100)" data-linktype="external">Thickness</a> indicates measurements within a nested rectangle and is used as the value for properties such as <a href="https://msdn.microsoft.com/en-us/library/ms600890(v=vs.100)" data-linktype="external">Margin</a>. By placing a type converter on <a href="https://msdn.microsoft.com/en-us/library/ms603275(v=vs.100)" data-linktype="external">Thickness</a>, all properties that use a <a href="https://msdn.microsoft.com/en-us/library/ms603275(v=vs.100)" data-linktype="external">Thickness</a> are easier to specify in XAML because they can be specified as attributes. The following example uses a type conversion and attribute syntax to provide a value for a <a href="https://msdn.microsoft.com/en-us/library/ms600890(v=vs.100)" data-linktype="external">Margin</a>:</p> <pre><code class="lang-xaml"><Button Margin="10,20,10,30" Content="Click me"/> </code></pre> <p>The previous attribute syntax example is equivalent to the following more verbose syntax example, where the <a href="https://msdn.microsoft.com/en-us/library/ms600890(v=vs.100)" data-linktype="external">Margin</a> is instead set through property element syntax containing a <a href="https://msdn.microsoft.com/en-us/library/ms603275(v=vs.100)" data-linktype="external">Thickness</a> object element. The four key properties of <a href="https://msdn.microsoft.com/en-us/library/ms603275(v=vs.100)" data-linktype="external">Thickness</a> are set as attributes on the new instance:</p> <pre><code class="lang-xaml"><Button Content="Click me"> <Button.Margin> <Thickness Left="10" Top="20" Right="10" Bottom="30"/> </Button.Margin> </Button> </code></pre> <div class="NOTE"> <p>Note</p> <p>There are also a limited number of objects where the type conversion is the only public way to set a property to that type without involving a subclass, because the type itself does not have a default constructor. An example is <a href="https://msdn.microsoft.com/en-us/library/ms616847(v=vs.100)" data-linktype="external">Cursor</a>.</p> </div> <p>For more information on how type conversion and its use for attribute syntax is supported, see <a href="aa970913(v=vs.100)" data-linktype="relative-path">TypeConverters and XAML</a>.</p> <h2 id="xaml-root-elements-and-xaml-namespaces">XAML Root Elements and XAML Namespaces</h2> <p>A XAML file must have only one root element, in order to be both a well-formed XML file and a valid XAML file. For typical WPF scenarios, you use a root element that has a prominent meaning in the WPF application model (for example, <a href="https://msdn.microsoft.com/en-us/library/ms590112(v=vs.100)" data-linktype="external">Window</a> or <a href="https://msdn.microsoft.com/en-us/library/ms611620(v=vs.100)" data-linktype="external">Page</a> for a page, <a href="https://msdn.microsoft.com/en-us/library/ms589726(v=vs.100)" data-linktype="external">ResourceDictionary</a> for an external dictionary, or <a href="https://msdn.microsoft.com/en-us/library/ms588794(v=vs.100)" data-linktype="external">Application</a> for the application definition). The following example shows the root element of a typical XAML file for a WPF page, with the root element of <a href="https://msdn.microsoft.com/en-us/library/ms611620(v=vs.100)" data-linktype="external">Page</a>.</p> <pre><code class="lang-xaml"><Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" ... </Page> </code></pre> <p>The root element also contains the attributes xmlns and xmlns:x. These attributes indicate to a XAML processor which XAML namespaces contain the type definitions for backing types that the markup will reference as elements. The xmlns attribute specifically indicates the default XAML namespace. Within the default XAML namespace, object elements in the markup can be specified without a prefix. For most WPF application scenarios, and for almost all of the examples given in the WPF sections of the SDK, the default XAML namespace is mapped to the WPF namespace <a href="https://schemas.microsoft.com/winfx/2006/xaml/presentation" data-linktype="external">https://schemas.microsoft.com/winfx/2006/xaml/presentation</a>. The xmlns:x attribute indicates an additional XAML namespace, which maps the XAML language namespace <a href="https://schemas.microsoft.com/winfx/2006/xaml" data-linktype="external">https://schemas.microsoft.com/winfx/2006/xaml</a>.</p> <p>This usage of xmlns to define a scope for usage and mapping of a namescope is consistent with the XML 1.0 specification. XAML namescopes are different from XML namescopes only in that a XAML namescope also implies something about how the namescope's elements are backed by types when it comes to type resolution and parsing the XAML.</p> <p>Note that the xmlns attributes are only strictly necessary on the root element of each XAML file. xmlns definitions will apply to all descendant elements of the root element (this behavior is again consistent with the XML 1.0 specification for xmlns.) xmlns attributes are also permitted on other elements underneath the root, and would apply to any descendant elements of the defining element. However, frequent definition or redefinition of XAML namespaces can result in a XAML markup style that is difficult to read.</p> <p>The WPF implementation of its XAML processor includes an infrastructure that has awareness of the WPF core assemblies. The WPF core assemblies are known to contain the types that support the WPF mappings to the default XAML namespace. This is enabled through configuration that is part of your project build file and the WPF build and project systems. Therefore, declaring the default XAML namespace as the default xmlns is all that is necessary in order to reference XAML elements that come from WPF assemblies.</p> <h3 id="the-x-prefix">The x: Prefix</h3> <p>In the previous root element example, the prefix x: was used to map the XAML namespace <a href="https://schemas.microsoft.com/winfx/2006/xaml" data-linktype="external">https://schemas.microsoft.com/winfx/2006/xaml</a>, which is the dedicated XAML namespace that supports XAML language constructs. This x: prefix is used for mapping this XAML namespace in the templates for projects, in examples, and in documentation throughout this SDK. The XAML namespace for the XAML language contain several programming constructs that you will use very frequently in your XAML. The following is a listing of the most common x: prefix programming constructs you will use:</p> <ul> <li><p><a href="ms742804(v=vs.100)" data-linktype="relative-path">x:Key</a>: Sets a unique key for each resource in a <a href="https://msdn.microsoft.com/en-us/library/ms589726(v=vs.100)" data-linktype="external">ResourceDictionary</a> (or similar dictionary concepts in other frameworks). x:Key will probably account for 90% of the x: usages you will see in a typical WPF application's markup.</p> </li> <li><p><a href="ms752309(v=vs.100)" data-linktype="relative-path">x:Class</a>: Specifies the CLR namespace and class name for the class that provides code-behind for a XAML page. You must have such a class to support code-behind per the WPF programming model, and therefore you almost always see x: mapped, even if there are no resources.</p> </li> <li><p><a href="ms752290(v=vs.100)" data-linktype="relative-path">x:Name</a>: Specifies a run-time object name for the instance that exists in run-time code after an object element is processed. In general, you will frequently use a WPF-defined equivalent property for <a href="ms752290(v=vs.100)" data-linktype="relative-path">x:Name</a>. Such properties map specifically to a CLR backing property and are thus more convenient for application programming, where you frequently use run time code to find the named elements from initialized XAML. The most common such property is <a href="https://msdn.microsoft.com/en-us/library/ms600895(v=vs.100)" data-linktype="external">FrameworkElement.Name</a>. You might still use <a href="ms752290(v=vs.100)" data-linktype="relative-path">x:Name</a> when the equivalent WPF framework-level <a href="https://msdn.microsoft.com/en-us/library/ms600895(v=vs.100)" data-linktype="external">Name</a> property is not supported in a particular type. This occurs in certain animation scenarios.</p> </li> <li><p><a href="ms742135(v=vs.100)" data-linktype="relative-path">x:Static</a>: Enables a reference that returns a static value that is not otherwise a XAML-compatible property.</p> </li> <li><p><a href="ms753322(v=vs.100)" data-linktype="relative-path">x:Type</a>: Constructs a <a href="https://msdn.microsoft.com/en-us/library/42892f65(v=vs.100)" data-linktype="external">Type</a> reference based on a type name. This is used to specify attributes that take <a href="https://msdn.microsoft.com/en-us/library/42892f65(v=vs.100)" data-linktype="external">Type</a>, such as <a href="https://msdn.microsoft.com/en-us/library/ms601375(v=vs.100)" data-linktype="external">Style.TargetType</a>, although frequently the property has native string-to-<a href="https://msdn.microsoft.com/en-us/library/42892f65(v=vs.100)" data-linktype="external">Type</a> conversion in such a way that the <a href="ms753322(v=vs.100)" data-linktype="relative-path">x:Type</a> markup extension usage is optional.</p> </li> </ul> <p>There are additional programming constructs in the x: prefix/XAML namespace, which are not as common. For details, see <a href="ms753327(v=vs.100)" data-linktype="relative-path">XAML Namespace (x:) Language Features</a>.</p> <h2 id="custom-prefixes-and-custom-types-in-xaml">Custom Prefixes and Custom Types in XAML</h2> <p>For your own custom assemblies, or for assemblies outside the WPF core of PresentationCore, PresentationFramework and WindowsBase, you can specify the assembly as part of a custom xmlns mapping. You can then reference types from that assembly in your XAML, so long as that type is correctly implemented to support the XAML usages you are attempting.</p> <p>The following is a very basic example of how custom prefixes work in XAML markup. The prefix custom is defined in the root element tag, and mapped to a specific assembly that is packaged and available with the application. This assembly contains a type NumericUpDown, which is implemented to support general XAML usage as well as using a class inheritance that permits its insertion at this particular point in a WPF XAML content model. An instance of this NumericUpDown control is declared as an object element, using the prefix so that a XAML parser knows which XAML namespace contains the type, and therefore where the backing assembly is that contains the type definition.</p> <pre><code><Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" xmlns:custom="clr-namespace:NumericUpDownCustomControl;assembly=CustomLibrary" > <StackPanel Name="LayoutRoot"> <custom:NumericUpDown Name="numericCtrl1" Width="100" Height="60"/> ... </StackPanel> </Page> </code></pre> <p>For more information about custom types in XAML, see <a href="ms753379(v=vs.100)" data-linktype="relative-path">XAML and Custom Classes for WPF</a>.</p> <p>For more information about how XML namespaces and the namespaces of the backing code in assemblies are related, see <a href="ms747086(v=vs.100)" data-linktype="relative-path">XAML Namespaces and Namespace Mapping for WPF XAML</a>.</p> <h2 id="events-and-xaml-code-behind">Events and XAML Code-Behind</h2> <p>Most WPF applications consist of both XAML markup and code-behind. Within a project, the XAML is written as a .xaml file, and a CLR language such as Microsoft Visual Basic or C# is used to write a code-behind file. When a XAML file is markup compiled as part of the WPF programming and application models, the location of the XAML code-behind file for a XAML file is identified by specifying a namespace and class as the x:Class attribute of the root element of the XAML.</p> <p>In the examples so far, you have seen several buttons, but none of these buttons had any logical behavior associated with them yet. The primary application-level mechanism for adding a behavior for an object element is to use an existing event of the element class, and to write a specific handler for that event that is invoked when that event is raised at run time. The event name and the name of the handler to use are specified in the markup, whereas the code that implements your handler is defined in the code-behind.</p> <pre><code class="lang-xaml"><Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" x:Class="ExampleNamespace.ExamplePage"> <Button Click="Button_Click" >Click Me!</Button> </Page> </code></pre> <pre><code class="lang-vb">Private Sub Button_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Dim b As Button = e.Source b.Foreground = Brushes.Red End Sub </code></pre> <pre><code class="lang-csharp">namespace ExampleNamespace { public partial class ExamplePage { void Button_Click(object sender, RoutedEventArgs e) { Button b = e.Source as Button; b.Foreground = Brushes.Red; } } } </code></pre> <p>Notice that the code-behind file uses the CLR namespace ExampleNamespace and declares ExamplePage as a partial class within that namespace. This parallels the x:Class attribute value of ExampleNamespace.ExamplePage that was provided in the markup root. The WPF markup compiler will create a partial class for any compiled XAML file, by deriving a class from the root element type. When you provide code-behind that also defines the same partial class, the resulting code is combined within the same namespace and class of the compiled application.</p> <p>For more information about requirements for code-behind programming in WPF, see the "Code-behind, Event Handler, and Partial Class Requirements" section of <a href="aa970568(v=vs.100)" data-linktype="relative-path">Code-Behind and XAML in WPF</a>.</p> <p>If you do not want to create a separate code-behind file, you can also inline your code in a XAML file. However, inline code is a less versatile technique that has substantial limitations. For details, see <a href="aa970568(v=vs.100)" data-linktype="relative-path">Code-Behind and XAML in WPF</a>.</p> <h3 id="routed-events">Routed Events</h3> <p>A particular event feature that is fundamental to WPF is a routed event. Routed events enable an element to handle an event that was raised by a different element, as long as the elements are connected through a tree relationship. When specifying event handling with a XAML attribute, the routed event can be listened for and handled on any element, including elements that do not list that particular event in the class members table. This is accomplished by qualifying the event name attribute with the owning class name. For instance, the parent StackPanel in the ongoing StackPanel / Button example could register a handler for the child element button's <a href="https://msdn.microsoft.com/en-us/library/ms521565(v=vs.100)" data-linktype="external">Click</a> event by specifying the attribute Button.Click on the StackPanel object element, with your handler name as the attribute value. For more information about how routed events work, see <a href="ms742806(v=vs.100)" data-linktype="relative-path">Routed Events Overview</a>.</p> <h2 id="xaml-named-elements">XAML Named Elements</h2> <p>By default, the object instance that is created in an object graph by processing a XAML object element does not possess a unique identifier or object reference. In contrast, if you call a constructor in code, you almost always use the constructor result to set a variable to the constructed instance, so that you can reference the instance later in your code. In order to provide standardized access to objects that were created through a markup definition, XAML defines the <a href="ms752290(v=vs.100)" data-linktype="relative-path">x:Name attribute</a>. You can set the value of the x:Name attribute on any object element. In your code-behind, the identifier you choose is equivalent to an instance variable that refers to the constructed instance. In all respects, named elements function as if they were object instances (the name references that instance), and your code-behind can reference the named elements to handle run-time interactions within the application. This connection between instances and variables is accomplished by the WPF XAML markup compiler, and more specifically involve features and patterns such as <a href="https://msdn.microsoft.com/en-us/library/ms603526(v=vs.100)" data-linktype="external">InitializeComponent</a> that will not be discussed in detail in this topic.</p> <p>WPF framework-level XAML elements inherit a <a href="https://msdn.microsoft.com/en-us/library/ms600895(v=vs.100)" data-linktype="external">Name</a> property, which is equivalent to the XAML defined x:Name attribute. Certain other classes also provide property-level equivalents for x:Name, which is also generally defined as a Name property. Generally speaking, if you cannot find a Name property in the members table for your chosen element/type, use x:Name instead. The x:Name values will provide an identifier to a XAML element that can be used at run time, either by specific subsystems or by utility methods such as <a href="https://msdn.microsoft.com/en-us/library/ms598120(v=vs.100)" data-linktype="external">FindName</a>.</p> <p>The following example sets <a href="https://msdn.microsoft.com/en-us/library/ms600895(v=vs.100)" data-linktype="external">Name</a> on a <a href="https://msdn.microsoft.com/en-us/library/ms612971(v=vs.100)" data-linktype="external">StackPanel</a> element. Then, a handler on a <a href="https://msdn.microsoft.com/en-us/library/ms609089(v=vs.100)" data-linktype="external">Button</a> within that <a href="https://msdn.microsoft.com/en-us/library/ms612971(v=vs.100)" data-linktype="external">StackPanel</a> references the <a href="https://msdn.microsoft.com/en-us/library/ms612971(v=vs.100)" data-linktype="external">StackPanel</a> through its instance reference buttonContainer as set by <a href="https://msdn.microsoft.com/en-us/library/ms600895(v=vs.100)" data-linktype="external">Name</a>.</p> <pre><code class="lang-xaml"><StackPanel Name="buttonContainer"> ... <Button Click="RemoveThis">Click to remove this button</Button> </StackPanel> </code></pre> <pre><code class="lang-vb"> Private Sub RemoveThis(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Dim fe As FrameworkElement = e.Source If (buttonContainer.Children.Contains(fe)) Then buttonContainer.Children.Remove(fe) End If End Sub </code></pre> <pre><code class="lang-csharp">void RemoveThis(object sender, RoutedEventArgs e) { FrameworkElement fe = e.Source as FrameworkElement; if (buttonContainer.Children.Contains(fe)) { buttonContainer.Children.Remove(fe); } } </code></pre> <p>Just like a variable, the XAML name for an instance is governed by a concept of scope, so that names can be enforced to be unique within a certain scope that is predictable. The primary markup that defines a page denotes one unique XAML namescope, with the XAML namescope boundary being the root element of that page. However, other markup sources can interact with a page at run time, such as styles or templates within styles, and such markup sources often have their own XAML namescopes that do not necessarily connect with the XAML namescope of the page. For more information on x:Name and XAML namescopes, see <a href="https://msdn.microsoft.com/en-us/library/ms600895(v=vs.100)" data-linktype="external">Name</a>, <a href="ms752290(v=vs.100)" data-linktype="relative-path">x:Name Directive</a>, or <a href="ms746659(v=vs.100)" data-linktype="relative-path">WPF XAML Namescopes</a>.</p> <h2 id="attached-properties-and-attached-events">Attached Properties and Attached Events</h2> <p>XAML specifies a language feature that enables certain properties or events to be specified on any element, regardless of whether the property or event exists in the type's definitions for the element it is being set on. The properties version of this feature is called an attached property, the events version is called an attached event. Conceptually, you can think of attached properties and attached events as global members that can be set on any XAML element/object instance. However, that element/class or a larger infrastructure must support a backing property store for the attached values.</p> <p>Attached properties in XAML are typically used through attribute syntax. In attribute syntax, you specify an attached property in the form ownerType.propertyName.</p> <p>Superficially, this resembles a property element usage, but in this case the ownerType you specify is always a different type than the object element where the attached property is being set. ownerType is the type that provides the accessor methods that are required by a XAML processor in order to get or set the attached property value.</p> <p>The most common scenario for attached properties is to enable child elements to report a property value to their parent element.</p> <p>The following example illustrates the <a href="https://msdn.microsoft.com/en-us/library/ms592530(v=vs.100)" data-linktype="external">DockPanel.Dock</a> attached property. The <a href="https://msdn.microsoft.com/en-us/library/ms609853(v=vs.100)" data-linktype="external">DockPanel</a> class defines the accessors for <a href="https://msdn.microsoft.com/en-us/library/ms592530(v=vs.100)" data-linktype="external">DockPanel.Dock</a> and therefore owns the attached property. The <a href="https://msdn.microsoft.com/en-us/library/ms609853(v=vs.100)" data-linktype="external">DockPanel</a> class also includes logic that iterates its child elements and specifically checks each element for a set value of <a href="https://msdn.microsoft.com/en-us/library/ms592530(v=vs.100)" data-linktype="external">DockPanel.Dock</a>. If a value is found, that value is used during layout to position the child elements. Use of the <a href="https://msdn.microsoft.com/en-us/library/ms592530(v=vs.100)" data-linktype="external">DockPanel.Dock</a> attached property and this positioning capability is in fact the motivating scenario for the <a href="https://msdn.microsoft.com/en-us/library/ms609853(v=vs.100)" data-linktype="external">DockPanel</a> class.</p> <pre><code class="lang-xaml"><DockPanel> <Button DockPanel.Dock="Left" Width="100" Height="20">I am on the left</Button> <Button DockPanel.Dock="Right" Width="100" Height="20">I am on the right</Button> </DockPanel> </code></pre> <p>In WPF, most or all the attached properties are also implemented as dependency properties. For details, see <a href="ms749011(v=vs.100)" data-linktype="relative-path">Attached Properties Overview</a>.</p> <p>Attached events use a similar ownerType.eventName form of attribute syntax. Just like the non-attached events, the attribute value for an attached event in XAML specifies the name of the handler method that is invoked when the event is handled on the element. Attached event usages in WPF XAML are less common. For more information, see <a href="bb613550(v=vs.100)" data-linktype="relative-path">Attached Events Overview</a>.</p> <h2 id="base-types-and-xaml">Base Types and XAML</h2> <p>Underlying WPF XAML and its XAML namespace is a collection of types that correspond to CLR objects in addition to markup elements for XAML. However, not all classes can be mapped to elements. Abstract classes, such as <a href="https://msdn.microsoft.com/en-us/library/ms611651(v=vs.100)" data-linktype="external">ButtonBase</a>, and certain nonabstract base classes are used for inheritance in the CLR objects model. Base classes, including abstract ones, are still important to XAML development because each of the concrete XAML elements inherits members from some base class in its hierarchy. Often these members include properties that can be set as attributes on the element, or events that can be handled. <a href="https://msdn.microsoft.com/en-us/library/ms602714(v=vs.100)" data-linktype="external">FrameworkElement</a> is the concrete base UI class of WPF at the WPF framework level. When designing UI, you will use various shape, panel, decorator, or control classes, which all derive from <a href="https://msdn.microsoft.com/en-us/library/ms602714(v=vs.100)" data-linktype="external">FrameworkElement</a>. A related base class, <a href="https://msdn.microsoft.com/en-us/library/ms602658(v=vs.100)" data-linktype="external">FrameworkContentElement</a>, supports document-oriented elements that work well for a flow layout presentation, using APIs that deliberately mirror the APIs in <a href="https://msdn.microsoft.com/en-us/library/ms602714(v=vs.100)" data-linktype="external">FrameworkElement</a>. The combination of attributes at the element level and a CLR object model provides you with a set of common properties that are settable on most concrete XAML elements, regardless of the specific XAML element and its underlying type.</p> <h2 id="xaml-security">XAML Security</h2> <p>XAML is a markup language that directly represents object instantiation and execution. Therefore, elements created in XAML have the same ability to interact with system resources (network access, file system IO, for example) as the equivalent generated code does.</p> <p>WPF supports the  .NET Framework 4 security framework Code Access Security (CAS). This means that WPF content running in the internet zone has reduced execution permissions. "Loose XAML" (pages of noncompiled XAML interpreted at load time by a XAML viewer) and XAML browser application (XBAP) are usually run in this internet zone and use the same permission set. However, XAML loaded in to a fully trusted application has the same access to the system resources as the hosting application does. For more information, see <a href="aa970910(v=vs.100)" data-linktype="relative-path">WPF Partial Trust Security</a>.</p> <h2 id="loading-xaml-from-code">Loading XAML from Code</h2> <p>XAML can be used to define all of the UI, but it is sometimes also appropriate to define just a piece of the UI in XAML. This capability could be used to enable partial customization, local storage of information, using XAML to provide a business object, or a variety of possible scenarios. The key to these scenarios is the <a href="https://msdn.microsoft.com/en-us/library/ms613427(v=vs.100)" data-linktype="external">XamlReader</a> class and its <a href="https://msdn.microsoft.com/en-us/library/ms608929(v=vs.100)" data-linktype="external">Load</a> method. The input is a XAML file, and the output is an object that represents all of the run-time tree of objects that was created from that markup. You then can insert the object to be a property of another object that already exists in the application. So long as the property is an appropriate property in the content model that has eventual display capabilities and that will notify the execution engine that new content has been added into the application, you can modify a running application's contents very easily by loading in XAML. Note that this capability is generally only available in full-trust applications, because of the obvious security implications of loading files into applications as they run.</p> <h2 id="whats-next">What's Next</h2> <p>This topic provides a basic introduction to XAML syntax concepts and terminology as it applies to WPF. For more information about the terms used here, see <a href="ms788723(v=vs.100)" data-linktype="relative-path">XAML Syntax In Detail</a>.</p> <p>If you have not already done this, try the exercises in the tutorial topic <a href="ms752299(v=vs.100)" data-linktype="relative-path">Walkthrough: Getting Started with WPF</a>. When you create the markup-centric application described by the tutorial, the exercise will help reinforce many of the concepts described in this topic.</p> <p>WPF uses a particular application model that is based on the <a href="https://msdn.microsoft.com/en-us/library/ms588794(v=vs.100)" data-linktype="external">Application</a> class. For details, see <a href="ms743714(v=vs.100)" data-linktype="relative-path">Application Management Overview</a>.</p> <p><a href="aa970678(v=vs.100)" data-linktype="relative-path">Building a WPF Application (WPF)</a> gives you more details about how to build XAML inclusive applications from the command line and with Microsoft Visual Studio.</p> <p><a href="ms752914(v=vs.100)" data-linktype="relative-path">Dependency Properties Overview</a> gives more information about the versatility of properties in WPF, and introduces the concept of dependency properties.</p> <h2 id="see-also">See Also</h2> <h4 id="concepts">Concepts</h4> <p><a href="ms788723(v=vs.100)" data-linktype="relative-path">XAML Syntax In Detail</a></p> <p><a href="ms753379(v=vs.100)" data-linktype="relative-path">XAML and Custom Classes for WPF</a></p> <p><a href="ms743618(v=vs.100)" data-linktype="relative-path">Base Elements Overview</a></p> <p><a href="ms753391(v=vs.100)" data-linktype="relative-path">Trees in WPF</a></p> <h4 id="other-resources">Other Resources</h4> <p><a href="ms753327(v=vs.100)" data-linktype="relative-path">XAML Namespace (x:) Language Features</a></p> <p><a href="ms747180(v=vs.100)" data-linktype="relative-path">WPF XAML Extensions</a></p> </div><div id="ms--inline-notifications" class="margin-block-xs" data-bi-name="inline-notification"></div><div id="assertive-live-region" role="alert" aria-live="assertive" class="visually-hidden" aria-relevant="additions" aria-atomic="true"></div> <div id="polite-live-region" role="status" aria-live="polite" class="visually-hidden" aria-relevant="additions" aria-atomic="true"></div>  </main>  <aside id="ms--additional-resources-mobile" aria-label="Additional resources" class="display-none-desktop display-none-print" > <hr class="hr" hidden /> <h2 id="ms--additional-resources-mobile-heading" class="title is-3" hidden>Additional resources</h2> <section id="right-rail-recommendations-mobile" data-bi-name="recommendations" hidden></section> <section id="right-rail-training-mobile" data-bi-name="learning-resources-card" hidden></section> <section id="right-rail-events-mobile" data-bi-name="events-card" hidden></section> <section id="right-rail-qna-mobile" data-bi-name="qna-link-card" hidden></section> </aside><div class="border-top is-visible-interactive has-default-focus margin-top-sm "><footer id="footer-interactive" data-bi-name="footer" class="footer-layout"><div class="display-flex gap-xs flex-wrap-wrap is-full-height padding-right-lg-desktop"><a data-mscc-ic="false" class="locale-selector-link button button-sm button-clear flex-shrink-0" href="#" data-bi-name="select-locale"> <span class="icon" aria-hidden="true"> <span class="docon docon-world"></span> </span> <span class="local-selector-link-text"></span></a><div class="ccpa-privacy-link" data-ccpa-privacy-link hidden> <a href="https://aka.ms/yourcaliforniaprivacychoices" class="button button-sm button-clear flex-shrink-0" data-mscc-ic="false" data-bi-name="your-privacy-choices" > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 14" xml:space="preserve" height="16" width="43" aria-hidden="true" focusable="false" > <path d="M7.4 12.8h6.8l3.1-11.6H7.4C4.2 1.2 1.6 3.8 1.6 7s2.6 5.8 5.8 5.8z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#fff"></path> <path d="M22.6 0H7.4c-3.9 0-7 3.1-7 7s3.1 7 7 7h15.2c3.9 0 7-3.1 7-7s-3.2-7-7-7zm-21 7c0-3.2 2.6-5.8 5.8-5.8h9.9l-3.1 11.6H7.4c-3.2 0-5.8-2.6-5.8-5.8z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#06f"></path> <path d="M24.6 4c.2.2.2.6 0 .8L22.5 7l2.2 2.2c.2.2.2.6 0 .8-.2.2-.6.2-.8 0l-2.2-2.2-2.2 2.2c-.2.2-.6.2-.8 0-.2-.2-.2-.6 0-.8L20.8 7l-2.2-2.2c-.2-.2-.2-.6 0-.8.2-.2.6-.2.8 0l2.2 2.2L23.8 4c.2-.2.6-.2.8 0z" style="fill:#fff"></path> <path d="M12.7 4.1c.2.2.3.6.1.8L8.6 9.8c-.1.1-.2.2-.3.2-.2.1-.5.1-.7-.1L5.4 7.7c-.2-.2-.2-.6 0-.8.2-.2.6-.2.8 0L8 8.6l3.8-4.5c.2-.2.6-.2.9 0z" style="fill:#06f"></path> </svg> <span>Your Privacy Choices</span> </a> </div> <div class="flex-shrink-0"> <div class="dropdown has-caret-up"> <button class="dropdown-trigger button button-clear button-sm has-inner-focus theme-dropdown-trigger" aria-controls="theme-menu-interactive" aria-expanded="false" title="Theme" data-bi-name="theme"> <span class="icon"> <span class="docon docon-sun" aria-hidden="true"></span> </span> <span>Theme</span> <span class="icon expanded-indicator" aria-hidden="true"> <span class="docon docon-chevron-down-light"></span> </span> </button> <div class="dropdown-menu" id="theme-menu-interactive" role="menu"> <ul class="theme-selector padding-xxs" role="none"> <li class="theme display-block" role="menuitem"> <button class="button button-clear button-sm theme-control button-block justify-content-flex-start" data-theme-to="light"> <span class="theme-light margin-right-xxs"> <span class="theme-selector-icon border display-inline-block has-body-background" aria-hidden="true"> <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 14"> <rect width="22" height="14" class="has-fill-body-background" /> <rect x="5" y="5" width="12" height="4" class="has-fill-secondary" /> <rect x="5" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="8" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="11" y="2" width="3" height="1" class="has-fill-secondary" /> <rect x="1" y="1" width="2" height="2" class="has-fill-secondary" /> <rect x="5" y="10" width="7" height="2" rx="0.3" class="has-fill-primary" /> <rect x="19" y="1" width="2" height="2" rx="1" class="has-fill-secondary" /> </svg> </span> </span> <span>Light</span> </button> </li> <li class="theme display-block" role="menuitem"> <button class="button button-clear button-sm theme-control button-block justify-content-flex-start" data-theme-to="dark"> <span class="theme-dark margin-right-xxs"> <span class="border theme-selector-icon display-inline-block has-body-background" aria-hidden="true"> <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 14"> <rect width="22" height="14" class="has-fill-body-background" /> <rect x="5" y="5" width="12" height="4" class="has-fill-secondary" /> <rect x="5" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="8" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="11" y="2" width="3" height="1" class="has-fill-secondary" /> <rect x="1" y="1" width="2" height="2" class="has-fill-secondary" /> <rect x="5" y="10" width="7" height="2" rx="0.3" class="has-fill-primary" /> <rect x="19" y="1" width="2" height="2" rx="1" class="has-fill-secondary" /> </svg> </span> </span> <span>Dark</span> </button> </li> <li class="theme display-block" role="menuitem"> <button class="button button-clear button-sm theme-control button-block justify-content-flex-start" data-theme-to="high-contrast"> <span class="theme-high-contrast margin-right-xxs"> <span class="border theme-selector-icon display-inline-block has-body-background" aria-hidden="true"> <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 14"> <rect width="22" height="14" class="has-fill-body-background" /> <rect x="5" y="5" width="12" height="4" class="has-fill-secondary" /> <rect x="5" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="8" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="11" y="2" width="3" height="1" class="has-fill-secondary" /> <rect x="1" y="1" width="2" height="2" class="has-fill-secondary" /> <rect x="5" y="10" width="7" height="2" rx="0.3" class="has-fill-primary" /> <rect x="19" y="1" width="2" height="2" rx="1" class="has-fill-secondary" /> </svg> </span> </span> <span>High contrast</span> </button> </li> </ul> </div> </div> </div> </div> <ul class="links" data-bi-name="footerlinks"> <li class="manage-cookies-holder" hidden></li><li><a class="external-link-indicator" data-mscc-ic="false" href="/en-us/previous-versions/" data-bi-name="archivelink">Previous Versions</a></li> <li><a class="external-link-indicator" data-mscc-ic="false" href="https://techcommunity.microsoft.com/t5/microsoft-learn-blog/bg-p/MicrosoftLearnBlog" data-bi-name="bloglink">Blog</a></li> <li><a class="external-link-indicator" data-mscc-ic="false" href="/en-us/contribute/" data-bi-name="contributorGuide">Contribute</a></li><li><a class="external-link-indicator" data-mscc-ic="false" href="https://go.microsoft.com/fwlink/?LinkId=521839" data-bi-name="privacy">Privacy</a></li><li><a class="external-link-indicator" data-mscc-ic="false" href="/en-us/legal/termsofuse" data-bi-name="termsofuse">Terms of Use</a></li><li><a class="external-link-indicator" data-mscc-ic="false" href="https://www.microsoft.com/legal/intellectualproperty/Trademarks/" data-bi-name="trademarks">Trademarks</a></li><li>© Microsoft 2025</li> </ul> </footer></div></div><div id="ms--additional-resources" class="right-container column is-4-desktop display-none display-block-desktop" data-bi-name="pageactions" role="complementary" aria-label="Additional resources" > <div id="affixed-right-container" class="margin-top-sm-tablet" data-bi-name="right-column"> <h2 id="ms--additional-resources-heading" class="title is-6 margin-top-md" hidden>Additional resources</h2> <section id="right-rail-events" data-bi-name="events-card" hidden></section> <section id="right-rail-training" data-bi-name="learning-resources-card" hidden></section> <section id="right-rail-recommendations" data-bi-name="recommendations" hidden></section> <nav id="side-doc-outline" class="doc-outline" data-bi-name="intopic toc" aria-label="In this article"> <h3>In this article</h3> </nav> <section id="right-rail-qna" class="margin-top-xxs" data-bi-name="qna-link-card" hidden></section> </div> </div></div>  </section>   <aside id="interactive-container" class="interactive-container is-visible-interactive column has-body-background-dark "> </aside>  </div> </div>  <section class="border-top has-default-focus is-hidden-interactive margin-top-sm "><footer id="footer" data-bi-name="footer" class="footer-layout uhf-container has-padding" role="contentinfo"><div class="display-flex gap-xs flex-wrap-wrap is-full-height padding-right-lg-desktop"><a data-mscc-ic="false" class="locale-selector-link button button-sm button-clear flex-shrink-0" href="#" data-bi-name="select-locale"> <span class="icon" aria-hidden="true"> <span class="docon docon-world"></span> </span> <span class="local-selector-link-text"></span></a><div class="ccpa-privacy-link" data-ccpa-privacy-link hidden> <a href="https://aka.ms/yourcaliforniaprivacychoices" class="button button-sm button-clear flex-shrink-0" data-mscc-ic="false" data-bi-name="your-privacy-choices" > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 14" xml:space="preserve" height="16" width="43" aria-hidden="true" focusable="false" > <path d="M7.4 12.8h6.8l3.1-11.6H7.4C4.2 1.2 1.6 3.8 1.6 7s2.6 5.8 5.8 5.8z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#fff"></path> <path d="M22.6 0H7.4c-3.9 0-7 3.1-7 7s3.1 7 7 7h15.2c3.9 0 7-3.1 7-7s-3.2-7-7-7zm-21 7c0-3.2 2.6-5.8 5.8-5.8h9.9l-3.1 11.6H7.4c-3.2 0-5.8-2.6-5.8-5.8z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#06f"></path> <path d="M24.6 4c.2.2.2.6 0 .8L22.5 7l2.2 2.2c.2.2.2.6 0 .8-.2.2-.6.2-.8 0l-2.2-2.2-2.2 2.2c-.2.2-.6.2-.8 0-.2-.2-.2-.6 0-.8L20.8 7l-2.2-2.2c-.2-.2-.2-.6 0-.8.2-.2.6-.2.8 0l2.2 2.2L23.8 4c.2-.2.6-.2.8 0z" style="fill:#fff"></path> <path d="M12.7 4.1c.2.2.3.6.1.8L8.6 9.8c-.1.1-.2.2-.3.2-.2.1-.5.1-.7-.1L5.4 7.7c-.2-.2-.2-.6 0-.8.2-.2.6-.2.8 0L8 8.6l3.8-4.5c.2-.2.6-.2.9 0z" style="fill:#06f"></path> </svg> <span>Your Privacy Choices</span> </a> </div> <div class="flex-shrink-0"> <div class="dropdown has-caret-up"> <button class="dropdown-trigger button button-clear button-sm has-inner-focus theme-dropdown-trigger" aria-controls="theme-menu" aria-expanded="false" title="Theme" data-bi-name="theme"> <span class="icon"> <span class="docon docon-sun" aria-hidden="true"></span> </span> <span>Theme</span> <span class="icon expanded-indicator" aria-hidden="true"> <span class="docon docon-chevron-down-light"></span> </span> </button> <div class="dropdown-menu" id="theme-menu" role="menu"> <ul class="theme-selector padding-xxs" role="none"> <li class="theme display-block" role="menuitem"> <button class="button button-clear button-sm theme-control button-block justify-content-flex-start" data-theme-to="light"> <span class="theme-light margin-right-xxs"> <span class="theme-selector-icon border display-inline-block has-body-background" aria-hidden="true"> <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 14"> <rect width="22" height="14" class="has-fill-body-background" /> <rect x="5" y="5" width="12" height="4" class="has-fill-secondary" /> <rect x="5" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="8" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="11" y="2" width="3" height="1" class="has-fill-secondary" /> <rect x="1" y="1" width="2" height="2" class="has-fill-secondary" /> <rect x="5" y="10" width="7" height="2" rx="0.3" class="has-fill-primary" /> <rect x="19" y="1" width="2" height="2" rx="1" class="has-fill-secondary" /> </svg> </span> </span> <span>Light</span> </button> </li> <li class="theme display-block" role="menuitem"> <button class="button button-clear button-sm theme-control button-block justify-content-flex-start" data-theme-to="dark"> <span class="theme-dark margin-right-xxs"> <span class="border theme-selector-icon display-inline-block has-body-background" aria-hidden="true"> <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 14"> <rect width="22" height="14" class="has-fill-body-background" /> <rect x="5" y="5" width="12" height="4" class="has-fill-secondary" /> <rect x="5" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="8" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="11" y="2" width="3" height="1" class="has-fill-secondary" /> <rect x="1" y="1" width="2" height="2" class="has-fill-secondary" /> <rect x="5" y="10" width="7" height="2" rx="0.3" class="has-fill-primary" /> <rect x="19" y="1" width="2" height="2" rx="1" class="has-fill-secondary" /> </svg> </span> </span> <span>Dark</span> </button> </li> <li class="theme display-block" role="menuitem"> <button class="button button-clear button-sm theme-control button-block justify-content-flex-start" data-theme-to="high-contrast"> <span class="theme-high-contrast margin-right-xxs"> <span class="border theme-selector-icon display-inline-block has-body-background" aria-hidden="true"> <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 14"> <rect width="22" height="14" class="has-fill-body-background" /> <rect x="5" y="5" width="12" height="4" class="has-fill-secondary" /> <rect x="5" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="8" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="11" y="2" width="3" height="1" class="has-fill-secondary" /> <rect x="1" y="1" width="2" height="2" class="has-fill-secondary" /> <rect x="5" y="10" width="7" height="2" rx="0.3" class="has-fill-primary" /> <rect x="19" y="1" width="2" height="2" rx="1" class="has-fill-secondary" /> </svg> </span> </span> <span>High contrast</span> </button> </li> </ul> </div> </div> </div> </div> <ul class="links" data-bi-name="footerlinks"> <li class="manage-cookies-holder" hidden></li><li><a class="external-link-indicator" data-mscc-ic="false" href="/en-us/previous-versions/" data-bi-name="archivelink">Previous Versions</a></li> <li><a class="external-link-indicator" data-mscc-ic="false" href="https://techcommunity.microsoft.com/t5/microsoft-learn-blog/bg-p/MicrosoftLearnBlog" data-bi-name="bloglink">Blog</a></li> <li><a class="external-link-indicator" data-mscc-ic="false" href="/en-us/contribute/" data-bi-name="contributorGuide">Contribute</a></li><li><a class="external-link-indicator" data-mscc-ic="false" href="https://go.microsoft.com/fwlink/?LinkId=521839" data-bi-name="privacy">Privacy</a></li><li><a class="external-link-indicator" data-mscc-ic="false" href="/en-us/legal/termsofuse" data-bi-name="termsofuse">Terms of Use</a></li><li><a class="external-link-indicator" data-mscc-ic="false" href="https://www.microsoft.com/legal/intellectualproperty/Trademarks/" data-bi-name="trademarks">Trademarks</a></li><li>© Microsoft 2025</li> </ul> </footer> </section> <div id="action-panel" role="region" aria-label="Action Panel" class="action-panel has-default-focus" tabindex="-1"></div> </body> </html>