توسعه دسکتاپ یکی از زمینه های کلیدی برای ساخت اپلیکیشن های سمت کلاینت است، البته حوزه های دیگر شامل اپلیکیشن های تحت وب، اپلیکیشن های موبایل، اپلیکیشن های تبلت و غیره است. با ظهور توسعه وب، آینده توسعه نرم افزار دسکتاپ کمی مبهم به نظر می رسد، اما نمی توان وجود آن را به طور کامل انکار کرد زیرا تنها راه حل آفلاین برای برنامه های غیر قابل دسترسی اینترنتی است.
دو مسیر در توسعه دسکتاپ وجود دارد. اولی فرم ویندوز و دومی فرم ارائه ویندوز (WPF) است . من بیشتر روی توسعه آهنگ دوم تمرکز خواهم کرد. به عنوان مثال، WPF به عنوان WPF توسعه نرم افزار غنی و تعاملی بیشتری را در مقایسه با فرم ویندوز به خصوص در طراحی UI/UX ارائه می دهد.
امروز، من اجرای دو مفهوم کلیدی WPF یعنی منوی فایل و کنترل های کاربر را نشان خواهم داد .
پیش نیازها
در زیر برخی از پیش نیازها قبل از ادامه این آموزش آورده شده است،
- K nowedge از فرم ارائه ویندوز (WPF) .
- آشنایی با برنامه نویسی سی شارپ
- آشنایی با C# LINQ .
می توانید سورس کد کامل این آموزش را دانلود کنید یا می توانید بحث گام به گام زیر را دنبال کنید. کد نمونه در Microsoft Visual Studio 2015 Enterprise توسعه داده شده است.
بیایید اکنون شروع کنیم.
مرحله 1
یک پروژه برنامه کاربردی WPF جدید ایجاد کنید و نام آن را "File Menu Controls" بگذارید.
مرحله 2
فایل "Views\MenuUserControl.xaml" را ایجاد کنید و کد زیر را در آن جایگزین کنید.
- <UserControl x:Class="File_Menu_Controls.Views.MenuUserControl"
- xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
- xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
- xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
- xmlns:local="clr-namespace:File_Menu_Controls.Views"
- mc:Ignorable="d"
- d:DesignHeight="480" d:DesignWidth="640">
- <Grid>
- <Menu>
- <MenuItem Header="File"
- FontSize="14">
- <MenuItem Header="Menu-1 Level-1"
- FontSize="14">
- <MenuItem Header="Menu-1 Level-2"
- FontSize="14">
- <MenuItem Header="Menu-1 Level-3"
- FontSize="14"/>
- <MenuItem Header="Menu-2 Level-3"
- FontSize="14"/>
- </MenuItem>
- <MenuItem Header="Menu-2 Level-2"
- FontSize="14"/>
- </MenuItem>
- <MenuItem Header="Exit"
- FontSize="14"
- Click="Exit_Click"/>
- </MenuItem>
- <MenuItem Header="Edit"
- FontSize="14">
- <MenuItem Header="Undo"
- FontSize="14">
- <MenuItem.Icon>
- <Image Source="/Content/img/undo.ico" Width="16" Height="16" />
- </MenuItem.Icon>
- </MenuItem>
- <MenuItem Header="Redo"
- FontSize="14"
- IsEnabled="False">
- <MenuItem.Icon>
- <Image Source="/Content/img/redo.ico" Width="16" Height="16" />
- </MenuItem.Icon>
- </MenuItem>
- <MenuItem Header="Cut"
- FontSize="14">
- <MenuItem.Icon>
- <Image Source="/Content/img/cut.ico" Width="16" Height="16" />
- </MenuItem.Icon>
- </MenuItem>
- <MenuItem Header="Copy"
- FontSize="14">
- <MenuItem.Icon>
- <Image Source="/Content/img/copy.ico" Width="16" Height="16" />
- </MenuItem.Icon>
- </MenuItem>
- <MenuItem Header="Paste"
- FontSize="14">
- <MenuItem.Icon>
- <Image Source="/Content/img/paste.ico" Width="16" Height="16" />
- </MenuItem.Icon>
- </MenuItem>
- </MenuItem>
- <MenuItem Header="Help"
- FontSize="14">
- <MenuItem Header="About Us"
- FontSize="14"/>
- </MenuItem>
- </Menu>
- </Grid>
- </UserControl>
در کد بالا، من به سادگی یک ساختار منوی ساده برای منوی فایل خود ایجاد کرده ام که قرار است در برنامه خود از آن استفاده کنم. توجه داشته باشید که منوی فایل در نرم افزار دسکتاپ یک جزء ضروری برای پیمایش به ویژگی های خاص است بر خلاف سبک UI/UX برنامه های کاربردی مبتنی بر وب یا تلفن همراه، این بدان معناست که هر پنجره یا صفحه ای در پنجره ای که من ایجاد می کنم، در نهایت به منوی فایل به عنوان بخشی ضروری نیاز دارد. برنامه، به این معنی است که من بارها و بارها به این جزء خاص در برنامه خود نیاز دارم. بنابراین، دلیل ایجاد منوی فایل بهعنوان کنترل کاربر ساده است، یعنی میخواهم به جای بازسازی دوباره و دوباره آن در هر صفحه، از مؤلفه خود دوباره استفاده کنم. بنابراین، من منوی فایل پیچیده خود را به عنوان یک کنترل کاربر ایجاد کرده ام، به این معنی که برای هر آیتم جدید در منو یا تغییر در یک آیتم موجود،
مرحله 3
فایل "Views\MenuUserControl.xaml\MenuUserControl.cs" را باز کنید و کد زیر را در آن جایگزین کنید.
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Text;
- using System.Threading.Tasks;
- using System.Windows;
- using System.Windows.Controls;
- using System.Windows.Data;
- using System.Windows.Documents;
- using System.Windows.Input;
- using System.Windows.Media;
- using System.Windows.Media.Imaging;
- using System.Windows.Navigation;
- using System.Windows.Shapes;
- namespace File_Menu_Controls.Views
- {
- /// <summary>
- /// Interaction logic for MenuUserControl.xaml
- /// </summary>
- public partial class MenuUserControl : UserControl
- {
- public MenuUserControl()
- {
- InitializeComponent();
- }
- private void Exit_Click(object sender, RoutedEventArgs e)
- {
- MainWindow window = Application.Current.MainWindow as MainWindow;
- window.Close();
- }
- }
- }
کسانی از شما که با تکنولوژی XAML آشنایی دارید، می دانید که هر فایل *.xaml با فایل *.cs پیوست شده است. بنابراین، در کد بالا، من کد روش خروج را فقط برای آیتم منوی خروج اضافه کرده ام.
مرحله 4