במדריך זה נלמד כיצד לבנות אפליקציית מחשבון פשוטה באמצעות MAUI (Multi-platform App UI), טכנולוגיה מבית מיקרוסופט המאפשרת פיתוח יישומים חוצה פלטפורמות למכשירי אנדרואיד, iOS, ו-Windows באמצעות שפת C# ו-XAML. נעבור שלב אחרי שלב בהתקנת הכלים הנדרשים, יצירת פרויקט חדש, בניית ממשק המשתמש, והוספת הלוגיקה הדרושה להפעלת המחשבון.
שלב 1: התקנת הכלים הנדרשים
התקן את Visual Studio 2022 עם רכיב ה-MAUI:
פתח את Visual Studio Installer.
בחר ב-"Modify" על התקנה קיימת של Visual Studio.
בחר ב-"Mobile development with .NET".
ודא שה-MAUI נבחר כחלק מהרכיבים המותקנים.
שלב 2: יצירת פרויקט חדש
פתח את Visual Studio ובחר "Create a new project"
.בחר "MAUI App" ולחץ על "Next".
תן שם לפרויקט ובחר את המיקום בו יישמר הפרויקט. לחץ "Create".
שלב 3: בניית ממשק המשתמש
במבנה הפרויקט, אתר את הקובץ MainPage.xaml ופתח אותו.
בקובץ זה ניצור את מבנה המחשבון לפי השלבים הבאים:
חלק 1: הגדרות כלליות ומבנה בסיסי
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="YourNamespace.MainPage">
<!-- סידור אנכי של רכיבי הממשק -->
<StackLayout Padding="30" Spacing="10">
<!-- כותרת -->
<Label Text="Calculator" FontSize="36" HorizontalOptions="Center" />
הסבר:
<ContentPage>: מגדיר את הדף הראשי של האפליקציה.<StackLayout>: סידור אנכי של רכיבי הממשק עם ריווח ופדינג.<Label>: תווית המציגה את הכותרת של המחשבון.
חלק 2: תיבת הקלט לתצוגת התוצאות והקלט
<!-- תיבת הקלט לתצוגת התוצאות והקלט -->
<Entry x:Name="entry" Placeholder="0" FontSize="24" Keyboard="Numeric" HorizontalOptions="FillAndExpand" />
הסבר:
<Entry>: שדה קלט להצגת התוצאות והקלט, עם פונט מוגדל והגדרה לקלט מספרי.
חלק 3: סידור הכפתורים של המחשבון
<!-- סידור הכפתורים של המחשבון -->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
הסבר:
<Grid>: רשת לסידור הכפתורים של המחשבון עם הגדרת שורות ועמודות.
חלק 4: כפתורי המספרים והפעולות
<!-- שורה ראשונה של כפתורים -->
<Button Text="7" Grid.Row="0" Grid.Column="0" Clicked="OnNumberClicked" />
<Button Text="8" Grid.Row="0" Grid.Column="1" Clicked="OnNumberClicked" />
<Button Text="9" Grid.Row="0" Grid.Column="2" Clicked="OnNumberClicked" />
<Button Text="/" Grid.Row="0" Grid.Column="3" Clicked="OnOperatorClicked" />
<!-- שורה שנייה של כפתורים -->
<Button Text="4" Grid.Row="1" Grid.Column="0" Clicked="OnNumberClicked" />
<Button Text="5" Grid.Row="1" Grid.Column="1" Clicked="OnNumberClicked" />
<Button Text="6" Grid.Row="1" Grid.Column="2" Clicked="OnNumberClicked" />
<Button Text="*" Grid.Row="1" Grid.Column="3" Clicked="OnOperatorClicked" />
<!-- שורה שלישית של כפתורים -->
<Button Text="1" Grid.Row="2" Grid.Column="0" Clicked="OnNumberClicked" />
<Button Text="2" Grid.Row="2" Grid.Column="1" Clicked="OnNumberClicked" />
<Button Text="3" Grid.Row="2" Grid.Column="2" Clicked="OnNumberClicked" />
<Button Text="-" Grid.Row="2" Grid.Column="3" Clicked="OnOperatorClicked" />
<!-- שורה רביעית של כפתורים -->
<Button Text="0" Grid.Row="3" Grid.Column="0" Clicked="OnNumberClicked" />
<Button Text="C" Grid.Row="3" Grid.Column="1" Clicked="OnClearClicked" />
<Button Text="=" Grid.Row="3" Grid.Column="2" Clicked="OnCalculateClicked" />
<Button Text="+" Grid.Row="3" Grid.Column="3" Clicked="OnOperatorClicked" />
</Grid>
</StackLayout>
</ContentPage>
הסבר:
<Button>: כפתורים עבור המספרים והפעולות, עם הפניה לאירועי הלחיצה המתאימים.
שלב 4: הוספת לוגיקה מאחורי הממשק
- פתח את הקובץ
MainPage.xaml.csוהוסף את הקוד הבא:
חלק 1: הגדרות ויצירת הדף
using System;
using Microsoft.Maui.Controls;
namespace YourNamespace
{
public partial class MainPage : ContentPage
{
string currentEntry = "";
string operatorClicked = "";
double firstNumber = 0;
public MainPage()
{
InitializeComponent();
}
הסבר:
- הגדרת משתנים לשמירת המצב הנוכחי של המחשבון.
InitializeComponent(): אתחול רכיבי הממשק.
חלק 2: טיפול בלחיצות על כפתורי המספרים
// טיפול בלחיצות על כפתורי המספרים
void OnNumberClicked(object sender, EventArgs e)
{
Button button = (Button)sender;
currentEntry += button.Text;
entry.Text = currentEntry;
}
הסבר:
OnNumberClicked: מתעדכן כשנלחץ כפתור מספר ומוסיף את המספר לתצוגה.
חלק 3: טיפול בלחיצות על כפתורי הפעולות
// טיפול בלחיצות על כפתורי הפעולות
void OnOperatorClicked(object sender, EventArgs e)
{
Button button = (Button)sender;
operatorClicked = button.Text;
firstNumber = Convert.ToDouble(currentEntry);
currentEntry = "";
}
הסבר:
OnOperatorClicked: מתעדכן כשנלחץ כפתור פעולה ושומר את המספר הראשון והפעולה שנבחרה.
חלק 4: טיפול בלחיצה על כפתור ניקוי
// טיפול בלחיצה על כפתור ניקוי
void OnClearClicked(object sender, EventArgs e)
{
currentEntry = "";
operatorClicked = "";
firstNumber = 0;
entry.Text = "0";
}
הסבר:
OnClearClicked: מאפס את המחשבון.
חלק 5: טיפול בלחיצה על כפתור שווה
// טיפול בלחיצה על כפתור שווה
void OnCalculateClicked(object sender, EventArgs e)
{
double secondNumber = Convert.ToDouble(currentEntry);
double result = 0;
switch (operatorClicked)
{
case "+":
result = firstNumber + secondNumber;
break;
case "-":
result = firstNumber - secondNumber;
break;
case "*":
result = firstNumber * secondNumber;
break;
case "/":
result = firstNumber / secondNumber;
break;
}
entry.Text = result.ToString();
currentEntry = result.ToString();
}
}
}
הסבר:
OnCalculateClicked: מבצע את החישוב בהתאם לפעולה שנבחרה ומעדכן את התוצאה בתצוגה.
שלב 5: הפעלת היישום
שמור את כל הקבצים.בחר את הפלטפורמה הרצויה להפעלה (אנדרואיד, iOS, Windows וכו').לחץ על כפתור ההפעלה (Run) כדי לבנות ולהפעיל את האפליקציה.
קוד מלא של כל אחד מהקבצים:
MainPage.xaml
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="YourNamespace.MainPage">
<StackLayout Padding="30" Spacing="10">
<Label Text="Calculator" FontSize="36" HorizontalOptions="Center" />
<Entry x:Name="entry" Placeholder="0" FontSize="24" Keyboard="Numeric" HorizontalOptions="FillAndExpand" />
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Button Text="7" Grid.Row="0" Grid.Column="0" Clicked="OnNumberClicked" />
<Button Text="8" Grid.Row="0" Grid.Column="1" Clicked="OnNumberClicked" />
<Button Text="9" Grid.Row="0" Grid.Column="2" Clicked="OnNumberClicked" />
<Button Text="/" Grid.Row="0" Grid.Column="3" Clicked="OnOperatorClicked" />
<Button Text="4" Grid.Row="1" Grid.Column="0" Clicked="OnNumberClicked" />
<Button Text="5" Grid.Row="1" Grid.Column="1" Clicked="OnNumberClicked" />
<Button Text="6" Grid.Row="1" Grid.Column="2" Clicked="OnNumberClicked" />
<Button Text="*" Grid.Row="1" Grid.Column="3" Clicked="OnOperatorClicked" />
<Button Text="1" Grid.Row="2" Grid.Column="0" Clicked="OnNumberClicked" />
<Button Text="2" Grid.Row="2" Grid.Column="1" Clicked="OnNumberClicked" />
<Button Text="3" Grid.Row="2" Grid.Column="2" Clicked="OnNumberClicked" />
<Button Text="-" Grid.Row="2" Grid.Column="3" Clicked="OnOperatorClicked" />
<Button Text="0" Grid.Row="3" Grid.Column="0" Clicked="OnNumberClicked" />
<Button Text="C" Grid.Row="3" Grid.Column="1" Clicked="OnClearClicked" />
<Button Text="=" Grid.Row="3" Grid.Column="2" Clicked="OnCalculateClicked" />
<Button Text="+" Grid.Row="3" Grid.Column="3" Clicked="OnOperatorClicked" />
</Grid>
</StackLayout>
</ContentPage>
MainPage.xaml.cs
using System;
using Microsoft.Maui.Controls;
namespace YourNamespace
{
public partial class MainPage : ContentPage
{
string currentEntry = "";
string operatorClicked = "";
double firstNumber = 0;
public MainPage()
{
InitializeComponent();
}
void OnNumberClicked(object sender, EventArgs e)
{
Button button = (Button)sender;
currentEntry += button.Text;
entry.Text = currentEntry;
}
void OnOperatorClicked(object sender, EventArgs e)
{
Button button = (Button)sender;
operatorClicked = button.Text;
firstNumber = Convert.ToDouble(currentEntry);
currentEntry = "";
}
void OnClearClicked(object sender, EventArgs e)
{
currentEntry = "";
operatorClicked = "";
firstNumber = 0;
entry.Text = "0";
}
void OnCalculateClicked(object sender, EventArgs e)
{
double secondNumber = Convert.ToDouble(currentEntry);
double result = 0;
switch (operatorClicked)
{
case "+":
result = firstNumber + secondNumber;
break;
case "-":
result = firstNumber - secondNumber;
break;
case "*":
result = firstNumber * secondNumber;
break;
case "/":
result = firstNumber / secondNumber;
break;
}
entry.Text = result.ToString();
currentEntry = result.ToString();
}
}
}
באמצעות מדריך זה, יצרתם אפליקציית מחשבון בסיסית שמדגימה את היכולת של MAUI לספק פתרון יעיל לפיתוח אפליקציות גם עבור אנדרואיד, גם עבור iOS וגם עבור Windows בצורה אחידה. הפרויקט מהווה בסיס להמשך פיתוח ושיפור, תוך כדי הוספת פונקציות מתמטיות נוספות, עיצוב מתקדם ותמיכה ביותר פלטפורמות, ובכך מאפשר לכם להתנסות ולשפר את המיומנויות שלכם בפיתוח אפליקציות חוצות פלטפורמות עם MAUI.
לעוד מידע על MAUI אתם מוזמנים להתייעץ איתנו על קורס MAUI . בהצלחה רבה בפיתוח האפליקציה!
