Aracılığıyla paylaş

Not için sayfa oluşturma

Şimdi kullanıcının notu düzenlemesine izin veren bir sayfa oluşturacak ve ardından notu kaydetmek veya silmek için kodu yazacaksınız.

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ıç.

İlk olarak, yeni sayfayı projeye ekleyin:

  1. Visual Studio'nun Çözüm Gezgini bölmesinde WinUINotes>Ekle>... öğesine sağ tıklayın.

  2. Yeni Öğe Ekle iletişim kutusunda, pencerenin sol tarafındaki şablon listesinde WinUI'yi seçin. Ardından Boş Sayfa (WinUI) şablonunu seçin. Dosyayı NotePage.xamlolarak adlandırın ve Ekle'yi seçin.

  3. Dosya NotePage.xaml , sayfanın kullanıcı arabirimini temsil eden tüm XAML işaretlemesini görüntüleyen yeni bir sekmede açılır. <Grid> ... </Grid> XAML'deki öğesini aşağıdaki işaretlemeyle değiştirin:

    <Grid Padding="16" RowSpacing="8">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="400"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <TextBox x:Name="NoteEditor"
         AcceptsReturn="True"
         TextWrapping="Wrap"
         PlaceholderText="Enter your note"
         Header="New note"
         ScrollViewer.VerticalScrollBarVisibility="Auto"
         Width="400"
         Grid.Column="1"/>

    <StackPanel Orientation="Horizontal"
            HorizontalAlignment="Right"
            Spacing="4"
            Grid.Row="1" Grid.Column="1">
        <Button Content="Save" Style="{StaticResource AccentButtonStyle}"/>
        <Button Content="Delete"/>
    </StackPanel>
</Grid>

  4. CTRL + S tuşlarına basarak, araç çubuğunda kaydet simgesine tıklayarak veya Dosya> Kaydet menüsünü seçerek dosyayıkaydedinNotePage.xaml.

    Uygulamayı şu anda çalıştırırsanız, yeni oluşturduğunuz not sayfasını görmezsiniz. Bunun nedeni, onu yine de MainWindow içindeki Frame denetiminin içeriği olarak ayarlamanız gerektiğidir.

  5. Açın MainWindow.xaml ve NotePage öğesini SourcePageType olarak Frame içinde ayarlayın, örneğin:

    <Frame x:Name="rootFrame" Grid.Row="1"
       SourcePageType="local:NotePage"/>

    Şimdi uygulamayı çalıştırdığınızda, Frame bir NotePage örneği yükleyecek ve kullanıcıya gösterecektir.

Önemli

XAML ad alanı (xmlns) eşlemeleri , C# using deyimine karşılık gelen XAML'lerdir. local: uygulama projenizin xmlns:local="using:WinUINotes" içindeki XAML sayfalarında sizin için eşlenmiş bir ön ektir. Tüm XAML dosyalarının, x:Class özniteliği ve kodunu içeren ve App.xaml gibi oluşturulan ad alanına başvurması için eşleme yapılır. Bu ad alanında XAML'de kullanmak istediğiniz özel sınıfları tanımladığınız sürece, XAML'deki özel türlerinize başvurmak için ön eki kullanabilirsiniz local: .

Şimdi sayfaya yerleştirilen XAML denetimlerinin temel bölümlerini ayıralım:

Visual Studio tarafından vurgulanan kılavuzun yer aldığı yeni not sayfası kullanıcı arabirimi.

  • Grid.RowDefinitions ve Grid.ColumnDefinitions, 2 satır ve 3 sütun içeren bir kılavuz tanımlar (başlık çubuğunun altına yerleştirilir).

    • Alt satır, içeriğine (iki düğme) uyacak şekilde otomatik olarak boyutlandırılır (Auto). Üst satırda kalan tüm dikey boşluk (* ) kullanılır.
    • Ortadaki sütun epx genişliğindedir 400ve not düzenleyicisinin gittiği yerdir. İki taraftaki sütunlar boş ve kalan tüm yatay boşluğu aralarında böler (*).

    Uyarı

    Ölçeklendirme sisteminin çalışma şekli nedeniyle, XAML uygulamanızı tasarlarken, gerçek fiziksel pikselleri değil, etkili pikselleri tasarlarsınız. Etkin pikseller (epx), sanal bir ölçü birimidir ve ekran yoğunluğundan bağımsız olarak düzen boyutlarını ve aralığını ifade etmek için kullanılır.

  • <TextBox x:Name="NoteEditor" ... > ... </TextBox>, çok satırlı metin girişi için yapılandırılmış bir metin girişi denetimidir (TextBox) ve (Grid öğesinin üst orta hücresine Grid.Column="1" yerleştirilir). Satır ve sütun dizinleri 0 tabanlıdır ve varsayılan olarak denetimler üst Gridöğesinin 0. satırına ve 0. sütununa yerleştirilir. Bu nedenle bu, Satır 0, Sütun 1'i belirtmenin eşdeğeridir.

  • <StackPanel Orientation="Horizontal" ... > ... </StackPanel> , alt öğelerini dikey (varsayılan) veya yatay olarak yığan bir düzen denetimi (StackPanel) tanımlar. Grid (Grid.Row="1" Grid.Column="1") öğesinin alt orta hücresine yerleştirilir.

    Uyarı

    Grid.Row="1" Grid.Column="1" XAML ekli özelliklerine bir örnektir. Eklenen özellikler, bir XAML nesnesinin farklı bir XAML nesnesine ait bir özellik ayarlamasına izin verir. Genellikle, bu durumda olduğu gibi alt öğeler, kullanıcı arabiriminde nasıl sunulacakları konusunda üst öğelerini bilgilendirmek için ekli özellikleri kullanabilir.

  • İki <Button> denetim <StackPanel>'in içindedir ve yatay olarak konumlandırılmıştır. Sonraki bölümde düğmelerin tıklama olaylarını işlemek için kodu ekleyeceksiniz.

Belgelerde daha fazla bilgi edinin:

Not yükleme ve kaydetme

Kod-arkası NotePage.xaml.cs dosyasını açın. Yeni bir XAML dosyası eklediğinizde, kod-arkasında oluşturucuda tek bir satır bulunur, bu da InitializeComponent yöntemine bir çağrıdır.

namespace WinUINotes
{
    public sealed partial class NotePage : Page
    {
        public NotePage()
        {
            this.InitializeComponent();
        }
    }
}

InitializeComponent yöntemi XAML işaretlemesini okur ve işaretleme tarafından tanımlanan tüm nesneleri başlatır. Nesneler üst-alt ilişkilerine bağlanır ve kodda tanımlanan olay işleyicileri XAML'de ayarlanan olaylara eklenir.

Şimdi, notları yükleme ve kaydetme işlemlerini ele almak için NotePage.xaml.cs code-behind dosyasına kod ekleyeceksiniz.

  1. NotePage sınıfına aşağıdaki değişken tanımlamalarını ekleyin.

    public sealed partial class NotePage : Page
{
    private StorageFolder storageFolder = ApplicationData.Current.LocalFolder;
    private StorageFile? noteFile = null;
    private string fileName = "note.txt";

    Not kaydedildiğinde, metin dosyası olarak uygulamanın yerel depolama alanına kaydedilir.

    Uygulamanın yerel veri klasörüne erişmek için StorageFolder sınıfını kullanırsınız. Bu klasör uygulamanıza özgü olduğundan, buraya kaydedilen notlara diğer uygulamalar tarafından erişilemiyor. Bu klasöre kaydedilen metin dosyasına erişmek için StorageFile sınıfını kullanırsınız. Dosyanın adı değişkeniyle fileName temsil edilir. Şimdilik fileName için "note.txt" olarak ayarlayın.

  2. Not sayfasının Loaded olayı için bir olay işleyicisi oluşturun.

    public NotePage()
{
    this.InitializeComponent();
    // ↓ Add this. ↓
    Loaded += NotePage_Loaded;
}

// ↓ Add this event handler method. ↓
private async void NotePage_Loaded(object sender, RoutedEventArgs e)
{
    noteFile = (StorageFile)await storageFolder.TryGetItemAsync(fileName);
    if (noteFile is not null)
    {
        NoteEditor.Text = await FileIO.ReadTextAsync(noteFile);
    }
}

    Bu yöntemde, klasörden metin dosyasını almak için TryGetItemAsync'i çağırırsınız. Dosya mevcut değilse, null döner. Dosya varsa, denetimin Text özelliğine NoteEditor dosyadan metni okumak için ReadTextAsync'i çağırın. (Unutmayın, NoteEditor XAML dosyasında oluşturduğunuz denetimdir. Kod dosyanızdaki arka plan kodunu kullanarak TextBox burada, ona atadığınız x:Name ile başvurursunuz.)

    Önemli

    Dosya erişim çağrıları zaman uyumsuz olduğundan bu yöntemi anahtar sözcüğüyle async işaretlemeniz gerekir. Kısacası, ...Async ile biten bir yöntemi çağırdığınızda (örneğin TryGetItemAsync), çağrıya await işlecini ekleyebilirsiniz. Bu, beklenen çağrı tamamlanana kadar sonraki kodun yürütülmesini engeller ve kullanıcı arabiriminizin yanıt vermesini sağlar. "await kullandığınızda, çağırdığınız yöntemin async anahtar sözcüğüyle işaretlenmiş olması gerekir." Daha fazla bilgi için bkz. C# dilinde zaman uyumsuz API'leri çağırma.

Belgelerde daha fazla bilgi edinin:

Olay işleyicileri ekleme

Ardından Kaydet ve Sil düğmeleri için Click olay işleyicilerini ekleyin. Olay işleyicileri eklemek, uygulamalarınızı oluştururken sık sık yapacağınız bir şeydir, bu nedenle Visual Studio bunu kolaylaştırmak için çeşitli özellikler sağlar.

  1. Dosyada NotePage.xaml, Content özniteliğinden sonra, imlecinizi KaydetButton denetimine getirin. Click= yazın. Bu noktada Visual Studio aşağıdakine benzer bir otomatik tamamlama kullanıcı arabirimi açmalıdır:

    XAML düzenleyicisinde Visual Studio yeni olay işleyicisi otomatik tamamlama kullanıcı arabiriminin ekran görüntüsü

    • Aşağı ok tuşuna basarak Yeni Olay İşleyicisi'ni< seçin> ve ardından Sekme tuşuna basın. Visual Studio özniteliğini ile Click="Button_Click" tamamlar ve arka planda kod dosyasında adlı Button_ClickNotePage.xaml.cs bir olay işleyicisi yöntemi ekler.

    Şimdi yöntemini daha anlamlı bir adla Button_Click yeniden adlandırmanız gerekir. Bunu aşağıdaki adımlarda yapacaksınız.

  2. NotePage.xaml.cs içinde sizin için eklenen metodu bulun.

    private void Button_Click(object sender, RoutedEventArgs e)
{

}

    Tavsiye

    Uygulamanızda kodu bulmak için Visual Studio başlık çubuğunda Ara'ya tıklayın ve Kod Arama seçeneğini kullanın. Kodu kod düzenleyicisinde açmak için arama sonucuna çift tıklayın.

    Visual Studio'da arama özelliği

  3. İmlecinizi "B" Button öğesinin önüne getirin ve yazın Save. Biraz bekleyin, yöntem adı yeşil renkle vurgulanır.

  4. Yöntem adının üzerine geldiğinizde Visual Studio, tornavida veya ampul simgesi içeren bir araç ipucu gösterir. Simgenin yanındaki aşağı ok düğmesine tıklayın, ardından 'Button_Click' öğesini 'SaveButton_Click' olarak yeniden adlandır'a tıklayın.

    Visual Studio yöntemi açılır kullanıcı arabirimini yeniden adlandırır.

    Visual Studio, yöntemini uygulamasına ilk eklediğiniz XAML dosyası da dahil olmak üzere uygulamanızın Buttonher yerinde yeniden adlandırır.

  5. Sil düğmesi için bu adımları yineleyin ve yöntemini olarak DeleteButton_Clickyeniden adlandırın.

Artık olay işleyicileri bağlı olduğuna göre, not dosyasını kaydetmek ve silmek için kodu ekleyebilirsiniz.

  1. Dosyayı kaydetmek için yöntemine bu kodu SaveButton_Click ekleyin. Yöntem imzasını async anahtar sözcüğü ile güncelleştirmeniz gerektiğini unutmayın.

    private async void SaveButton_Click(object sender, RoutedEventArgs e)
{
    if (noteFile is null)
    {
        noteFile = await storageFolder.CreateFileAsync(fileName, CreationCollisionOption.ReplaceExisting);
    }
    await FileIO.WriteTextAsync(noteFile, NoteEditor.Text);
}

    Önce noteFile oluşturulup oluşturulmadığını SaveButton_Click yönteminde denetlersiniz. nullise, yerel depolama klasöründe değişkenin temsil ettiği fileName ada sahip yeni bir dosya oluşturmanız ve dosyayı değişkene noteFile atamanız gerekir. Ardından, TextBox denetimindeki metni noteFile ile temsil edilen dosyaya yazarsınız.

  2. Dosyayı silmek için yöntemine bu kodu DeleteButton_Click ekleyin. Yöntem imzasını async anahtar sözcüğüyle burada da güncellemeniz gerekir.

    private async void DeleteButton_Click(object sender, RoutedEventArgs e)
{
    if (noteFile is not null)
    {
        await noteFile.DeleteAsync();
        noteFile = null;
        NoteEditor.Text = string.Empty;
    }
}

    DeleteButton_Click yönteminde, önce noteFile var olup olmadığını kontrol edersiniz. Eğer öyleyse, noteFile tarafından temsil edilen dosyayı yerel depolama klasöründen silin ve noteFile'i null olarak ayarlayın. Ardından denetimdeki TextBox metni boş bir dizeye sıfırlayın.

    Önemli

    Dosya sisteminden metin dosyası silindikten sonra, noteFile'ü null olarak ayarlamak önemlidir. noteFile Bunun uygulamanızdaki sistem dosyasına erişim sağlayan bir StorageFile olduğunu unutmayın. Sistem dosyası silindikten sonra, noteFile yine de sistem dosyasının nerede olduğunu gösterir, ancak artık var olmadığını bilmez. Sistem dosyasını şimdi okumaya, yazmaya veya silmeye çalışırsanız bir hata alırsınız.

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

Arkaplan kod dosyasının son kodu aşağıdaki gibi görünmelidir:

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using System;
using Windows.Storage;

namespace WinUINotes
{
    public sealed partial class NotePage : Page
    {
        private StorageFolder storageFolder = ApplicationData.Current.LocalFolder;
        private StorageFile? noteFile = null;
        private string fileName = "note.txt";

        public NotePage()
        {
            this.InitializeComponent();
            Loaded += NotePage_Loaded;
        }

        private async void NotePage_Loaded(object sender, RoutedEventArgs e)
        {
            noteFile = (StorageFile)await storageFolder.TryGetItemAsync(fileName);
            if (noteFile is not null)
            {
                NoteEditor.Text = await FileIO.ReadTextAsync(noteFile);
            }
        }

        private async void SaveButton_Click(object sender, RoutedEventArgs e)
        {
            if (noteFile is null)
            {
                noteFile = await storageFolder.CreateFileAsync(fileName, CreationCollisionOption.ReplaceExisting);
            }
            await FileIO.WriteTextAsync(noteFile, NoteEditor.Text);
        }

        private async void DeleteButton_Click(object sender, RoutedEventArgs e)
        {
            if (noteFile is not null)
            {
                await noteFile.DeleteAsync();
                noteFile = null;
                NoteEditor.Text = string.Empty;
            }
        }
    }
}

Notu test edin

Bu kod yerine getirdiğinizde, notunun doğru kaydedildiğinden ve yüklendiğinden emin olmak için uygulamayı test edebilirsiniz.

  1. 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.
  2. Metin giriş kutusuna yazın ve Kaydet düğmesine basın.
  3. Uygulamayı kapatın ve yeniden başlatın. Girdiğiniz not, cihazın depolama alanından yüklenmelidir.
  4. Sil düğmesine basın.
  5. Uygulamayı kapatın, yeniden başlatın. Size yeni bir boş not verilmelidir.

Önemli

Not kaydetme ve silme işleminin düzgün çalıştığını onayladıktan sonra yeniden yeni bir not oluşturun ve kaydedin. Sonraki adımlarda uygulamayı test etmek için kaydedilmiş bir nota sahip olmak istersiniz.

3. adıma devam et - Not için görünüm ve model ekleme

  • Last updated on