Aracılığıyla paylaş

Proje kurulumu

Uygulamayı kodlamaya başlamadan önce Visual Studio projesine hızlıca göz atacağız ve bazı proje kurulumlarını gerçekleştireceğiz. Visual Studio bir WinUI 3 projesi oluşturduğunda, birkaç önemli klasör ve kod dosyası oluşturulur. Bunlar Visual Studio'nun Çözüm Gezgini bölmesinde görülebilir:

Visual Studio'da bir WinUI 3 projesinin dosyalarını gösteren Çözüm Gezgini.

Burada listelenen öğeler öncelikli olarak etkileşim kurabileceğiniz öğelerdir. Bu dosyalar WinUI 3 uygulamasının yapılandırılıp çalıştırılmasına yardımcı olur. Her dosya aşağıda açıklanan farklı bir amaca hizmet eder:

  • Varlıklar klasörü

    Bu klasör uygulamanızın logosunu, resimlerini ve diğer medya varlıklarını içerir. Uygulamanızın logosu için yer tutucu dosyalarla doldurulur. Bu logo, uygulamanız burada yayımlandığında windows başlat menüsünde, Windows görev çubuğunda ve Microsoft Store'da uygulamanızı temsil eder.

  • App.xaml ve App.xaml.cs

    Dosya App.xaml renkler, stiller veya şablonlar gibi uygulama genelindeki XAML kaynaklarını içerir. Dosya App.xaml.cs genellikle uygulama penceresinin örneğini oluşturan ve etkinleştiren kodu içerir. Bu projede sınıfına işaret eder MainWindow .

  • MainWindow.xaml ve MainWindow.xaml.cs

    Bu dosyalar uygulamanızın penceresini gösterir.

  • Package.appxmanifest

    Bu paket bildirim dosyası , uygulamanızın Microsoft Store'da nasıl görüneceğini belirleyen yayımcı bilgilerini, logoları, işlemci mimarilerini ve diğer ayrıntıları yapılandırmanıza olanak tanır.

XAML dosyaları ve kısmi sınıflar

Genişletilebilir Uygulama biçimlendirme dili (XAML), nesneleri başlatabilen ve nesnelerin özelliklerini ayarlayabilen bildirim temelli bir dildir. Bildirim temelli XAML işaretlemesinde görünür ui öğeleri oluşturabilirsiniz. Ardından, olaylara yanıt verebilen ve ilk olarak XAML'de bildirdiğiniz nesneleri işleyebilen her XAML dosyası (genellikle arka planda kod dosyası olarak adlandırılır) için ayrı bir kod dosyası ilişkilendirebilirsiniz.

Genellikle herhangi bir XAML dosyası olan iki dosya vardır: .xaml dosyanın kendisi ve Çözüm Gezgini'nde dosyanın alt öğesi olan karşılık gelen bir arka planda kod dosyası.

  • Dosya, .xaml uygulama kullanıcı arabiriminizi tanımlayan XAML işaretlemesini içerir. Sınıf adı özniteliğiyle bildirilir x:Class .
  • Kod dosyası, XAML işaretlemesi ile etkileşim kurmak için oluşturduğunuz kodu ve yöntemine yapılan bir çağrıyı InitializeComponent içerir. sınıfı olarak partial classtanımlanır.

Projenizi oluşturduğunuzda, InitializeComponent dosyasını ayrıştırmak .xaml ve tam sınıfı oluşturmak için kodla birleştirilmiş kod partial class oluşturmak için yöntemi çağrılır.

Belgelerde daha fazla bilgi edinin:

MainWindow'a Güncelleştirme

Projeye MainWindow dahil edilen sınıf, uygulamanın kabuğunu tanımlamak için kullanılan XAML Window sınıfının bir alt sınıfıdır. Uygulamanın penceresinde iki bölüm vardır:

  • Pencerenin istemci bölümü, içeriğinizin gittiği yerdir.
  • İstemci olmayan bölüm, Windows İşletim Sistemi tarafından denetlenen bölümdür. Resim yazısı denetimlerinin (Min/Max/Close düğmeleri), uygulama simgesinin, başlığın ve sürükleme alanının bulunduğu başlık çubuğunu içerir. Ayrıca pencerenin dışındaki çerçeveyi de içerir.

WinUI Notları uygulamasını Fluent Design yönergeleriyle tutarlı hale getirmek için MainWindowüzerinde birkaç değişiklik yapacaksınız. İlk olarak, pencere arka planı olarak Mica malzemesini uygulayacaksınız. Mica, pencerenin arka planını boyamak için tema ve masaüstü duvar kağıdını içeren opak, dinamik bir malzemedir. Ardından, uygulamanızın içeriğini başlık çubuğu alanına genişletir ve sistem başlık çubuğunu bir XAML Başlık Çubuğu denetimiyle değiştirirsiniz. Bu, alan kullanımını daha iyi hale getirir ve başlık çubuğunun gerektirdiği tüm işlevleri sağlarken tasarım üzerinde daha fazla denetim sağlar.

Ayrıca, pencerenin içeriği olarak bir Çerçeve de ekleyeceksiniz. sınıfı, Frame uygulamanızdaki içerik sayfaları arasında gezinmenizi sağlamak için Page sınıfıyla birlikte çalışır. Sonraki bir adımda sayfaları ekleyeceksiniz.

Tavsiye

Bu öğreticinin kodunu GitHub deposundan indirebilir veya görüntüleyebilirsiniz. Kodu bu adımda olduğu gibi görmek için şu işlemeye bakın: not sayfası - başlangıç.

  1. MainWindow.xaml çift tıklayarak açın.

  2. Açma ve kapatma<Window.. > etiketleri arasında, mevcut XAML'leri şununla değiştirin:

    <Window.SystemBackdrop>
    <MicaBackdrop Kind="Base"/>
</Window.SystemBackdrop>

<Grid>
    <Grid.RowDefinitions>
        <!-- Title Bar -->
        <RowDefinition Height="Auto" />
        <!-- App Content -->
        <RowDefinition Height="*" />     
    </Grid.RowDefinitions>
    <TitleBar x:Name="AppTitleBar"
              Title="WinUI Notes">
        <TitleBar.IconSource>
            <FontIconSource Glyph="&#xF4AA;"/>
        </TitleBar.IconSource>
    </TitleBar>

    <!-- App content -->
    <Frame x:Name="rootFrame" Grid.Row="1"/>
</Grid>

  3. CTRL + S tuşlarına basarak, araç çubuğundaki Kaydet simgesine tıklayarak veya Dosya>Kaydet MainPage.xaml menüsünü seçerek dosyayı kaydedin.

Tüm bu XAML işaretlemelerinin şu anda ne yaptığını anlamıyorsanız endişelenmeyin. Uygulama kullanıcı arabiriminin geri kalanını oluştururken XAML kavramlarını daha ayrıntılı olarak açıklayacağız.

Uyarı

Bu işaretlemede, XAML'de özellikleri ayarlamanın iki farklı yolunu görürsünüz. İlk ve en kısa yol XAML özniteliği söz dizimini kullanmaktır, örneğin: <object attribute="value">. Bu, gibi <MicaBackdrop Kind="Base"/>basit değerler için harika çalışır. Ancak yalnızca XAML ayrıştırıcısının dizeyi beklenen değer türüne dönüştürmeyi bildiği değerler için çalışır.

Özellik değeri daha karmaşıksa veya XAML ayrıştırıcısı bunu nasıl dönüştüreceklerini bilmiyorsa, nesneyi oluşturmak için özellik öğesi söz dizimini kullanmanız gerekir. Böyle:

<object ... >
    <object.property>
        value
    </object.property>
</object>

Örneğin, özelliğini ayarlamak Window.SystemBackdrop için özellik öğesi söz dizimini kullanmanız ve açıkça öğesini oluşturmanız MicaBackdrop gerekir. Ancak, özelliğini ayarlamak için basit öznitelik söz dizimini MicaBackdrop.Kind kullanabilirsiniz.

<Window ... >
   <Window.SystemBackdrop>
       <MicaBackdrop Kind="Base"/>
   </Window.SystemBackdrop>
    ...
</Window>

MainWindow.xamliçinde , <Window.SystemBackdrop>, <Grid.RowDefinitions>ve <TitleBar.IconSource> içinde özellik öğesi söz dizimi ile ayarlanması gereken karmaşık değerler içerir.

Belgelerde daha fazla bilgi edinin:

Uygulamayı şimdi çalıştırırsanız, eklediğiniz XAML TitleBar öğesini görürsünüz, ancak bu öğe hala gösterilen sistem başlık çubuğunun altındadır.

Hem sistem başlık çubuğunun hem de özel başlık çubuğunun gösterildiği boş WinUI Notları uygulama penceresi.

Sistem başlık çubuğunu değiştirmeyi tamamlamak için biraz kod yazmanız gerekir.

  1. MainWindow.xaml.cs'ı açın. (veya herhangi bir XAML dosyası) için MainWindow.xaml arka planda kodu üç şekilde açabilirsiniz:

    • MainWindow.xaml Dosya açıksa ve etkin belge düzenleniyorsa F7 tuşuna basın.
    • MainWindow.xaml Dosya açıksa ve düzenlenmekte olan etkin belgeyse, metin düzenleyicisine sağ tıklayın ve Kodu Görüntüle'yi seçin.
    • Girdiyi genişleterek dosyayı ortaya çıkarmak için MainWindow.xamlMainWindow.xaml.cs kullanın. Dosyayı açmak için çift tıklayın.

  2. oluşturucusunda MainWindowçağrısından InitializeComponentsonra bu kodu ekleyin:

    public MainWindow()
{
    this.InitializeComponent();

    // ↓ Add this. ↓
    // Hide the default system title bar.
    ExtendsContentIntoTitleBar = true;
    // Replace system title bar with the WinUI TitleBar.
    SetTitleBar(AppTitleBar);
    // ↑ Add this. ↑
}

    ExtendsContentIntoTitleBar özelliği, varsayılan sistem başlık çubuğunu gizler ve uygulama XAML'nizi bu alana genişletir. SetTitleBar çağrısı daha sonra sisteme belirttiğiniz (AppTitleBar) XAML öğesini uygulamanın başlık çubuğu olarak ele alıyacağını söyler.

  3. F5 tuşuna basarak, araç çubuğundaki Hata Ayıkla "Başlat" düğmesine tıklayarak veyaHata Ayıklamayı> menüsünü seçerek projeyi derleyin ve çalıştırın.

Uygulamayı şimdi çalıştırdığınızda, mika arka planına sahip boş bir pencere ve sistem başlık çubuğunun yerini alan XAML başlık çubuğunu görürsünüz.

Başlık çubuğunda simgesi ve uygulama adı bulunan boş WinUI Notları uygulama penceresi.

2. adıma devam et - Not sayfası ekleme

  • Last updated on