Introduktion till kontroller och mönster

I Utveckling av Windows-appar är en kontroll ett användargränssnittselement som visar innehåll eller aktiverar interaktion. Du skapar användargränssnittet för din app med hjälp av kontroller som knappar, textrutor och kombinationsrutor för att visa data och hämta användarindata.

Viktiga API:er: Windows.UI.Xaml.Controls namnområde

Ett mönster är ett recept för att ändra en kontroll eller kombinera flera kontroller för att göra något nytt. Till exempel är list-/informationsmönstret ett sätt att använda en SplitView-kontroll för appnavigering. På samma sätt kan du anpassa mallen för en NavigationView-kontroll för att implementera flikmönstret.

I många fall kan du använda en kontroll som det är. Men XAML-kontroller separerar funktionen från struktur och utseende, så att du kan göra olika ändringsnivåer så att de passar dina behov. I avsnittet Format kan du lära dig hur du använder XAML-format och kontrollmallar för att ändra en kontroll.

I det här avsnittet ger vi vägledning för var och en av de XAML-kontroller som du kan använda för att skapa ditt appgränssnitt. Till att börja med visar den här artikeln hur du lägger till kontroller i din app. Det finns tre viktiga steg för att använda kontroller i din app:

• Lägg till en kontroll i appens användargränssnitt.
• Ange egenskaper för kontrollen, till exempel bredd, höjd eller förgrundsfärg.
• Lägg till kod i kontrollens händelsehanterare så att den gör något.

Lägga till en kontroll

Du kan lägga till en kontroll i en app på flera sätt:

• Använd ett designverktyg som Blend för Visual Studio eller XAML-designern (Microsoft Visual Studio Extensible Application Markup Language).
• Lägg till kontrollen i XAML-markering i Visual Studio XAML-redigeraren.
• Lägg till kontrollen i koden. Kontroller som du lägger till i kod visas när appen körs, men visas inte i Visual Studio XAML-designern.

När du lägger till och manipulerar kontroller i din app i Visual Studio kan du använda många av programmets funktioner, inklusive verktygslådan, XAML-designern, XAML-redigeraren och fönstret Egenskaper.

Visual Studio Toolbox visar många av de kontroller som du kan använda i din app. Om du vill lägga till en kontroll i din app dubbelklickar du på den i verktygslådan. När du till exempel dubbelklickar på TextBox-kontrollen läggs denna XAML till i XAML-vyn.

<TextBox HorizontalAlignment="Left" Text="TextBox" VerticalAlignment="Top"/>

Du kan också dra kontrollen från verktygslådan till XAML-designern.

Ange namnet på en kontroll

Om du vill arbeta med en kontroll i kod anger du dess x:Name-attribut och refererar till det efter namn i koden. Du kan ange namnet i fönstret Egenskaper för Visual Studio eller I XAML. Så här anger du namnet på den markerade kontrollen med hjälp av textrutan Namn överst i fönstret Egenskaper.

Namnge en kontroll

1. Välj det element som ska namnges.
2. I panelen Egenskaper skriver du ett namn i textrutan Namn.
3. Tryck på Enter för att bekräfta namnet.

Så här anger du namnet på en kontroll i XAML-redigeraren genom att lägga till attributet x:Name.

<Button x:Name="Button1" Content="Button"/>

Ange kontrollegenskaperna

Du använder egenskaper för att ange utseende, innehåll och andra attribut för kontroller. När du lägger till en kontroll med ett designverktyg kan vissa egenskaper som styr storlek, position och innehåll anges åt dig av Visual Studio. Du kan ändra vissa egenskaper, till exempel Bredd, Höjd eller Marginal, genom att välja och ändra kontrollen i designvyn. Den här bilden visar några av de storleksändringsverktyg som är tillgängliga i designvyn.

Du kanske vill låta kontrollen storleksanpassas och placeras automatiskt. I det här fallet kan du återställa de storleks- och positionsegenskaper som Visual Studio har angett åt dig.

Så här återställer du en egenskap

1. I panelen Egenskaper klickar du på egenskapsmarkören bredvid egenskapsvärdet. Egenskapsmenyn öppnas.
2. I egenskapsmenyn klickar du på Återställ.

Du kan ange kontrollegenskaper i fönstret Egenskaper, I XAML eller i kod. Om du till exempel vill ändra förgrundsfärgen för en knapp anger du kontrollens förgrundsegenskap. Den här bilden visar hur du anger förgrundsegenskapen med hjälp av färgväljaren i fönstret Egenskaper.

Så här ställer du in egenskapen Foreground i XAML-redigeraren. Observera Visual Studio IntelliSense-fönstret som öppnas för att hjälpa dig med syntaxen.

Här är den resulterande XAML-filen när du har angett egenskapen Foreground.

<Button x:Name="Button1" Content="Button" 
        HorizontalAlignment="Left" VerticalAlignment="Top"
        Foreground="Beige"/>

Så här anger du egenskapen Foreground i kod.

Button1.Foreground = new SolidColorBrush(Windows.UI.Colors.Beige);

Button1().Foreground(Media::SolidColorBrush(Windows::UI::Colors::Beige()));

Skapa en händelsehanterare

Varje kontroll har händelser som gör att du kan svara på åtgärder från din användare eller andra ändringar i din app. En knappkontroll har till exempel en Klick-händelse som aktiveras när en användare klickar på Knappen. Du skapar en metod som kallas händelsehanterare för att hantera händelsen. Du kan associera en kontrolls händelse med en händelsehanterarmetod i fönstret Egenskaper, I XAML eller i kod. Mer information om händelser finns i Översikt över händelser och routade händelser.

Om du vill skapa en händelsehanterare väljer du kontrollen och klickar sedan på fliken Händelser överst i fönstret Egenskaper. Fönstret Egenskaper visar en lista över alla händelser som är tillgängliga för den kontrollen. Här är några av händelserna för en knapp.

Om du vill skapa en händelsehanterare med standardnamnet dubbelklickar du på textrutan bredvid händelsenamnet i fönstret Egenskaper. Om du vill skapa en händelsehanterare med ett anpassat namn skriver du önskat namn i textrutan och trycker på Retur. Händelsehanteraren skapas och filen bakom koden öppnas i kodredigeraren. Händelsehanterarmetoden har två parametrar. Den första är sender, som är en referens till objektet där hanteraren är kopplad. Parametern sender är en objekttyp . Du växlar sender vanligtvis till en mer exakt typ om du förväntar dig att kontrollera eller ändra tillståndet för sender själva objektet. Baserat på din egen appdesign förväntar du dig en typ som är säker att casta sender till, baserat på var hanteraren är ansluten. Det andra värdet är händelsedata, som vanligtvis visas i signaturer som parametern e eller args .

Här är kod som hanterar klickhändelsen för en knapp med namnet Button1. När du klickar på knappen är förgrundsegenskapen för knappen du klickade på inställd på blå.

private void Button_Click(object sender, RoutedEventArgs e)
{
    Button b = (Button)sender;
    b.Foreground = new SolidColorBrush(Windows.UI.Colors.Blue);
}

#MainPage.h
struct MainPage : MainPageT<MainPage>
    {
        MainPage();
        ...
        void Button1_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::UI::Xaml::RoutedEventArgs const& e);
    };
    
#MainPage.cpp
void MainPage::Button1_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::UI::Xaml::RoutedEventArgs const& e)
    {
        auto b{ sender.as<winrt::Windows::UI::Xaml::Controls::Button>() };
        b.Foreground(Media::SolidColorBrush(Windows::UI::Colors::Blue()));
    }

Du kan också associera en händelsehanterare i XAML. I XAML-redigeraren skriver du in det händelsenamn som du vill hantera. Visual Studio visar ett IntelliSense-fönster när du börjar skriva. När du har angett händelsen kan du dubbelklicka <New Event Handler> i Fönstret IntelliSense för att skapa en ny händelsehanterare med standardnamnet eller välja en befintlig händelsehanterare i listan.

Här är IntelliSense-fönstret som visas. Det hjälper dig att skapa en ny händelsehanterare eller välja en befintlig händelsehanterare.

Det här exemplet visar hur du associerar en Klick-händelse med en händelsehanterare med namnet Button_Click i XAML.

<Button Name="Button1" Content="Button" Click="Button_Click"/>

Du kan också associera en händelse med dess händelsehanterare i koden bakom. Så här associerar du en händelsehanterare i kod.

Button1.Click += new RoutedEventHandler(Button_Click);

Button1().Click({ this, &MainPage::Button1_Click });

Relaterade ämnen

• Index för kontroller efter funktion
• Windows.UI.Xaml.Controls-namnområde
• Layout
• Stil
• Användbarhet