Mus'ab Karanfil

Mustafa Oğlu'nun notları...

.NET MAUI ile Hesap Makinesi (2/5) – Ön Yüz Tasarımı

Yazar: · Tarih: · Güncelleme:

Önceki yazımızda uygulamanın UI çerçevesini oluşturmuştuk. Artık rakamlarımızı ve matematik işlemlerini gösteren butonları ızgaraya yerleştirebiliriz. StackLayout‘un hemen altına 20 adet butonumuzu yerleştiriyoruz:

<?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>

	<!--BUTTONS-->

        <Button Grid.Row="1"
                Grid.Column="0"
                Text="AC" />

        <Button Grid.Row="1"
                Grid.Column="1"
                Text="±" />

        <Button Grid.Row="1"
                Grid.Column="2"
                Text="%" />

	<!--OPERATOR BUTTONS-->

        <Button Grid.Row="1"
                Grid.Column="3"
                Text="÷" />

        <Button Grid.Row="2"
                Grid.Column="3"
                Text="x" />

        <Button Grid.Row="3"
                Grid.Column="3"
                Text="-" />

        <Button Grid.Row="4"
                Grid.Column="3"
                Text="+" />

        <Button Grid.Row="5"
                Grid.Column="3"
                Text="=" />

	<!--NUMBER BUTTONS-->

        <Button Grid.Row="2"
                Grid.Column="0"
                Text="7" />

        <Button Grid.Row="2"
                Grid.Column="1"
                Text="8" />

        <Button Grid.Row="2"
                Grid.Column="2"
                Text="9" />

        <Button Grid.Row="3"
                Grid.Column="0"
                Text="4" />

        <Button Grid.Row="3"
                Grid.Column="1"
                Text="5" />

        <Button Grid.Row="3"
                Grid.Column="2"
                Text="6" />

        <Button Grid.Row="4"
                Grid.Column="0"
                Text="1" />

        <Button Grid.Row="4"
                Grid.Column="1"
                Text="2" />

        <Button Grid.Row="4"
                Grid.Column="2"
                Text="3" />

        <Button Grid.Row="5"
                Grid.Column="0"
                Text="," />

        <Button Grid.Row="5"
                Grid.Column="1"
                Text="0" />

        <Button Grid.Row="5"
                Grid.Column="2"
                Text="Del" />

    </Grid>

</ContentPage>

Şu anda, kullanacağımız tüm elemanlar sayfaya yerleşmiş durumda, ancak görünümleri hoş değil. Bunu bir nebze düzeltmek için App.xaml dosyasını açalım ve aşağıdaki kod bloğunu (Ctrl+K ardından Ctrl+C ile) yorum satırına çevirelim. Bu dosyaları daha sonra kullanacağız.

<?xml version = "1.0" encoding = "UTF-8" ?>
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:BasicCalculator"
             x:Class="BasicCalculator.App">
    <Application.Resources>
        <!--<ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
                <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>-->
    </Application.Resources>
</Application>

Uygulamayı Debug modda çalıştırırsanız, değişiklikleri kaydettiğinizde, uygulamanın son halini, derlemeye gerek kalmadan Hot Reload ile izleyebilirsiniz.

Uygulamayı görünüm olarak iyileştirmek için bazı stil tanımlamaları yapmalıyız. Bu tanımlamalar ContentPage, Grid, Label ve Button elemanlarının görünümlerini tek bir yerden ayarlamamıza yardımcı olacak.

MERKEZİ STİL TANIMLAMALARI

Aşağıdaki kodda vurgulanmış bloğu App.xaml içine yerleştirelim. (Gerek xaml tanımlamalarının gerekse C# kodlarının hiçbirini kopyalayıp yapıştırmanızı tavsiye etmiyorum. Elle yazmanız öğrenmenizi hızlandıracaktır, ancak aşağıdaki Style tanımları şimdilik konumuzun dışında olduğundan bu kısmı kopyalayıp yapıştırabilirsiniz.)

<?xml version = "1.0" encoding = "UTF-8" ?>
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:BasicCalculator"
             x:Class="BasicCalculator.App">
    <Application.Resources>
        <!--<ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
                <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>-->

        <!--Styles-->

        <Style TargetType="ContentPage" ApplyToDerivedTypes="True">
            <Setter Property="BackgroundColor" Value="#16191E" />
        </Style>

        <Style TargetType="Grid">
            <Setter Property="VerticalOptions" Value="Fill" />
            <Setter Property="HorizontalOptions" Value="Fill" />
            <Setter Property="RowSpacing" Value="0" />
            <Setter Property="ColumnSpacing" Value="0" />
        </Style>

        <!--Labels-->

        <Style TargetType="Label">
            <Setter Property="FontSize" Value="24" />
            <Setter Property="FontFamily" Value="OpenSansRegular" />
            <Setter Property="TextColor" Value="#ECECEC" />
            <Setter Property="Padding" Value="10" />
            <Setter Property="LineBreakMode" Value="CharacterWrap" />
        </Style>

        <!--Buttons-->

        <Style TargetType="Button">
            <Setter Property="FontFamily" Value="OpenSansRegular"/>
            <Setter Property="FontSize" Value="26"/>
            <Setter Property="BorderWidth" Value="0"/>
            <Setter Property="CornerRadius" Value="0"/>
            <Setter Property="Padding" Value="14,10"/>
            <Setter Property="VerticalOptions" Value="Fill" />
            <Setter Property="HorizontalOptions" Value="Fill" />
            <Setter Property="MinimumHeightRequest" Value="44"/>
            <Setter Property="MinimumWidthRequest" Value="44"/>
            <Setter Property="Margin" Value="0,0,1,1" />
        </Style>

    </Application.Resources>
</Application>

Bu tanımlamalardaki özelliklerin, örneğin Button için FontFamily ve FontSize özelliğinin tek tek bütün butonlara yazılması hem gereksiz tekrar hem de zaman israfı olacağından özelliklerin bu şekilde tek yerden ayarlanması çok daha yararlı. Bu kısmı anlamadıysanız takılmayın çünkü ileride anlatacağım.

Uygulamanın son hali, platformlara özel bazı farklar dışında aşağıdaki gibi olmalı:

Evet, uygulamamız bir hesap makinesine benzemeye başladı. Şimdi uygulamamızın görünümünü kemâle erdirelim.

App.xaml dosyasında tanımladığımız stiller, örneğin Button ve Label stilleri şu anda tüm Button ve Label’lar için ortak. Biz bazı butonların arka plan renklerini ve yazı renklerini farklılaştırmak istiyoruz.

Aşağıdaki kod bloğunu, az önce değiştirdiğimiz App.xaml içinde, kapatılan en son Style etiketinin altına yerleştirelim.

<Style TargetType="Button" x:Key="OperatorButtonStyle">
    <Setter Property="BackgroundColor" Value="#E8922B" />
    <Setter Property="TextColor" Value="#242424" />
</Style>

<Style TargetType="Button" x:Key="NumberButtonStyle">
    <Setter Property="BackgroundColor" Value="#20252C" />
    <Setter Property="TextColor" Value="#ECECEC" />
</Style>

Bu kodlar daha önce tanımladığımız genel buton stilleri için özelleştirilmiş stiller ilave ediyor. Mesela Style özelliğine {StaticResource NumberButtonStyle} değerini vereceğimiz tüm butonlar burada x:Key=”NumberButtonStyle” olarak tanımlanan stildeki özellikleri devralacak.

STİL TANIMLAMALARININ UI ELEMANLARINA UYGULANMASI

Şimdi OperatorButtons türündeki tüm butonlarımızın özelliklerine Style=”{StaticResource OperatorButtonStyle}” satırını ekleyelim.

<!--OPERATOR BUTTONS-->

<Button Grid.Row="1"
        Grid.Column="3"
        Style="{StaticResource OperatorButtonStyle}"
        Text="÷" />

NumberButtons türündeki butonlarımız için de aynısını yapalım, ama bu sefer Style=”{StaticResource NumberButtonStyle}” satırını ekleyelim.

<!--NUMBER BUTTONS-->

<Button Grid.Row="2"
        Grid.Column="0"
        Style="{StaticResource NumberButtonStyle}"
        Text="7" />

App.xaml ve MainPage.xaml dosyalarının son halleri şöyle olmalı:

App.xaml dosyası:

<?xml version = "1.0" encoding = "UTF-8" ?>
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:TestSolution"
             x:Class="TestSolution.App">
    <Application.Resources>

        <!--<ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
                <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>-->

        <!--Styles-->

        <Style TargetType="ContentPage" ApplyToDerivedTypes="True">
            <Setter Property="BackgroundColor" Value="#16191E" />
        </Style>

        <Style TargetType="Grid">
            <Setter Property="VerticalOptions" Value="Fill" />
            <Setter Property="HorizontalOptions" Value="Fill" />
            <Setter Property="RowSpacing" Value="0" />
            <Setter Property="ColumnSpacing" Value="0" />
        </Style>

        <!--Labels-->

        <Style TargetType="Label">
            <Setter Property="FontSize" Value="24" />
            <Setter Property="FontFamily" Value="OpenSansRegular" />
            <Setter Property="TextColor" Value="#ECECEC" />
            <Setter Property="Padding" Value="10" />
            <Setter Property="LineBreakMode" Value="CharacterWrap" />
        </Style>

        <!--Buttons-->

        <Style TargetType="Button">
            <Setter Property="FontFamily" Value="OpenSansRegular"/>
            <Setter Property="FontSize" Value="26"/>
            <Setter Property="BorderWidth" Value="0"/>
            <Setter Property="CornerRadius" Value="0"/>
            <Setter Property="Padding" Value="14,10"/>
            <Setter Property="VerticalOptions" Value="Fill" />
            <Setter Property="HorizontalOptions" Value="Fill" />
            <Setter Property="MinimumHeightRequest" Value="44"/>
            <Setter Property="MinimumWidthRequest" Value="44"/>
            <Setter Property="Margin" Value="0,0,1,1" />
        </Style>

        <Style TargetType="Button" x:Key="OperatorButtonStyle">
            <Setter Property="BackgroundColor" Value="#E8922B" />
            <Setter Property="TextColor" Value="#242424" />
        </Style>

        <Style TargetType="Button" x:Key="NumberButtonStyle">
            <Setter Property="BackgroundColor" Value="#20252C" />
            <Setter Property="TextColor" Value="#ECECEC" />
        </Style>

    </Application.Resources>
</Application>

MainPage.xaml dosyası:

<?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="BasicCalculator.MainPage">

    <Grid RowDefinitions="*, 78, 78, 78, 78, 78"
          ColumnDefinitions="*, *, *, *">

        <!--LABELS-->

        <StackLayout Grid.Row="0"
             	     Grid.Column="0"
             	     Grid.ColumnSpan="4">

            <Label HorizontalOptions="End"
       		       VerticalOptions="StartAndExpand" />

            <Label HorizontalOptions="End"
       		       VerticalOptions="End" />

        </StackLayout>

        <!--BUTTONS-->

        <Button Grid.Row="1"
                Grid.Column="0"
                Text="AC" />

        <Button Grid.Row="1"
                Grid.Column="1"
                Text="±" />

        <Button Grid.Row="1"
                Grid.Column="2"
                Text="%" />

        <!--OPERATOR BUTTONS-->

        <Button Grid.Row="1"
                Grid.Column="3"
                Style="{StaticResource OperatorButtonStyle}"
                Text="÷" />

        <Button Grid.Row="2"
                Grid.Column="3"
                Style="{StaticResource OperatorButtonStyle}"
                Text="x" />

        <Button Grid.Row="3"
                Grid.Column="3"
                Style="{StaticResource OperatorButtonStyle}"
                Text="-" />

        <Button Grid.Row="4"
                Grid.Column="3"
                Style="{StaticResource OperatorButtonStyle}"
                Text="+" />

        <Button Grid.Row="5"
                Grid.Column="3"
                Style="{StaticResource OperatorButtonStyle}"
                Text="=" />

        <!--NUMBER BUTTONS-->

        <Button Grid.Row="2"
                Grid.Column="0"
                Style="{StaticResource NumberButtonStyle}"
                Text="7" />

        <Button Grid.Row="2"
                Grid.Column="1"
                Style="{StaticResource NumberButtonStyle}"
                Text="8" />

        <Button Grid.Row="2"
                Grid.Column="2"
                Style="{StaticResource NumberButtonStyle}"
                Text="9" />

        <Button Grid.Row="3"
                Grid.Column="0"
                Style="{StaticResource NumberButtonStyle}"
                Text="4" />

        <Button Grid.Row="3"
                Grid.Column="1"
                Style="{StaticResource NumberButtonStyle}"
                Text="5" />

        <Button Grid.Row="3"
                Grid.Column="2"
                Style="{StaticResource NumberButtonStyle}"
                Text="6" />

        <Button Grid.Row="4"
                Grid.Column="0"
                Style="{StaticResource NumberButtonStyle}"
                Text="1" />

        <Button Grid.Row="4"
                Grid.Column="1"
                Style="{StaticResource NumberButtonStyle}"
                Text="2" />

        <Button Grid.Row="4"
                Grid.Column="2"
                Style="{StaticResource NumberButtonStyle}"
                Text="3" />

        <Button Grid.Row="5"
                Grid.Column="0"
                Style="{StaticResource NumberButtonStyle}"
                Text="," />

        <Button Grid.Row="5"
                Grid.Column="1"
                Style="{StaticResource NumberButtonStyle}"
                Text="0" />

        <Button Grid.Row="5"
                Grid.Column="2"
                Style="{StaticResource NumberButtonStyle}"
                Text="←" />
        
    </Grid>

</ContentPage>

Böylelikle uygulamamızın ön yüzünü tamamlamış olduk. Uygulamayı Windows Machine veya Android Emulator ile incelediğinizde aşağıdaki gibi bir görünümle karşılamalısınız.

Şu anda uygulamamızda hiçbir hesaplama özelliği bulunmuyor. Bir sonraki yazıda uygulamanın işlevsel özelliklerini kodlamaya başlayacağız, inşallah.

Umarım yararlı olmuştur. Bir sonraki yazıda görüşmek üzere,

Selametle…

.NET MAUI ile Hesap Makinesi Yapımı (3/3) – Kodlama

Etiketler:

Şunlar da ilginizi çekebilir...

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir