Kontroller för Windows appar

Kontroller är användargränssnittselementen som utgör din Windows app – knappar, textfält, listor, väljare med mera. En kontroll visar innehåll eller låter användare interagera med din app. Ett mönster kombinerar flera kontroller till ett återanvändbart recept för vanliga scenarier som formulär eller layouter med listinformation.

Windows innehåller över 45 kontroller som är klara att användas, som alla bygger på Fluent Design System. Från enkla växlingsknappar till omfattande datavyer som rutnät och lista hjälper dessa kontroller dig att skapa gränssnitt som är visuellt polerade, tillgängliga och dynamiska mellan enheter.

I artiklarna i det här avsnittet finns designvägledning, kodexempel och metodtips för varje kontroll och mönster.

Komma igång

Mer information om hur du lägger till kontroller i din app och hur du kopplar in händelsehanterare finns i Lägga till kontroller och hantera händelser. Information om hur du anpassar kontrollutseende med återanvändbara XAML-format finns i Formateringskontroller.

Kontroller

I följande tabell visas de Windows appkontroller som är tillgängliga i WinUI, med länkar till deras dokumentation.

Grundläggande indata

Bild	Control	Beskrivning
	Buttons	En kontroll som svarar på användarindata och genererar en Click-händelse. Innehåller knapp, listruteknapp, delningsknapp, växlingsknapp med mera.
	kryssrutor	En kontroll som en användare kan välja eller avmarkera.
	Kombinationsrutor	En listruta med objekt som en användare kan välja mellan.
	Hyperlänkar	En knapp som visas som hyperlänktext och som kan navigera till en URI eller hantera en Klick-händelse.
	Radioknappar	En kontroll som gör att en användare kan välja ett enda alternativ från en grupp med alternativ.
	Klassificeringskontroll	Betygsätt något 1 till 5 stjärnor.
	Reglagen	En kontroll som låter användaren välja från ett intervall med värden genom att flytta en tumkontroll längs ett spår.
	Vippströmbrytare	En växel som kan växlas mellan 2 tillstånd.

Samlingar

Bild	Control	Beskrivning
	Objektvy	En kontroll som visar en samling objekt med olika layouter.
	Listvy och rutnätsvy	Kontroller som visar en samling objekt i en lodrät lista eller i rader och kolumner.
	Vänd vy	Visar en samling objekt som användaren kan bläddra igenom, ett objekt i taget.
	Pips-sidsökare	En kontroll som låter användaren navigera genom en sidnumrerad samling när sidnumren inte behöver vara visuellt kända.
	Trädvy	Ett hierarkiskt listmönster med expanderande och komprimerade noder som innehåller kapslade objekt.
	Objektrepeterare	En flexibel, primitiv kontroll för datadrivna layouter.
	Svep	Pekgest för snabbmenyåtgärder för objekt.
	Dra för att uppdatera	Ger möjlighet att hämta en samling objekt i en lista/rutnät för att uppdatera innehållet i samlingen.

Dialogrutor och utfällbara fönster

Bild	Control	Beskrivning
	Dialoger	En dialogruta som kan anpassas för att innehålla valfritt XAML-innehåll.
	Utfällningsmenyer	Visar sammanhangsbaserad information och aktiverar användarinteraktion.
	Undervisningstips	En innehållsrik utfällning för att vägleda användare och möjliggöra lärmoment.

Formulär

Media, grafik och former

Bild	Control	Beskrivning
	ikoner	Representera ikonkontroller som använder olika bildtyper som innehåll.
	Animerade ikoner	Ett element som visar och styr en ikon som animerar när användaren interagerar med kontrollen.
	Bilder och bildborstar	En kontroll för att visa bildinnehåll.
	Bläck	Kontroller för digital ritning, inklusive rityta och verktygsfält för ritning.
	Medieuppspelning	En kontroll för att visa video- och bildinnehåll.
	Former	Rita former som ellipser, rektanglar och polygoner.

Menyer och verktygsfält

Bild	Control	Beskrivning
	Menyer och snabbmenyer	Visar en kontextuell lista över enkla kommandon eller alternativ.
	Kommandofält	Ett verktygsfält för att visa programspecifika kommandon som hanterar layout och storleksändring av innehållet.
	Utfällbar kommandofält	Ett miniverktygsfält som visar proaktiva kommandon och en valfri meny med kommandon.
	Utfällbar meny och menyrad	En klassisk meny som möjliggör visning av MenuItems som innehåller MenuFlyoutItems.

Navigering

Bild	Control	Beskrivning
	Sökvägsfält	Visar det navigeringsspår som tagits till den aktuella platsen.
	Lista/information	Ett mönster som visar en lista över objekt tillsammans med information om det markerade objektet.
	navigeringsvy	Gemensam lodrät layout för områden på den översta nivån i din app via en komprimerbar navigeringsmeny.
	Pivot	Visar information från olika källor i en flikvy.
	Selektorfält	Visar information från en liten uppsättning olika källor. Användaren kan välja en av dem.
	Flikvy	En kontroll som visar en samling flikar som kan användas för att visa flera dokument.

People

Bild	Control	Beskrivning
	Personbild	Visar bilden av en person/kontakt.

Pickers

Bild	Control	Beskrivning
	Färgväljaren	En kontroll som visar ett valbart färgspektrum.
	Kalenderdatumväljare	En kontroll som låter användare välja ett datumvärde med hjälp av en kalender.
	Kalendervy	En kontroll som visar en kalender för en användare att välja ett datum från.
	Datumväljare	En kontroll som låter en användare välja ett datumvärde.
	Tidsväljare	En konfigurerbar kontroll som låter en användare välja ett tidsvärde.

Rullning och layout

Bild	Control	Beskrivning
	Expander	En container med en rubrik som kan expanderas för att visa en brödtext med mer innehåll.
	Rullnings- och panoreringskontroller	En containerkontroll som låter användaren panorera och zooma dess innehåll.
	Kommenterad rullningslist	En kontroll som utökar en vanlig lodrät rullningslist för enkel navigering genom stora samlingar.
	semantisk zoom	Låter användaren zooma mellan två olika vyer av en samling, vilket gör det enklare att navigera genom stora samlingar med objekt.
	Delningsvy	En container som har två innehållsområden med flera visningsalternativ för fönstret.
	Vy med två fönster	En kontroll med två innehållsområden som sträcker sig över det tillgängliga utrymmet, antingen sida vid sida eller upp och ner.

Status och information

Bild	Control	Beskrivning
	Progress	Visar appens förlopp för en aktivitet med hjälp av en förloppsindikator eller förloppsring.
	Verktygstips	Visar information för ett element i ett popup-fönster.
	Informationsfält	Ett infogat meddelande som visar statusändringsinformation för hela appen.
	Info-märke	Ett icke-påträngande användargränssnitt för att visa meddelanden eller fokusera på ett område.

Text

Bild	Control	Beskrivning
	automatskt förslagsfönster	En kontroll för att ge förslag när en användare skriver.
	Textblock	En lättviktig kontroll för att visa små mängder text.
	RTF-block	En kontroll som visar formaterad text, hyperlänkar, infogade bilder och annat innehållsrikt innehåll.
	textruta	Ett oformaterad textfält med en rad eller flera rader.
	Rik redigeringsruta	En redigeringskontroll för RTF som stöder formaterad text, hyperlänkar och annat rikt innehåll.
	lösenordsruta	En kontroll för att ange lösenord.
	Nummerruta	En textkontroll som används för numeriska indata och utvärdering av algebraiska ekvationer.
	Etiketter	Vägledning för att lägga till tillgängliga etiketter i indatakontroller.

Titelrad

Bild	Control	Beskrivning
	Titelrad	Anpassa namnlisten i appfönstret.

WinUI 3-galleri

WinUI 3-galleriappen är det bästa sättet att utforska dessa kontroller praktiskt. Den innehåller interaktiva demonstrationer av de flesta WinUI-kontroller, funktioner och Fluent Design-mönster , vilket gör den till en idealisk följeslagare till den här dokumentationen. Installera den för att prova kontroller i realtid och länka direkt från enskilda kontrollsidor.

Ytterligare kontroller och resurser

Windows Community Toolkit är en samling hjälpfunktioner, tillägg och ytterligare användargränssnittskontroller som kompletterar de inbyggda WinUI-kontrollerna. Den är communitydriven och underhålls av Microsoft och omfattar vanliga scenarier som avancerade layouter, konverterare och animeringar.

För tidig åtkomst till experimentella kontroller och funktioner, kolla in Windows Community Toolkit Labs, där nya komponenter utvecklas och testas innan de flyttas till huvudverktygslådan.