.NET MAUI ile Hesap Makinesi (1/5) – Uygulama Çerçevesi
Selamun Aleyküm,
Kodlama alıştırmaları için hesap makinesi tasarlamak oldukça yararlı ve öğretici bir çalışmadır, çünkü hesap makinesi algoritmaları basit olsa da koşullu ifadelerin çokça ve dikkatlice kullanımını gerektirdiğinden algoritma geliştirme yeteneklerinize büyük katkıda bulunur.
Bu yazı dizisinde sizlere, NCalc kütüphanesi yardımıyla, string ifadeleri kullanarak matematik işlemleri yapabilen, çok platformlu (Windows, iOS ve Android üzerinde çalışabilen) bir hesap makinesinin nasıl yapılabileceğini adım adım göstermeye çalışacağım.
Uygulamanın kaynak kodlarını şuradan indirip uygulamayı derleyerek incelemenizi öneririm.
Yukarıda gördüğünüz gibi bir açılış ekranı ve bir hesaplama ekranından oluşan uygulamayı tasarlayacağız. Resimleri üzerine tıklayarak büyütebilirsiniz.
Yazının amacı her ne kadar basit hesap makinesi tasarlamak olsa da, projeyi .NET MAUI ile oluşturacağımızdan, yazımız .NET MAUI için de bir rehber olma özelliği taşıyacak.
Öyleyse başlayalım. Öncelikle Visual Studio ile yeni bir proje oluşturuyoruz.
Proje taslağını seçiyoruz: Projemiz bir “.NET MAUI App” projesi olacak.
Projemize “BasicCalculator” ismini vererek ilerliyoruz.
En son .NET sürümü olan 9.0’ı seçerek ilerliyoruz. (Siz bu yazıyı okurken daha yeni bir sürüm çıkmışsa onu seçiniz.)
Projeyi oluşturduktan sonra, Solution Explorer’a baktığınızda yandaki gibi bir klasör ve dosya yapısıyla karşılaşacaksınız.
Projemiz tek sayfalık bir yapıya sahip olacağı için uygulama içinde bir gezinme özelliğine ihtiyacımız yok. Bu nedenle Shell’e ihtiyacımız olmayacak. AppShell.xaml ve AppShell.xaml.cs dosyalarını kaldırıyoruz. (AppShell.xaml’i kaldırdığınızda ilgili .cs dosyası da kaldırılacaktır.)
Daha sonra App.xaml dosyasını (yanındaki üçgene tıklamak suretiyle) genişleterek altında bulunan App.xaml.cs dosyasındaki
return new Window(new AppShell());
satırını
return new Window(new MainPage());
olarak değiştiriyoruz. Böylelikle uygulamamız kabuğu (Shell‘i) es geçerek doğrudan sayfamızı (MainPage’i) çağıracak.
.NET MAUI‘de .xaml dosyaları ön yüzü temsil ederken .cs dosyaları da arkada çalışan kodlarımızı bulundurur. Her .xaml dosyasıyla beraber, onunla ilişkili bir .cs dosyası bulunur. MainPage.xaml dosyasının yanındaki üçgene tıkladığınızda MainPage.xaml.cs dosyasını görebilirsiniz.
Biz MainPage‘in içeriğini tamamen silip yeniden oluşturacağımız için MainPage.xaml.cs dosyasında bulunan, aşağıda belirttiğim kodları kaldıralım.
namespace BasicCalculator;
public partial class MainPage : ContentPage
{
int count = 0;
public MainPage()
{
InitializeComponent();
}
private void OnCounterClicked(object sender, EventArgs e)
{
count++;
if (count == 1)
CounterBtn.Text = $"Clicked {count} time";
else
CounterBtn.Text = $"Clicked {count} times";
SemanticScreenReader.Announce(CounterBtn.Text);
}
}
MainPage.xaml.cs dosyasının son hali şöyle olmalı:
namespace BasicCalculator;
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
}
}
MainPage.xaml içinde, aşağıda bıraktığım kodlar dışında tüm içeriği silelim.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="BasicCalculcator.MainPage">
</ContentPage>
Bu iki dosya (.xaml ve .cs dosyaları) MainPage‘in constructor‘ında bulunan InitializeComponent() metodu sayesinde, uygulama derlendiğinde tek bir dosyaya dönüşür. .xaml dosyasında oluşturduğumuz her eleman, aslında çeşitli UI kontrol sınıflarından birer instance almak anlamına gelir.
Mesela, aşağıda vurguladığım iki kod bloğu da aynı işi yapar:
MainPage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="BasicCalculcator.MainPage">
</ContentPage>
<StackLayout>
<Label Text="Label 1"
HorizontalOptions="Center"
VerticalOptions="Center" />
<Label Text="Label 2"
HorizontalOptions="Center"
VerticalOptions="Center" />
</StackLayout>
</ContentPage>
MainPage.xaml.cs
namespace BasicCalculator;
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
var stackLayout = new StackLayout();
var label1 = new Label
{
Text = "Label 1",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
};
var label2 = new Label
{
Text = "Label 2",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
};
stackLayout.Children.Add(label1);
stackLayout.Children.Add(label2);
Content = stackLayout;
}
}
Tanımlamaları ister .xaml dosyasında ister .cs dosyasında yapın fark etmez. Ama .xaml kullanmak kolaylık açısından tavsiye edilmektedir. Şimdi kodumuza geri dönelim.
MainPage.xaml dosyasında bir Grid oluşturalım. Oluşturduğumuz Grid yapısı 6 satırdan ve 4 sütundan oluşacak. Hesap makinemizin tüm tuşlarını, giriş ve gösterge ekranlarını bu Grid’in içinde inşa edeceğiz.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="BasicCalculcator.MainPage">
<Grid RowDefinitions="*, 78, 78, 78, 78, 78"
ColumnDefinitions="*, *, *, *">
</Grid>
</ContentPage>
RowDefinitions ile belirttiğimiz satır tanımlamalarında sabit 78 piksel yükseklikte beş tane tanımlama var. En baştaki * ise değişken uzunluk özelliğini temsil ediyor. Uygulama ne kadar uzunsa 0. satır da (yani ilk satır) o kadar alan kaplayacak.
ColumnDefinitions ile belirttiğimiz sütunların ise dördü de değişken olacak. Yani uygulama enine ne kadar geniş olursa, bu dört sütun da eşit genişlikte o kadar alanı işgal edecek.
Şimdi bu Grid’in içine, ilk elemanı olan StackLayout’ı yerleştirelim.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="BasicCalculcator.MainPage">
<Grid RowDefinitions="*, 78, 78, 78, 78, 78"
ColumnDefinitions="*, *, *, *">
<StackLayout Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="4">
</StackLayout>
</Grid>
</ContentPage>
Görüleceği üzere, StackLayout 0. satırı ve 0. sütunu temsil edecek. Aynı zamanda ColumnSpan özelliği sayesinde bulunduğu satırdaki 4 sütunu da kaplayacak.
StackLayout’u, içine yerleştireceğimiz iki Label’ı üst üste yığmak için kullanacağız. Gelin şimdi bu Label’ları yerleştirelim.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="BasicCalculcator.MainPage">
<Grid RowDefinitions="*, 78, 78, 78, 78, 78"
ColumnDefinitions="*, *, *, *">
<StackLayout Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="4">
<Label HorizontalOptions="End"
VerticalOptions="StartAndExpand" />
<Label HorizontalOptions="End"
VerticalOptions="End" />
</StackLayout>
</Grid>
</ContentPage>
Temsili Grid yapısı
Şu an itibariyle sayfamızın iskeleti yandaki resimdeki gibidir. (Bu resim yalnızca temsili bir Grid yapısıdır. Uygulama görüntüsü değildir.)
Üstteki Label bize, hesaplama talimatı verdiğimizde, işlemin tamamını, string bir ifade olarak gösterecek.
Örneğin: 1000 / 25 = 40 gibi
Alttaki Label ise o anda girmekte olduğumuz değeri ve hesaplama talimatı verdiğimizde hesaplanan değeri gösterecek.
Görüleceği üzere Grid’e 4 x 5 = 20 adet buton yerleştirebiliriz. Şu anda dört sütunda kullanabileceğimiz, her biri 78 piksel yüksekliğe sahip beş satırımız var.
Bir sonraki yazımızda uygulamamıza hedeflediğimiz görünümü kazandıracağız.
