C++/WinRT kullanarak bir "Merhaba, Dünya!" UWP uygulaması oluşturun.

Bu konu, C++/WinRT kullanarak bir Windows Evrensel Windows Platformu (UWP) "Merhaba, Dünya!" uygulaması oluşturma konusunda size yol gösterir. Uygulamanın kullanıcı arabirimi (UI), Genişletilebilir Uygulama Biçimlendirme Dili (XAML) kullanılarak tanımlanır.

C++/WinRT, Windows Çalışma Zamanı (WinRT) API'leri için tamamen standart bir modern C++17 dil projeksiyonudur. Daha fazla bilgi ve daha fazla izlenecek yol ve kod örneği için C++/WinRT belgelerine bakın. Başlangıç olarak C++/WinRTkullanmaya başlama iyi bir konudur.

C++/WinRT için Visual Studio'yu ayarlama

C++/WinRT visual studio uzantısı (VSIX) ve NuGet paketini (birlikte proje şablonu ve derleme desteği sağlar) yükleme ve kullanma dahil olmak üzere C++/WinRT geliştirmesi için Visual Studio'yu ayarlama hakkında bilgi için bkz. C++/WinRTiçin Visual Studio desteği .

Visual Studio'yu indirmek için bkz. İndirmeler.

XAML'ye giriş için bkz. XAML'ye genel bakış

Boş Uygulama Oluşturma (HelloWorldCppWinRT)

İlk uygulamamız etkileşim, düzen ve stillerin bazı temel özelliklerini gösteren bir "Hello, World!" uygulamasıdır.

Microsoft Visual Studio'da yeni bir proje oluşturarak başlayın. Boş Uygulama (C++/WinRT) projesi oluştur ve HelloWorldCppWinRTolarak adlandır. Çözümü ve projeyi aynı dizine yerleştir işaretinin kaldırıldığından emin olun. Windows SDK'sının genel kullanıma sunulan (önizleme değil) en son sürümünü hedefleyin.

Bu konunun ilerleyen bir bölümünde, projenizi oluşturmanız için yönlendirileceksiniz; ancak o zamana kadar oluşturmayın.

Proje dosyaları hakkında

Genellikle proje klasöründe her .xaml (XAML işaretleme) dosyasının karşılık gelen .idlbir , .hve .cpp dosyası vardır. Bu dosyalar birlikte bir XAML sayfa türünde derlenmiş.

Kullanıcı arabirimi öğeleri oluşturmak için bir XAML işaretleme dosyasını değiştirebilir ve bu öğeleri veri kaynaklarına ( veri bağlama olarak bilinen bir görev) bağlayabilirsiniz. XAML sayfanız için özel mantık eklemek üzere .h, .cpp dosyalarını (ve bazen .idl dosyasını) değiştirirsiniz, örneğin olay işleyicileri.

Şimdi bazı proje dosyalarına göz atalım.

App.idl, , App.xaml, App.h ve App.cpp. Bu dosyalar, uygulamanızın giriş noktasını içeren Windows::UI::Xaml::Application sınıfındaki uzmanlığını temsil eder. App.xaml sayfaya özgü işaretleme içermez, ancak kullanıcı arabirimi öğesi stillerini ve tüm sayfalardan erişilebilir olmasını istediğiniz diğer öğeleri ekleyebilirsiniz. .h ve .cpp dosyaları, çeşitli uygulama yaşam döngüsü olayları için işleyiciler içerir. Genellikle, uygulamanızı başlatıldığında başlatmak ve askıya alınıp sonlandırıldığında temizleme gerçekleştirmek için özel kod eklersiniz.
MainPage.idl, , MainPage.xaml, MainPage.h ve MainPage.cpp. MainPage çalışma zamanı sınıfı olan bir uygulamada varsayılan ana (başlangıç) sayfa türü için XAML işaretlemesini ve uygulamasını içerir. MainPage'de gezinti desteği yoktur, ancak başlamanız için bazı varsayılan kullanıcı arabirimi ve olay işleyicisi sağlar.
pch.h ve pch.cpp. Bu dosyalar projenizin önceden derlenmiş üst bilgi dosyasını temsil edilir. içinde pch.h, sık değişmeyen üst bilgi dosyalarını ekleyin ve ardından projedeki diğer dosyalara ekleyin pch.h .

Koda ilk bakış

Çalışma zamanı sınıfları

Bildiğiniz gibi, C# dilinde yazılmış bir Evrensel Windows Platformu (UWP) uygulamasındaki tüm sınıflar Windows Çalışma Zamanı türleridir. Ancak bir C++/WinRT uygulamasında bir tür yazdığınızda, bu türün bir Windows Çalışma Zamanı türü mü yoksa normal bir C++ sınıfı/yapısı/numaralandırması mı olduğunu seçebilirsiniz.

Projenizdeki herhangi bir XAML sayfa türünün bir Windows Çalışma Zamanı türü olması gerekir. Bu nedenle MainPage bir Windows Çalışma Zamanı türüdür. Özellikle , birçalışma zamanı sınıfıdır. XAML sayfası tarafından kullanılan herhangi bir türün de bir Windows Çalışma Zamanı türü olması gerekir. bir Windows Çalışma Zamanı bileşeni yazarken ve başka bir uygulamadan kullanılabilecek bir tür yazmak istiyorsanız, bir Windows Çalışma Zamanı türü yazarsınız. Diğer durumlarda, türünüz normal bir C++ türü olabilir. Genel olarak bakıldığında, bir Windows Çalışma Zamanı türü herhangi bir Windows Çalışma Zamanı dili kullanılarak kullanılabilir.

Bir türün Windows Çalışma Zamanı türü olduğunun iyi bir göstergesi, bir Arabirim Tanım Dili () dosyası içinde Microsoft Arabirim Tanım Dili'nde (MIDL) tanımlanmış olmasıdır..idl MainPage'i örnek alalım.

// MainPage.idl
namespace HelloWorldCppWinRT
{
    [default_interface]
    runtimeclass MainPage : Windows.UI.Xaml.Controls.Page
    {
        MainPage();
        Int32 MyProperty;
    }
}

MainPage çalışma zamanı sınıfının ve MainPage.h'de görüldüğü gibi etkinleştirme fabrikasının uygulanmasının temel yapısı aşağıdadır.

// MainPage.h
...
namespace winrt::HelloWorldCppWinRT::implementation
{
    struct MainPage : MainPageT<MainPage>
    {
        MainPage();

        int32_t MyProperty();
        void MyProperty(int32_t value);
        ...
    };
}

namespace winrt::HelloWorldCppWinRT::factory_implementation
{
    struct MainPage : MainPageT<MainPage, implementation::MainPage>
    {
    };
}

Belirli bir tür için çalışma zamanı sınıfı yazmanız gerekip gerekmediği hakkında daha fazla bilgi için C++/WinRT ile API yazma konusuna bakın. Ayrıca, çalışma zamanı sınıfları ile IDL (.idl dosyaları) arasındaki bağlantı hakkında daha fazla bilgi için XAML denetimleri konusunu okuyup izleyebilirsiniz;bir C++/WinRT özelliğine bağlama. Bu konu, yeni bir çalışma zamanı sınıfı oluşturma sürecini ele alır; bu sürecin ilk adımı, projeye yeni bir Midl Dosyası (.idl) öğesi eklemektir.

Şimdi HelloWorldCppWinRT projesine bazı işlevler ekleyelim.

Adım 1. Başlangıç sayfanızı değiştirme

Kullanıcı arabirimini (UI) oluşturan denetimleri yazabilmeniz için Çözüm Gezgini'nde açın MainPage.xaml .

Zaten orada bulunan StackPanel ve içeriğini silin. Yerine aşağıdaki XAML'yi yapıştırın.

<StackPanel x:Name="contentPanel" Margin="120,30,0,0">
    <TextBlock HorizontalAlignment="Left" Text="Hello, World!" FontSize="36"/>
    <TextBlock Text="What's your name?"/>
    <StackPanel x:Name="inputPanel" Orientation="Horizontal" Margin="0,20,0,20">
        <TextBox x:Name="nameInput" Width="300" HorizontalAlignment="Left"/>
        <Button x:Name="inputButton" Content="Say &quot;Hello&quot;"/>
    </StackPanel>
    <TextBlock x:Name="greetingOutput"/>
</StackPanel>

Bu yeni StackPanel, kullanıcının adını soran bir TextBlock, kullanıcının adını kabul eden bir TextBox, bir Düğmesive başka bir TextBlock öğesi içerir.

myButtonadlı Buton sildiğimiz için, koddan myButton'a yapılan referansı kaldırmamız gerekir. Bu nedenle, MainPage.cpp içindeki MainPage::ClickHandler işlevindeki kod satırını silin.

Bu noktada, çok temel bir Evrensel Windows uygulaması oluşturdunuz. UWP uygulamasının nasıl göründüğünü görmek için uygulamayı derleyin ve çalıştırın.

UWP uygulaması ekranı , kontrollerle birlikte

Uygulamada metin kutusuna yazabilirsiniz. Ancak düğmeye tıklamak henüz bir şey yapmaz.

Adım 2. Olay işleyicisi ekleme

MainPage.xamliçinde, inputButtonadlı Butonunu bul ve ButtonBase:: olayı için bir olay işleyicisi deklare et. Düğme işaretlemesi artık şöyle görünmelidir.

<Button x:Name="inputButton" Content="Say &quot;Hello&quot;" Click="inputButton_Click"/>

Olay işleyicisini aşağıdaki gibi uygulayın.

// MainPage.h
struct MainPage : MainPageT<MainPage>
{
    ...
    void inputButton_Click(
        winrt::Windows::Foundation::IInspectable const& sender,
        winrt::Windows::UI::Xaml::RoutedEventArgs const& e);
};

// MainPage.cpp
namespace winrt::HelloWorldCppWinRT::implementation
{
    ...
    void MainPage::inputButton_Click(
        winrt::Windows::Foundation::IInspectable const& sender,
        winrt::Windows::UI::Xaml::RoutedEventArgs const& e)
    {
        greetingOutput().Text(L"Hello, " + nameInput().Text() + L"!");
    }
}

Daha fazla bilgi için bkz. Temsilciler kullanarak olayların nasıl işleneceği.

Uygulama, metin kutusundan kullanıcının adını alır, bunu kullanarak bir selamlama oluşturur ve bunu greetingOutput metin bloğunda görüntüler.

Uygulamayı derleyin ve çalıştırın. Metin kutusuna adınızı yazın ve düğmeye tıklayın. Uygulama kişiselleştirilmiş bir karşılama görüntüler.

İleti görüntüleme içeren Uygulama ekranı

Adım 3. Başlangıç sayfasına stil ekleme

Bir tema seçin

Uygulamanızın görünümünü özelleştirmek kolaydır. Varsayılan olarak, uygulamanız açık renkli stile sahip kaynakları kullanır. Sistem kaynakları koyu bir tema da içerir.

Koyu temayı denemek için App.xaml öğesini düzenleyin ve Application::RequestedTheme için bir değer ekleyin.

<Application
    ...
    RequestedTheme="Dark">

</Application>

Çoğunlukla resim veya video görüntüleyen uygulamalar için koyu temayı öneririz; çok fazla metin içeren uygulamalar için ışık temasını öneririz. Özel renk düzeni kullanıyorsanız, uygulamanızın görünümüne en uygun temayı kullanın.

Uyarı

Uygulamanız başlatıldığında bir tema uygulanır. Uygulama çalışırken değiştirilemez.

Sistem stillerini kullanma

Bu bölümde metnin görünümünü değiştireceğiz (örneğin, yazı tipi boyutunu büyüteceğiz).

içinde "Adınız nedir?" ifadesini bulmak için Metin Bloğu'i bulun. Stili özelliğini, BaseTextBlockStyle sistem kaynak anahtarına referans olarak ayarlayın.

<TextBlock Text="What's your name?" Style="{ThemeResource BaseTextBlockStyle}"/>

BaseTextBlockStyle , içindeki ResourceDictionary\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\<version>\Generic\generic.xamliçinde tanımlanan bir kaynağın anahtarıdır. Bu stile göre ayarlanan özellik değerleri aşağıdadır.

<Style x:Key="BaseTextBlockStyle" TargetType="TextBlock">
    <Setter Property="FontFamily" Value="XamlAutoFontFamily" />
    <Setter Property="FontWeight" Value="SemiBold" />
    <Setter Property="FontSize" Value="14" />
    <Setter Property="TextTrimming" Value="None" />
    <Setter Property="TextWrapping" Value="Wrap" />
    <Setter Property="LineStackingStrategy" Value="MaxHeight" />
    <Setter Property="TextLineBounds" Value="Full" />
</Style>

Ayrıca MainPage.xamliçinde adlı greetingOutput bulun. StyleBaseTextBlockStyle olarak ayarlayın. Uygulamayı şimdi derleyip çalıştırırsanız, her iki metin bloğunun görünümünün değiştiğini (örneğin, yazı tipi boyutunun artık daha büyük olduğunu) görürsünüz.

Adım 4. Kullanıcı arabiriminin farklı pencere boyutlarına uyarlanmış olmasını sağlama

Şimdi kullanıcı arabiriminin değişen pencere boyutuna dinamik olarak uyum sağlamasına ve küçük ekranlı cihazlarda iyi görünmesine neden olacağız. Bunu yapmak için içine bir VisualStateManager bölümü MainPage.xamlekleyeceksiniz. Farklı pencere boyutları için farklı görsel durumları tanımlayacak ve ardından özellikleri bu görsel durumların her birine uygulanacak şekilde ayarlayacaksınız.

Kullanıcı arabirimi düzenini ayarlama

Bu XAML bloğunu kök StackPanel öğesinin ilk alt öğesi olarak ekleyin.

<StackPanel ...>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="wideState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="641" />
                </VisualState.StateTriggers>
            </VisualState>
            <VisualState x:Name="narrowState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="contentPanel.Margin" Value="20,30,0,0"/>
                    <Setter Target="inputPanel.Orientation" Value="Vertical"/>
                    <Setter Target="inputButton.Margin" Value="0,4,0,0"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    ...
</StackPanel>

Uygulamayı derleyin ve çalıştırın. Pencere 641 cihazdan bağımsız pikselden (DIP) daha dar bir şekilde yeniden boyutlandırılana kadar kullanıcı arabiriminin öncekiyle aynı göründüğüne dikkat edin. Bu noktada narrowState görsel durumu uygulanır ve bu durumla birlikte bu durum için tanımlanan tüm özellik ayarlayıcıları uygulanır.

adlı , 641 olarak ayarlanmış wideState özelliğiyle bir AdaptiveTrigger'e sahiptir. Bu, durumun yalnızca pencere genişliği en az 641 DIP'den küçük olmadığında uygulanacağı anlamına gelir. Bu durum için hiçbir Setter nesnesi tanımlamadığınız için sayfa içeriği için XAML'de tanımladığınız düzen özelliklerini kullanır.

İkinci VisualState, narrowState, MinWindowWidth özelliği 0 olarak ayarlanmış bir AdaptiveTrigger içerir. Bu durum, pencere genişliği 0'dan büyük ancak 641 DIPS'den küçük olduğunda uygulanır. Tam olarak 641 DIP'de wideState etkindir. içinde narrowState, kullanıcı arabirimindeki denetimlerin düzen özelliklerini değiştirmek için Setter nesneleri tanımlarsınız.

contentPanel öğesinin sol kenar boşluğunu 120'den 20'ye düşürebilirsiniz.
Yönlendirme'yi, inputPanel öğesinin Yatay halinden Dikeyhale değiştirirsiniz.
inputButton öğesine 4 DIP'lik bir üst kenar boşluğu eklersiniz.

Özet

Bu izlenecek yol, Windows Evrensel uygulamasına içerik ekleme, etkileşim ekleme ve kullanıcı arabiriminin görünümünü değiştirme adımlarını gösterdi.

Geri Bildirim

Bu sayfayı yararlı buldunuz mu?

Last updated on 2025-06-10