.NET Multi-platform App UI documentation - .NET MAUI

<!DOCTYPE html><html class=" is-full hub 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=".NET Multi-platform App UI documentation - .NET MAUI" /> <meta property="og:type" content="website" /> <meta property="og:url" content="https://learn.microsoft.com/en-us/dotnet/maui/?view=net-maui-9.0" /><meta property="og:description" content=".NET Multi-platform App UI (.NET MAUI) lets you build native apps using a .NET cross-platform UI toolkit that targets the mobile and desktop form factors on Android, iOS, macOS, Windows, and Tizen." /><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="davidbritch" /> <meta name="breadcrumb_path" content="/dotnet/maui/breadcrumb/toc.json" /> <meta name="default_moniker" content="net-maui-9.0" /> <meta name="depot_name" content="MSDN.docs-maui-public" /> <meta name="description" content=".NET Multi-platform App UI (.NET MAUI) lets you build native apps using a .NET cross-platform UI toolkit that targets the mobile and desktop form factors on Android, iOS, macOS, Windows, and Tizen." /> <meta name="document_id" content="38d0f82b-6ce5-0028-3789-a23d1dcc4047" /> <meta name="document_version_independent_id" content="871a3820-c0f6-1c86-3b64-b207943b2363" /> <meta name="feedback_help_link_type" content="" /> <meta name="feedback_help_link_url" content="" /> <meta name="feedback_product_url" content="https://developercommunity.visualstudio.com/" /> <meta name="feedback_system" content="OpenSource" /> <meta name="git_commit_id" content="a9a9f64b857698f4d02026d886d705c0b8049b46" /> <meta name="gitcommit" content="https://github.com/dotnet/docs-maui/blob/a9a9f64b857698f4d02026d886d705c0b8049b46/docs/index.yml" /> <meta name="locale" content="en-us" /> <meta name="monikers" content="net-maui-8.0" /> <meta name="monikers" content="net-maui-9.0" /> <meta name="ms.author" content="dabritch" /> <meta name="ms.date" content="09/30/2024" /> <meta name="ms.service" content="dotnet-mobile" /> <meta name="ms.subservice" content="dotnet-maui" /> <meta name="ms.topic" content="hub-page" /> <meta name="original_content_git_url" content="https://github.com/dotnet/docs-maui/blob/live/docs/index.yml" /> <meta name="page_type" content="hub" /> <meta name="schema" content="Hub" /> <meta name="site_name" content="Docs" /> <meta name="summary" content=".NET Multi-platform App UI (.NET MAUI) lets you build native apps using a .NET cross-platform UI toolkit that targets the mobile and desktop form factors on Android, iOS, macOS, Windows, and Tizen." /> <meta name="uhfHeaderId" content="MSDocsHeader-DotNetMaui" /> <meta name="updated_at" content="2024-11-12 07:19 PM" /> <meta name="persistent_id" content="2e7d492a-c3cd-5a82-84b2-df8146b71e02" /> <meta name="cmProducts" content="https://authoring-docs-microsoft.poolparty.biz/devrel/7696cda6-0510-47f6-8302-71bb5d2e28cf" data-source="generated" /> <meta name="cmProducts" content="https://microsoft-devrel.poolparty.biz/DevRelOfferingOntology/e6ea396d-3fb5-4a51-91b5-e23ac7ee4d7e" data-source="generated" /> <meta name="cmProducts" content="https://authoring-docs-microsoft.poolparty.biz/devrel/f0c462af-0ef9-4821-b36f-ba3d94736e2b" data-source="generated" /> <meta name="spProducts" content="https://authoring-docs-microsoft.poolparty.biz/devrel/69c76c32-967e-4c65-b89a-74cc527db725" data-source="generated" /> <meta name="spProducts" content="https://microsoft-devrel.poolparty.biz/DevRelOfferingOntology/2b99fe23-e368-4e36-9b45-11c3e25ff3e5" data-source="generated" /> <meta name="spProducts" content="https://authoring-docs-microsoft.poolparty.biz/devrel/1209ac18-fe8e-4ac6-b056-073f0e2c78ab" data-source="generated" /> <meta name="scope" content=".NET MAUI" /><meta name="github_feedback_content_git_url" content="https://github.com/dotnet/docs-maui/blob/main/docs/index.yml" /><link href="https://learn.microsoft.com/en-us/dotnet/maui/?view=net-maui-9.0" rel="canonical"><title>.NET Multi-platform App UI documentation - .NET MAUI | Microsoft Learn</title><link rel="stylesheet" href="/static/assets/0.4.029596269/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: 'Hub', brand: 'dotnet', context: {}, hasBinaryRating: false, feedbackHelpLinkType:'', feedbackHelpLinkUrl:'', standardFeedback: false, showFeedbackReport: false, enableTutorialFeedback: false, feedbackSystem: 'OpenSource', feedbackGitHubRepo: 'dotnet/docs-maui', feedbackProductUrl: 'https://developercommunity.visualstudio.com/',extendBreadcrumb: false,isEditDisplayable: false, hideViewSource: false, hasPageActions: false, hasPrintButton: false, hasBookmark: false, hasShare: true, isPermissioned: false, isPrivateUnauthorized: false,hasRecommendations: false,contributors: [{ name: "davidortinau", url: "https://github.com/davidortinau" },{ name: "jamesmontemagno", url: "https://github.com/jamesmontemagno" },{ name: "jfversluis", url: "https://github.com/jfversluis" },{ name: "adegeo", url: "https://github.com/adegeo" }],}, 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.029596269/global/deprecation.js"></script><script src="/static/assets/0.4.029596269/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="disclaimer-holder" class="has-overflow-hidden has-default-focus">  </div> </div> <div class="mainContainer uhf-container is-full has-default-focus" data-bi-name="body"> <div class="columns has-large-gaps is-gapless-mobile is-gapless"> <section class="primary-holder column ">  <div class="columns is-gapless-mobile has-large-gaps is-gapless"><div id="main-column" class="column "> <main id="main" class="" role="main" data-bi-name="content" lang="en-us" dir="ltr"><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 "><section id="hero" class="hero has-background-dotnet has-text-dotnet-invert background-image-pattern-plus hero-xs background-image-pattern background-size-200"> <div class="hero-content"> <h1 id="hero-title" class="title">.NET Multi-platform App UI documentation</h1> <p id="hero-summary" class="margin-none padding-top-xs">.NET Multi-platform App UI (.NET MAUI) lets you build native apps using a .NET cross-platform UI toolkit that targets the mobile and desktop form factors on Android, iOS, macOS, Windows, and Tizen.</p> </div> </section> <section id="highlighted-content"> <div class="uhf-container padding-block-sm"> <div class="columns is-multiline"> <div class="column is-6-tablet is-3-desktop"> <article class="card is-full-height position-relative"> <div class="card-content display-flex"> <div class="media align-items-stretch"> <div class="media-left display-none display-block-tablet"> <div class="image image-64x64 has-text-dotnet" aria-hidden="true"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" preserveAspectRatio="xMidYMin meet"> <g data-name="Layer 1"> <path fill="#acacac" d="M40.93 51.66L24.42 54.3V12.12l16.51-2.64v42.18z"></path> <path fill-opacity=".3" fill="#e3e3e3" d="M57.71 53.19l-16.59-1.32-16.59 2.65-16.58-1.33V12.14l16.58 1.33 16.59-2.65 16.59 1.32v41.05z"></path> <path d="M24.41 54.52h-.08l-17.2-1.38V10.76l17.23 1.37 16.58-2.65H41l17.2 1.37v42.39L41 51.87zM8.46 51.91l15.9 1.27 16.58-2.65H41l15.87 1.27V12.09L41 10.82l-16.59 2.65h-.08L8.46 12.19z" fill="#e3e3e3"></path> <path d="M59.63 31.82a3 3 0 0 0-3-3A5.48 5.48 0 0 0 46.79 26h-.37a4.42 4.42 0 0 0-.48 8.81h11.1a3 3 0 0 0 2.59-2.99zm-34.02.79A3.61 3.61 0 0 0 22 29h-.06a6.6 6.6 0 0 0-11.81-3.41h-.44a5.33 5.33 0 0 0-.58 10.62h13.37a3.6 3.6 0 0 0 3.13-3.6z" fill="#fff" stroke="#e3e3e3" stroke-miterlimit="10"></path> <circle cx="32.83" cy="32" r="10" class="fill-current-color" fill="#0079d6"></circle> <path fill="#fff" d="M36.89 26.93l-5.64 4.02-2.48 6.48 5.64-4.03 2.48-6.47z"></path> </g> </svg> </div> </div> <div class="media-content"> <p class="card-supertitle margin-top-none margin-top-xs-tablet">Overview</p> <a href="what-is-maui?view=net-maui-9.0" class="card-title stretched-link has-external-link-indicator" data-linktype="relative-path">What is .NET MAUI?</a> </div> </div> </div> </article> </div> <div class="column is-6-tablet is-3-desktop"> <article class="card is-full-height position-relative"> <div class="card-content display-flex"> <div class="media align-items-stretch"> <div class="media-left display-none display-block-tablet"> <div class="image image-64x64 has-text-dotnet" aria-hidden="true"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" preserveAspectRatio="xMidYMin meet"> <g data-name="Layer 1"> <path fill="#acacac" d="M40.93 51.66L24.42 54.3V12.12l16.51-2.64v42.18z"></path> <path fill-opacity=".3" fill="#e3e3e3" d="M57.71 53.19l-16.59-1.32-16.59 2.65-16.58-1.33V12.14l16.58 1.33 16.59-2.65 16.59 1.32v41.05z"></path> <path d="M24.41 54.52h-.08l-17.2-1.38V10.76l17.23 1.37 16.58-2.65H41l17.2 1.37v42.39L41 51.87zM8.46 51.91l15.9 1.27 16.58-2.65H41l15.87 1.27V12.09L41 10.82l-16.59 2.65h-.08L8.46 12.19z" fill="#e3e3e3"></path> <path d="M59.63 31.82a3 3 0 0 0-3-3A5.48 5.48 0 0 0 46.79 26h-.37a4.42 4.42 0 0 0-.48 8.81h11.1a3 3 0 0 0 2.59-2.99zm-34.02.79A3.61 3.61 0 0 0 22 29h-.06a6.6 6.6 0 0 0-11.81-3.41h-.44a5.33 5.33 0 0 0-.58 10.62h13.37a3.6 3.6 0 0 0 3.13-3.6z" fill="#fff" stroke="#e3e3e3" stroke-miterlimit="10"></path> <circle cx="32.83" cy="32" r="10" class="fill-current-color" fill="#0079d6"></circle> <path fill="#fff" d="M36.89 26.93l-5.64 4.02-2.48 6.48 5.64-4.03 2.48-6.47z"></path> </g> </svg> </div> </div> <div class="media-content"> <p class="card-supertitle margin-top-none margin-top-xs-tablet">Overview</p> <a href="supported-platforms?view=net-maui-9.0" class="card-title stretched-link has-external-link-indicator" data-linktype="relative-path">Supported platforms</a> </div> </div> </div> </article> </div> <div class="column is-6-tablet is-3-desktop"> <article class="card is-full-height position-relative"> <div class="card-content display-flex"> <div class="media align-items-stretch"> <div class="media-left display-none display-block-tablet"> <div class="image image-64x64 has-text-dotnet" aria-hidden="true"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" preserveAspectRatio="xMidYMin meet"> <g style="isolation:isolate"> <g data-name="Layer 1"> <g opacity=".1"> <path d="M52.51 52.38h-40.1a1.12 1.12 0 0 1-1.12-1.12V25a1.13 1.13 0 0 1 1.12-1.13h40.76a.47.47 0 0 1 .47.47v26.9a1.12 1.12 0 0 1-1.13 1.14z" opacity=".3" fill="#404040"></path> </g> <path d="M52.51 51.92h-40.1a1.12 1.12 0 0 1-1.12-1.12V24.56a1.13 1.13 0 0 1 1.12-1.13h40.76a.47.47 0 0 1 .47.47v26.9a1.12 1.12 0 0 1-1.13 1.12z" fill="#e3e3e3" opacity=".3"></path> <path d="M12 23.11h41.64a.48.48 0 0 1 .48.48v27.5A1.15 1.15 0 0 1 53 52.25H12a1.15 1.15 0 0 1-1.15-1.15V24.26A1.15 1.15 0 0 1 12 23.11z" stroke="#c8c8c8" stroke-width="1.25" fill="none" stroke-miterlimit="10"></path> <circle cx="32.5" cy="17.03" r="8.8" class="fill-current-color" fill="#0079d6"></circle> <path fill="#c8c8c8" d="M4.46 51.72h56v2.5a1.56 1.56 0 0 1-1.56 1.56H6a1.56 1.56 0 0 1-1.56-1.56v-2.5h.02z"></path> <path d="M32.5 12.26v8.09m3.04-3.05l-3.04 3.04-3.04-3.04" stroke="#fff" stroke-width="1.62" fill="none" stroke-miterlimit="10"></path> <path fill="#c8c8c8" transform="rotate(180 32.405 37.675)" d="M20.6 35.78h23.61v3.8H20.6z"></path> <path fill="#acacac" d="M28.35 35.78h16.16v3.8H28.35z"></path> </g> </g> </svg> </div> </div> <div class="media-content"> <p class="card-supertitle margin-top-none margin-top-xs-tablet">Download</p> <a href="get-started/installation?view=net-maui-9.0" class="card-title stretched-link has-external-link-indicator" data-linktype="relative-path">Installation</a> </div> </div> </div> </article> </div> <div class="column is-6-tablet is-3-desktop"> <article class="card is-full-height position-relative"> <div class="card-content display-flex"> <div class="media align-items-stretch"> <div class="media-left display-none display-block-tablet"> <div class="image image-64x64 has-text-dotnet" aria-hidden="true"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" preserveAspectRatio="xMidYMin meet"> <g data-name="Layer 1"> <path fill="#e3e3e3" d="M15.21 6.69h31.57v4.29H15.21z"></path> <path d="M41 57.87H9a4.09 4.09 0 0 1-4.09-4.09V16h4.85v32.9a4.09 4.09 0 0 0 4.09 4.1h23.06v1.37a4.1 4.1 0 0 0 4.09 3.5z" fill="#acacac"></path> <path d="M9.76 16H4.85v37.8a4.09 4.09 0 0 0 4.09 4.09H41a4.1 4.1 0 0 1-4.05-3.51V53" stroke="#acacac" fill="none" stroke-miterlimit="10" stroke-width="1.17"></path> <path fill="#e3e3e3" d="M45.87 53h-32a4.09 4.09 0 0 1-4.11-4.1V11.1h4.93v32.83A4.09 4.09 0 0 0 18.78 48h23v1.46A4.09 4.09 0 0 0 45.87 53z"></path> <path fill="none" stroke-miterlimit="10" stroke-width="1.17px" stroke="#c8c8c8" d="M14.69 11.1H9.76v37.8a4.09 4.09 0 0 0 4.09 4.1h32a4.09 4.09 0 0 1-4-3.51V48"></path> <path d="M50.8 48a4.1 4.1 0 0 1-4-3.51V6.11h-32v37.8A4.09 4.09 0 0 0 18.78 48z" fill-opacity=".3" fill="#e3e3e3"></path> <path fill="none" stroke-miterlimit="10" stroke-width="1.17px" stroke="#c8c8c8" d="M50.8 48a4.1 4.1 0 0 1-4-3.51V6.11h-32v37.8A4.09 4.09 0 0 0 18.78 48zM27.28 19.78h14.33M27.28 27.96h14.33M27.28 36.74h14.33"></path> <path fill="none" stroke-miterlimit="10" stroke-width="1.17px" stroke="#c8c8c8" d="M20.1 19.23l1.42 1.42 3.52-3.51M20.1 27.55l1.42 1.42 3.52-3.52M20.1 36.24l1.42 1.42 3.52-3.51"></path> <circle cx="50.35" cy="27.96" r="8.8" class="fill-current-color" fill="#0079d6"></circle> <path fill="#fff" d="M47 22.51l.86 9.71 2.2-2.64 2.37 3.84 1.51-.87-2.37-3.94 3.51-.84L47 22.51z"></path> </g> </svg> </div> </div> <div class="media-content"> <p class="card-supertitle margin-top-none margin-top-xs-tablet">Tutorial</p> <a href="get-started/first-app?view=net-maui-9.0" class="card-title stretched-link has-external-link-indicator" data-linktype="relative-path">Build your first app</a> </div> </div> </div> </article> </div> <div class="column is-6-tablet is-3-desktop"> <article class="card is-full-height position-relative"> <div class="card-content display-flex"> <div class="media align-items-stretch"> <div class="media-left display-none display-block-tablet"> <div class="image image-64x64 has-text-dotnet" aria-hidden="true"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" preserveAspectRatio="xMidYMin meet"> <g data-name="Layer 1"> <path d="M26.1 48.89h11.8a10.25 10.25 0 0 1-.61-3.28H26.71z" fill="#e7e7e7"></path> <path d="M43 53.52v1a.26.26 0 0 1-.29.23h-21.4c-.16 0-.3-.11-.3-.23v-1h.07a7.56 7.56 0 0 0 4.63-3.76 6.93 6.93 0 0 0 .39-.87 9.92 9.92 0 0 0 .62-3.28v-.35h10.57v.35a9.93 9.93 0 0 0 .61 3.28 7 7 0 0 0 .4.87 7.53 7.53 0 0 0 4.62 3.76z" fill="#acacac"></path> <path d="M37.91 48.89a9.93 9.93 0 0 1-.61-3.28v-7H26.72v7a9.92 9.92 0 0 1-.62 3.28 6.93 6.93 0 0 1-.39.87h12.6a7 7 0 0 1-.4-.87zm-5.9-5a1.79 1.79 0 1 1 1.79-1.79 1.79 1.79 0 0 1-1.8 1.78z" fill="#919191"></path> <path d="M58.85 9.85v28.57H5.15V10.67a1.42 1.42 0 0 1 1.42-1.42h51.69a.59.59 0 0 1 .59.6z" fill-opacity=".3" fill="#e3e3e3"></path> <path d="M58.85 38.54v5.18a1.41 1.41 0 0 1-1.42 1.42H6.57a1.41 1.41 0 0 1-1.42-1.42v-5.18z" opacity=".5" fill="#e3e3e3"></path> <path d="M58.85 10v33.76a1.41 1.41 0 0 1-1.42 1.42H6.57a1.41 1.41 0 0 1-1.42-1.42v-33a1.41 1.41 0 0 1 1.42-1.38h51.69a.58.58 0 0 1 .59.62z" fill="none" stroke="#c8c8c8" stroke-miterlimit="10" stroke-width="1.25"></path> <path fill="#8f8f8f" fill-opacity=".1" stroke="#ccc" stroke-linejoin="round" stroke-width=".96" d="M5.3 38.54h53.4"></path> <path d="M32 22c-3.66-3-10.82-3.4-10.82-3.4v13.52C26.51 31.26 32 34.83 32 34.83s5.49-3.57 10.83-2.71V18.58S35.36 19.31 32 22z" fill="#e3e3e3" opacity=".5"></path> <path d="M32 20.3c-3.66-3-10.82-3.4-10.82-3.4v13.55c5.34-.86 10.83 2.7 10.83 2.7s5.49-3.56 10.83-2.7V16.9s-7.48.74-10.84 3.4z" class="fill-current-color" fill="#137ad1"></path> </g> </svg> </div> </div> <div class="media-content"> <p class="card-supertitle margin-top-none margin-top-xs-tablet">Training</p> <a href="/en-us/training/paths/build-apps-with-dotnet-maui" class="card-title stretched-link has-external-link-indicator" data-linktype="absolute-path">Build mobile and desktop apps with .NET MAUI</a> </div> </div> </div> </article> </div> <div class="column is-6-tablet is-3-desktop"> <article class="card is-full-height position-relative"> <div class="card-content display-flex"> <div class="media align-items-stretch"> <div class="media-left display-none display-block-tablet"> <div class="image image-64x64 has-text-dotnet" aria-hidden="true"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" preserveAspectRatio="xMidYMin meet"> <g data-name="Layer 1"> <path fill="#919191" d="M49.82 12.94v6.77H24.6v-6a3.35 3.35 0 0 0-.05-.63 4.42 4.42 0 0 0-2.1-3.18h29a5.09 5.09 0 0 0-1.63 3.04zM58.67 19.71h-7.54v-6.62a3.79 3.79 0 0 1 3.74-3.21c3.64 0 3.79 3.75 3.79 3.79v6z"></path> <path d="M54.88 9.31a4.38 4.38 0 0 0-4.33 3.76v41.05h-34.3V13.68a4.38 4.38 0 0 1 4.38-4.37z" fill-opacity=".3" fill="#e3e3e3"></path> <path d="M54.88 8.55H20a5.12 5.12 0 0 0-5.12 5.12v41.78H51.1V13.09a3.79 3.79 0 0 1 3.74-3.21c3.64 0 3.79 3.75 3.79 3.79v6H60v-6a5.08 5.08 0 0 0-5.12-5.12zm-5.06 4.39V54.12H16.25V13.67A3.79 3.79 0 0 1 20 9.88h31.45a5.09 5.09 0 0 0-1.63 3.06z" fill="#e3e3e3"></path> <path d="M10 27.08l10.77 8.56H10v-8.56M4 14.69v26.94h33.93L4 14.69z" class="fill-current-color" fill="#0079d6"></path> </g> </svg> </div> </div> <div class="media-content"> <p class="card-supertitle margin-top-none margin-top-xs-tablet">Architecture</p> <a href="/en-us/dotnet/architecture/maui/" class="card-title stretched-link has-external-link-indicator" data-linktype="absolute-path">Enterprise application patterns using .NET MAUI</a> </div> </div> </div> </article> </div> <div class="column is-6-tablet is-3-desktop"> <article class="card is-full-height position-relative"> <div class="card-content display-flex"> <div class="media align-items-stretch"> <div class="media-left display-none display-block-tablet"> <div class="image image-64x64 has-text-dotnet" aria-hidden="true"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" preserveAspectRatio="xMidYMin meet"> <g style="isolation:isolate"> <g> <path d="M55.57 44.24H8.43a1.33 1.33 0 01-1.32-1.32V12.38a1.33 1.33 0 011.32-1.32h47.9a.56.56 0 01.56.55v31.31a1.33 1.33 0 01-1.32 1.32z" opacity=".3" fill="#414141"></path> <path d="M55.57 43.7H8.43a1.32 1.32 0 01-1.32-1.31V11.84a1.33 1.33 0 011.32-1.32h47.9a.56.56 0 01.56.55v31.32a1.32 1.32 0 01-1.32 1.31z" fill="#e3e3e3" opacity=".3"></path> <path d="M7.93 10.52h48.93a.56.56 0 01.56.56v6.06H6.58v-5.27a1.35 1.35 0 011.35-1.35z" fill="#adadad"></path> <circle fill="#919191" cx="16.97" cy="13.78" r="1.05"></circle> <circle fill="#919191" cx="13.72" cy="13.78" r="1.05"></circle> <circle fill="#919191" cx="10.47" cy="13.78" r="1.05"></circle> <path d="M8.43 10.52h47.9a.55.55 0 01.55.55v31.32a1.32 1.32 0 01-1.32 1.32H8.43a1.32 1.32 0 01-1.32-1.32V11.84a1.32 1.32 0 011.32-1.32z" stroke="#c8c8c8" stroke-width="1.17" fill="none" stroke-miterlimit="10"></path> <path fill="none" stroke-miterlimit="10" stroke="#919191" stroke-linecap="round" stroke-width="1.83px" d="M20.42 24.24h17.39"></path> <path fill="none" stroke-miterlimit="10" stroke="#919191" stroke-linecap="round" stroke-width="1.83px" d="M26.19 30.69h17.39"></path> <path fill="none" stroke-miterlimit="10" stroke="#919191" stroke-linecap="round" stroke-width="1.83px" d="M40.65 24.24h2.93"></path> <path fill="none" stroke-miterlimit="10" stroke="#919191" stroke-linecap="round" stroke-width="1.83px" d="M20.42 27.44h7.1"></path> <path fill="none" stroke-miterlimit="10" stroke="#919191" stroke-linecap="round" stroke-width="1.83px" d="M30.66 27.44h.94"></path> <path fill="none" stroke-miterlimit="10" stroke="#919191" stroke-linecap="round" stroke-width="1.83px" d="M34.74 27.44h.94"></path> <path fill="none" stroke-miterlimit="10" stroke="#919191" stroke-linecap="round" stroke-width="1.83px" d="M20.42 30.72h2.61"></path> <path fill="none" stroke-miterlimit="10" stroke="#919191" stroke-linecap="round" stroke-width="1.83px" d="M38.69 27.44h4.89"></path> <path d="M44 53.78H20a.72.72 0 01-.72-.72V35a.72.72 0 01.72-.72h24.42a.29.29 0 01.3.3v18.48a.72.72 0 01-.72.72z" fill="#414141"></path> <path d="M44 53.48H20a.73.73 0 01-.72-.73V34.66a.73.73 0 01.72-.73h24.42a.3.3 0 01.3.31v18.51a.73.73 0 01-.72.73z" class="fill-current-color" fill="#0079d6"></path> <path fill="#fff" d="M40.21 44.08L35 46.58v-1.1l3.81-1.69L35 41.86v-1.1l5.2 2.71z"></path> <path fill="#fff" d="M35.01 40.76v1.1l3.81 1.89v.04l-3.81 1.69v1.1l5.2-2.5v-.61l-5.2-2.71z"></path> <path fill="#fff" d="M29 46.62l-5.2-2.5v-.62l5.2-2.72v1.11l-3.8 1.89 3.8 1.74z"></path> <path fill="#fff" d="M28.99 40.78l-5.2 2.72v.62l5.2 2.5v-1.1l-3.8-1.72v-.02l3.8-1.89v-1.11z"></path> <path fill="#fff" d="M33.73 40.05l-3 7.31h-.93l3-7.31z"></path> <path fill="#fff" d="M33.73 40.05h-.94l-3.02 7.31h.93l3.03-7.31z"></path> </g> </g> </svg> </div> </div> <div class="media-content"> <p class="card-supertitle margin-top-none margin-top-xs-tablet">sample</p> <a href="/en-us/samples/browse/?expanded=dotnet&products=dotnet-maui" class="card-title stretched-link has-external-link-indicator" data-linktype="absolute-path">Find a sample</a> </div> </div> </div> </article> </div> <div class="column is-6-tablet is-3-desktop"> <article class="card is-full-height position-relative"> <div class="card-content display-flex"> <div class="media align-items-stretch"> <div class="media-left display-none display-block-tablet"> <div class="image image-64x64 has-text-dotnet" aria-hidden="true"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" preserveAspectRatio="xMidYMin meet"> <g data-name="Layer 1"> <path fill="none" d="M.04 0h64v64h-64z"></path> <path fill="none" d="M-.04 0h64v64h-64z"></path> <path d="M54.16 16v35a1.86 1.86 0 0 1-2.64 1.69 74.73 74.73 0 0 0-8.72-3.39C29.1 45 12 42.54 6.57 41.85A1.87 1.87 0 0 1 5 40V26.89A1.87 1.87 0 0 1 6.57 25c5.43-.7 22.53-3.1 36.23-7.46a76.6 76.6 0 0 0 8.72-3.3A1.85 1.85 0 0 1 54.16 16z" fill="#e3e3e3" fill-opacity=".3"></path> <path d="M32.16 46.19v1.47a6.28 6.28 0 0 1-6.28 6.28h-.81A7 7 0 0 1 18.12 47v-3.7" stroke="#c8c8c8" stroke-miterlimit="10" stroke-width="2" fill="none"></path> <path d="M59.05 33.44A7 7 0 0 1 49.56 40c-.18-2.07-.28-4.27-.28-6.54s.1-4.51.28-6.6a7 7 0 0 1 9.49 6.57z" fill="#919191"></path> <path fill="#c8c8c8" d="M52.3 15.44a.52.52 0 0 1 .52.53v35a.52.52 0 0 1-.52.52.59.59 0 0 1-.22 0A76.54 76.54 0 0 0 43.21 48c-13.88-4.41-31.42-6.86-36.47-7.5a.52.52 0 0 1-.44-.5V26.89a.53.53 0 0 1 .45-.52c6.47-.83 23-3.22 36.46-7.51a76.64 76.64 0 0 0 8.87-3.36.46.46 0 0 1 .22-.06m0-1.34a1.85 1.85 0 0 0-.78.18 76.6 76.6 0 0 1-8.72 3.3C29.1 21.94 12 24.34 6.57 25A1.87 1.87 0 0 0 5 26.89V40a1.87 1.87 0 0 0 1.62 1.85C12 42.54 29.1 45 42.8 49.3a74.73 74.73 0 0 1 8.72 3.31 1.83 1.83 0 0 0 .78.17 1.86 1.86 0 0 0 1.86-1.86V16a1.86 1.86 0 0 0-1.86-1.9z"></path> <path fill="#c8c8c8" d="M54.16 16v35a1.86 1.86 0 0 1-2.64 1.69 74.73 74.73 0 0 0-8.72-3.39V17.58a76.6 76.6 0 0 0 8.72-3.3A1.85 1.85 0 0 1 54.16 16z"></path> <circle cx="26.29" cy="21.3" r="9.8" class="fill-current-color" fill="#0079d6"></circle> <path fill="#fff" d="M26.3 15.36l1.47 4.54h4.77l-3.86 2.8 1.47 4.54-3.85-2.81-3.86 2.81 1.47-4.54-3.86-2.8h4.77l1.48-4.54z"></path> </g> </svg> </div> </div> <div class="media-content"> <p class="card-supertitle margin-top-none margin-top-xs-tablet">What's new</p> <a href="whats-new/?view=net-maui-9.0" class="card-title stretched-link has-external-link-indicator" data-linktype="relative-path">What's new?</a> </div> </div> </div> </article> </div> </div> </div> </section> <section id="conceptual-content" class="padding-block-lg"> <div class="uhf-container anchor-headings"> <h2 class="margin-top-none margin-bottom-sm">.NET MAUI common tasks</h2> <div class="columns is-multiline"> <div class="column is-6-tablet is-3-desktop"> <article class="card is-full-height"> <div class="card-content"> <p class="card-title color-text font-size-lg">Upgrade from Xamarin</p> <p class="card-content-description">Run your Xamarin projects on .NET after an upgrade process.</p> <ul class="has-line-height-reset margin-left-none margin-bottom-none margin-top-xs"> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="migration/?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Upgrade from Xamarin to .NET</a> </div> </li> </ul> </div> </article> </div> <div class="column is-6-tablet is-3-desktop"> <article class="card is-full-height"> <div class="card-content"> <p class="card-title color-text font-size-lg">Learn about the app lifecycle</p> <p class="card-content-description">Understand how apps start and go to the background.</p> <ul class="has-line-height-reset margin-left-none margin-bottom-none margin-top-xs"> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="fundamentals/app-lifecycle?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">App lifecycle</a> </div> </li> </ul> </div> </article> </div> <div class="column is-6-tablet is-3-desktop"> <article class="card is-full-height"> <div class="card-content"> <p class="card-title color-text font-size-lg">Use XAML & data-binding</p> <p class="card-content-description">Use the MVVM pattern to show data in your UI.</p> <ul class="has-line-height-reset margin-left-none margin-bottom-none margin-top-xs"> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="xaml/fundamentals/get-started?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Get started with XAML</a> </div> </li> </ul> </div> </article> </div> <div class="column is-6-tablet is-3-desktop"> <article class="card is-full-height"> <div class="card-content"> <p class="card-title color-text font-size-lg">Show a list of data</p> <p class="card-content-description">Use the CollectionView to scroll and select data.</p> <ul class="has-line-height-reset margin-left-none margin-bottom-none margin-top-xs"> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="user-interface/controls/collectionview/?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Present lists of data</a> </div> </li> </ul> </div> </article> </div> <div class="column is-6-tablet is-3-desktop"> <article class="card is-full-height"> <div class="card-content"> <p class="card-title color-text font-size-lg">Customize UIs for specific platforms</p> <p class="card-content-description">Make the most effective use of space in your app UI.</p> <ul class="has-line-height-reset margin-left-none margin-bottom-none margin-top-xs"> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="platform-integration/customize-ui-appearance?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Customize UI appearance based on the platform</a> </div> </li> </ul> </div> </article> </div> <div class="column is-6-tablet is-3-desktop"> <article class="card is-full-height"> <div class="card-content"> <p class="card-title color-text font-size-lg">Access a REST web service</p> <p class="card-content-description">Integrate and interact with web services using HTTP and JSON</p> <ul class="has-line-height-reset margin-left-none margin-bottom-none margin-top-xs"> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="data-cloud/rest?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Consume a REST-based web service</a> </div> </li> </ul> </div> </article> </div> <div class="column is-6-tablet is-3-desktop"> <article class="card is-full-height"> <div class="card-content"> <p class="card-title color-text font-size-lg">Access device features</p> <p class="card-content-description">Use cross-platform APIs for common device features.</p> <ul class="has-line-height-reset margin-left-none margin-bottom-none margin-top-xs"> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="platform-integration/?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Platform integration</a> </div> </li> </ul> </div> </article> </div> <div class="column is-6-tablet is-3-desktop"> <article class="card is-full-height"> <div class="card-content"> <p class="card-title color-text font-size-lg">Deploy apps to devices</p> <p class="card-content-description">Upload to test devices and app stores.</p> <ul class="has-line-height-reset margin-left-none margin-bottom-none margin-top-xs"> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="deployment/?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Deployment</a> </div> </li> </ul> </div> </article> </div> </div> <h2 class="margin-top-none margin-bottom-sm">.NET MAUI guides</h2> <div class="columns is-multiline"> <div class="column is-6-tablet is-3-desktop"> <article class="card is-full-height"> <div class="card-content"> <p class="card-title color-text font-size-lg">Get started</p> <ul class="has-line-height-reset margin-left-none margin-bottom-none margin-top-xs"> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-overview"></span> </span> <a href="what-is-maui?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">What is .NET MAUI?</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-overview"></span> </span> <a href="supported-platforms?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Supported platforms</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-get-started"></span> </span> <a href="get-started/installation?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Installation</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-tutorial"></span> </span> <a href="get-started/first-app?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Build your first app</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-tutorial"></span> </span> <a href="tutorials/notes-app/?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Create a .NET MAUI app</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-tutorial"></span> </span> <a href="tutorials/notes-mvvm/?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Upgrade your app with MVVM</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-overview"></span> </span> <a href="get-started/resources?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Learning resources</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-overview"></span> </span> <a href="troubleshooting?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Troubleshooting</a> </div> </li> </ul> </div> </article> </div> <div class="column is-6-tablet is-3-desktop"> <article class="card is-full-height"> <div class="card-content"> <p class="card-title color-text font-size-lg">Migrate from Xamarin</p> <ul class="has-line-height-reset margin-left-none margin-bottom-none margin-top-xs"> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="migration/?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Upgrade from Xamarin to .NET</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="migration/native-projects?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Upgrade Xamarin native projects</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="migration/upgrade-assistant?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Upgrade with the .NET Upgrade Assistant</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="migration/multi-project-to-multi-project?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Upgrade to a multi-project app</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="migration/multi-project-to-single-project?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Upgrade to a single project app</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="migration/layouts?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Layout behavior changes</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="migration/app-properties?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Migrate app properties data</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="migration/secure-storage?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Migrate secure storage data</a> </div> </li> </ul> </div> </article> </div> <div class="column is-6-tablet is-3-desktop"> <article class="card is-full-height"> <div class="card-content"> <p class="card-title color-text font-size-lg">Fundamentals</p> <ul class="has-line-height-reset margin-left-none margin-bottom-none margin-top-xs"> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="fundamentals/accessibility?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Accessibility</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="fundamentals/app-lifecycle?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">App lifecycle</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="fundamentals/data-binding/?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Data binding</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="fundamentals/datatemplate?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Data templates</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="fundamentals/localization?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Localization</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="fundamentals/resource-dictionaries?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Resource dictionaries</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="fundamentals/shell/?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Shell</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="fundamentals/single-project?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Single project</a> </div> </li> </ul> </div> </article> </div> <div class="column is-6-tablet is-3-desktop"> <article class="card is-full-height"> <div class="card-content"> <p class="card-title color-text font-size-lg">User interface</p> <ul class="has-line-height-reset margin-left-none margin-bottom-none margin-top-xs"> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="user-interface/animation/basic?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Animation</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="user-interface/brushes/?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Brushes</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="user-interface/controls/?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Controls</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="user-interface/graphics/?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Graphics</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="user-interface/handlers/?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Handlers</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="user-interface/layouts/?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Layouts</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="user-interface/pages/contentpage?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Pages</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="user-interface/styles/xaml?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Styles</a> </div> </li> </ul> </div> </article> </div> <div class="column is-6-tablet is-3-desktop"> <article class="card is-full-height"> <div class="card-content"> <p class="card-title color-text font-size-lg">XAML</p> <ul class="has-line-height-reset margin-left-none margin-bottom-none margin-top-xs"> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="xaml/?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Overview</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="xaml/fundamentals/get-started?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Fundamentals</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="xaml/xamlc?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Compilation</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="xaml/generics?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Generics</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="xaml/markup-extensions/consume?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Markup extensions</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="xaml/namespaces/?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Namespaces</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="xaml/pass-arguments?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Pass arguments</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="xaml/hot-reload?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">XAML hot reload</a> </div> </li> </ul> </div> </article> </div> <div class="column is-6-tablet is-3-desktop"> <article class="card is-full-height"> <div class="card-content"> <p class="card-title color-text font-size-lg">Platform integration</p> <ul class="has-line-height-reset margin-left-none margin-bottom-none margin-top-xs"> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="platform-integration/configure-multi-targeting?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Configure multi-targeting</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="platform-integration/customize-ui-appearance?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Customize UI appearance</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="platform-integration/device/information?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Device information</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="platform-integration/device/sensors?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Device sensors</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="platform-integration/invoke-platform-code?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Invoke platform code</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="platform-integration/native-embedding?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Native embedding</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="platform-integration/appmodel/permissions?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Permissions</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="platform-integration/storage/preferences?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Preferences</a> </div> </li> </ul> </div> </article> </div> <div class="column is-6-tablet is-3-desktop"> <article class="card is-full-height"> <div class="card-content"> <p class="card-title color-text font-size-lg">Data & cloud services</p> <ul class="has-line-height-reset margin-left-none margin-bottom-none margin-top-xs"> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-tutorial"></span> </span> <a href="/en-us/azure/developer/mobile-apps/azure-mobile-apps/quickstarts/maui/" class="has-external-link-indicator" data-linktype="absolute-path">Build a .NET MAUI app with Azure Mobile Apps</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-tutorial"></span> </span> <a href="/en-us/azure/developer/mobile-apps/azure-mobile-apps/quickstarts/maui/authentication" class="has-external-link-indicator" data-linktype="absolute-path">Add authentication with Azure Mobile Apps</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-tutorial"></span> </span> <a href="/en-us/azure/developer/mobile-apps/azure-mobile-apps/quickstarts/maui/offline" class="has-external-link-indicator" data-linktype="absolute-path">Offline data sync with Azure Mobile Apps</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-tutorial"></span> </span> <a href="data-cloud/push-notifications?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Send push notifications using Azure Notification Hubs</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="data-cloud/rest?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Consume a REST-based web service</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="data-cloud/local-web-services?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Connect to local web services</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="data-cloud/database-sqlite?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Local databases</a> </div> </li> </ul> </div> </article> </div> <div class="column is-6-tablet is-3-desktop"> <article class="card is-full-height"> <div class="card-content"> <p class="card-title color-text font-size-lg">Deployment</p> <ul class="has-line-height-reset margin-left-none margin-bottom-none margin-top-xs"> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="deployment/?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Overview</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="ios/hot-restart?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Hot restart</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="deployment/performance?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Improve app performance</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="deployment/nativeaot?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Native AOT</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="android/deployment/?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Publish Android apps</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="ios/deployment/?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Publish iOS apps</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="mac-catalyst/deployment/?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Publish Mac Catalyst apps</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="windows/deployment/overview?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Publish Windows apps</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="deployment/trimming?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Trimming</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="ios/wireless-deployment?view=net-maui-9.0" class="has-external-link-indicator" data-linktype="relative-path">Wireless deployment</a> </div> </li> </ul> </div> </article> </div> </div> </div> </section> <section id="additional-content" class="padding-block-lg"> <div class="uhf-container anchor-headings"> <h2 class="margin-top-none margin-bottom-sm">.NET MAUI Blazor Hybrid apps</h2> <div class="columns is-multiline"> <div class="column is-4-tablet is-4-desktop"> <article class="card is-full-height position-relative"> <div class="card-content"> <a href="/en-us/aspnet/core/blazor/hybrid/tutorials/maui" class="card-title stretched-link has-external-link-indicator" data-linktype="absolute-path">Build a .NET MAUI Blazor Hybrid app</a> <p class="card-content-description">Build and run your first .NET MAUI Blazor Hybrid app in Visual Studio.</p> </div> </article> </div> <div class="column is-4-tablet is-4-desktop"> <article class="card is-full-height position-relative"> <div class="card-content"> <a href="/en-us/aspnet/core/blazor/hybrid/routing?pivots=maui" class="card-title stretched-link has-external-link-indicator" data-linktype="absolute-path">Blazor Hybrid routing and navigation</a> <p class="card-content-description">Understand how to manage request routing and navigation in Blazor Hybrid apps.</p> </div> </article> </div> <div class="column is-4-tablet is-4-desktop"> <article class="card is-full-height position-relative"> <div class="card-content"> <a href="/en-us/training/modules/build-blazor-hybrid" class="card-title stretched-link has-external-link-indicator" data-linktype="absolute-path">Build a mobile and desktop app with Blazor Hybrid and .NET MAUI</a> <p class="card-content-description">Build a cross-platform hybrid app with Blazor, .NET MAUI, and C#.</p> </div> </article> </div> </div> <h2 class="margin-top-none margin-bottom-sm">.NET MAUI community resources</h2> <div class="columns is-multiline"> <div class="column is-4-tablet is-4-desktop"> <article class="card is-full-height position-relative"> <div class="card-content"> <a href="/en-us/dotnet/communitytoolkit/maui/" class="card-title stretched-link has-external-link-indicator" data-linktype="absolute-path">.NET MAUI Community Toolkit</a> <p class="card-content-description">The .NET MAUI Community Toolkit is a collection of reusable elements for .NET MAUI app development.</p> </div> </article> </div> <div class="column is-4-tablet is-4-desktop"> <article class="card is-full-height position-relative"> <div class="card-content"> <a href="/en-us/dotnet/communitytoolkit/introduction" class="card-title stretched-link has-external-link-indicator" data-linktype="absolute-path">.NET Community Toolkit</a> <p class="card-content-description">The .NET Community Toolkit is a collection of helpers and APIs that are agnostic of any UI platform.</p> </div> </article> </div> <div class="column is-4-tablet is-4-desktop"> <article class="card is-full-height position-relative"> <div class="card-content"> <a href="/en-us/dotnet/communitytoolkit/windows/" class="card-title stretched-link has-external-link-indicator" data-linktype="absolute-path">Windows Community Toolkit</a> <p class="card-content-description">The Windows Community Toolkit is a collection of controls that simplifies common developer tasks for Windows with .NET.</p> </div> </article> </div> </div> <h2 class="margin-top-none margin-bottom-sm">API reference</h2> <div class="columns is-multiline"> <div class="column is-4-tablet is-4-desktop"> <article class="card is-full-height position-relative"> <div class="card-content"> <a href="/en-us/dotnet/api/?view=net-maui-9.0&preserve-view=true" class="card-title stretched-link has-external-link-indicator" data-linktype="absolute-path">.NET MAUI API reference</a> <p class="card-content-description">API reference documentation for .NET MAUI.</p> </div> </article> </div> <div class="column is-4-tablet is-4-desktop"> <article class="card is-full-height position-relative"> <div class="card-content"> <a href="/en-us/dotnet/api?view=net-8.0&preserve-view=true" class="card-title stretched-link has-external-link-indicator" data-linktype="absolute-path">.NET API reference</a> <p class="card-content-description">API reference documentation for .NET.</p> </div> </article> </div> <div class="column is-4-tablet is-4-desktop"> <article class="card is-full-height position-relative"> <div class="card-content"> <a href="/en-us/dotnet/api?view=dotnet-plat-ext-8.0&preserve-view=true" class="card-title stretched-link has-external-link-indicator" data-linktype="absolute-path">.NET Platform Extensions API reference</a> <p class="card-content-description">API reference documentation for .NET Platform Extensions.</p> </div> </article> </div> </div> <div class="columns"> <div class="column is-12 font-size-sm has-line-height-reset"> <p><a href="https://devblogs.microsoft.com/dotnet/" data-linktype="external">Blogs</a> - <a href="/en-us/answers/tags/247/dotnet-maui" data-linktype="absolute-path">Microsoft Q&A</a> - <a href="https://dotnet.microsoft.com/platform/community" data-linktype="external">Developer Community</a> - <a href="https://github.com/dotnet/maui/releases" data-linktype="external">Release notes</a></p> </div> </div> </div> </section> </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>  <div class="border-top is-visible-interactive has-default-focus margin-top-sm margin-top-none"><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 role="img" aria-label="California Consumer Privacy Act (CCPA) Opt-Out Icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 14" xml:space="preserve" height="16" width="43" focusable="false" > <title>California Consumer Privacy Act (CCPA) Opt-Out Icon</title> <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>  </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 margin-top-none"><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 role="img" aria-label="California Consumer Privacy Act (CCPA) Opt-Out Icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 14" xml:space="preserve" height="16" width="43" focusable="false" > <title>California Consumer Privacy Act (CCPA) Opt-Out Icon</title> <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>

CINXE.COM

.NET Multi-platform App UI documentation - .NET MAUI | Microsoft Learn