Denetimlere ve olaylara giriş

Windows app geliştirme aşamasında control içeriği görüntüleyen veya etkileşimi etkinleştiren bir kullanıcı arabirimi öğesidir. Verileri görüntülemek ve kullanıcı girişi almak için düğmeler, metin kutuları ve birleşik giriş kutuları gibi denetimleri kullanarak uygulamanızın kullanıcı arabirimini oluşturursunuz.

Önemli API'ler: Microsoft.UI.Xaml.Controls ad alanı

Desen, bir denetimi değiştirmek veya yeni bir şey yapmak için çeşitli denetimleri birleştirmek için kullanılan bir tariftir. Örneğin, liste/ayrıntılar deseni, uygulama gezintisi için SplitView denetimini kullanabileceğiniz bir yöntemdir.

Çoğu durumda, bir denetimi olduğu gibi kullanabilirsiniz. Ancak XAML denetimleri işlevi yapı ve görünümden ayırarak gereksinimlerinize uygun hale getirmek için çeşitli düzeylerde değişiklik yapabilirsiniz. Denetimi değiştirmek için XAML stillerini ve denetim şablonlarını kullanabilirsiniz.

Bu bölümde, uygulama kullanıcı arabiriminizi oluşturmak için kullanabileceğiniz XAML denetimlerinin her biri için rehberlik sağlıyoruz. Başlamak için, bu makalede uygulamanıza denetimlerin nasıl ekleneceği gösterilir. Uygulamanızda denetimleri kullanmanın 3 temel adımı vardır:

• Uygulama kullanıcı arabiriminize bir denetim ekleyin.
• Denetimde genişlik, yükseklik veya ön plan rengi gibi özellikleri ayarlayın.
• Bir şey yapmak için denetimin olay işleyicilerine kod ekleyin.

Denetim ekle

Uygulamaya çeşitli yollarla denetim ekleyebilirsiniz:

• denetimi Visual Studio XAML düzenleyicisindeki XAML işaretlemesine ekleyin.
• Denetimi koda ekleyin. Koda eklediğiniz denetimler, uygulama çalıştırıldığında görünür ancak Visual Studio XAML tasarımcısında görünmez.

Visual Studio'da, uygulamanıza denetimler ekleyip işlendiğinde Araç Kutusu, XAML düzenleyicisi ve Özellikler penceresi dahil olmak üzere programın birçok özelliğini kullanabilirsiniz.

Visual Studio Araç Kutusu, uygulamanızda kullanabileceğiniz denetimlerin çoğunu görüntüler. Uygulamanıza denetim eklemek için Araç Kutusu'nda denetime çift tıklayın. Örneğin, TextBox denetimine çift tıkladığınızda, bu XAML XAML görünümüne eklenir.

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

Denetimin adını ayarlama

Kodda bir denetimle çalışmak için x:Name özniteliğini ayarlayıp, kodunuzda adıyla referans alırsınız. Adı Visual Studio Özellikler penceresi veya XAML'de ayarlayabilirsiniz. Özellikler penceresi üst kısmındaki Ad metin kutusunu kullanarak seçili durumdaki denetimin adını şöyle ayarlayabilirsiniz.

Denetimi adlandırmak için

1. Adlandıracak öğeyi seçin.
2. Özellikler panelinde, Ad metin kutusuna bir ad yazın.
3. Adı işlemek için Enter tuşuna basın.

Visual Studio tasarımcısında

x:Name özniteliğini ekleyerek XAML düzenleyicisinde bir denetimin adını şöyle ayarlayabilirsiniz.

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

Denetim özelliklerini ayarlama

Denetimlerin görünümünü, içeriğini ve diğer özniteliklerini belirtmek için özellikleri kullanırsınız. Tasarım aracı kullanarak denetim eklediğinizde, boyutu, konumu ve içeriği denetleen bazı özellikler Visual Studio tarafından sizin için ayarlanabilir.

Denetim özelliklerini XAML'de veya kodda ayarlayabilirsiniz. Örneğin, düğmenin ön plan rengini değiştirmek için denetimin Ön Plan özelliğini ayarlarsınız. Bu çizimde, Özellikler penceresi renk seçiciyi kullanarak Foreground özelliğinin nasıl ayarlanacağı gösterilmektedir.

Visual Studio tasarımcısında

XAML düzenleyicisinde Foreground özelliğini şu şekilde ayarlayabilirsiniz. Söz diziminde size yardımcı olacak Visual Studio IntelliSense penceresine dikkat edin.

Foreground özelliğini ayarladıktan sonra elde edilen XAML aşağıda gösterilmiştir.

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

Kodda Foreground özelliğini şu şekilde ayarlayabilirsiniz.

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

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

Olay işleyicisi oluşturma

Her denetim, uygulamanızdaki kullanıcı eylemlerine veya diğer değişikliklere yanıt vermenizi sağlayan olayları kullanıma sunar. Örneğin Bir Düğme, kullanıcı tıkladığında bir Click olay oluşturur. Bu olaya yanıt vermek için bir olay işleyicisi (olay tetiklendiğinde çalışan bir yöntem) yazarsınız. Bir olay işleyicisini Özellikler penceresi, XAML'de veya code-behind'da bağlayabilirsiniz. Olaylar hakkında daha fazla bilgi için bkz. Olaylara ve yönlendirilen olaylara genel bakış.

Olay işleyicisi parametreleri

Her olay işleyicisi iki parametre alır:

• sender – Olayı tetikleyen nesneye başvuru. Nesne olarak yazıldığından, gönderenin durumunu incelemeniz veya değiştirmeniz gerektiğinde bunu genellikle daha belirli bir türe (örneğinButton) yayınlarsınız. İşleyicinin bağlı olduğu yere göre güvenli olan herhangi bir türe dönüştür.
• e (veya args) – Olaya özgü bilgileri taşıyan olay verileri.

Aşağıdaki örnek, Click olayını işleyecek şekilde Button1 adlı bir Button'u ele alır. Düğmeye tıklandığında ön plan rengi mavi olarak ayarlanır.

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()));
    }

XAML'de olay işleyicisini ilişkilendirme

XAML düzenleyicisinde, işlemek istediğiniz olay adını yazmaya başlayın. Visual Studio siz yazarken bir IntelliSense penceresi açar. Varsayılan ada sahip bir işleyici oluşturmak için çift tıklayın <New Event Handler> veya listeden var olan bir işleyiciyi seçin.

Bu örnek, bir Click olayı XAML'de adlı Button_Click bir işleyiciyle ilişkilendirir:

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

Kodda olay işleyicisini ilişkilendirme

İşleyiciyi tamamen kod arkasına bağlayabilirsiniz:

Button1.Click += new RoutedEventHandler(Button_Click);

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

İlgili konular

• İşleve göre denetimlerin dizini
• Microsoft.UI.Xaml.Controls ad alanı
• Düzen
• Üslup
• Kullanılabilirlik