ابنِ تطبيقك في بيئة ويندوز WPF باستخدام حزمة Prism.Unity

أصبح تصميم برامج منصة ويندوز لا يقل تقنيا عن مفاهيم المستخدمة في تطبيقات شبكة الإتصالات. في هذه المقالة سوف نتعرف إلى كيفية استخدام مكتبة من مايكروسوفت تدعى Prism. سوف تساعدك هذه المكتبة وغيرها من المكتبات المرتبطة بها على بناء تطبيقات ديناميكية ومرنة من حيث أنها تسمح لك بتحديد معالم المناطق Regions في النافذة الرئيسية لتطبيقك فبذلك تكون قادرا على تغير  شرائح العرض Views أثناء عمل التطبيق. ولكن أولا دعنا نتعرف إلى بعض المفاهيم الأساسية والبسيطة!

 

بعد قراءة هذه المقالة ستكون قادرا استخدام مكتبة Prism.Unity من خلال

  1. تجهيز واجهة تطبيقك الرئيسية Shell
  2. رسم وتحديد الأماكن ضمن النافذة الرئيسة Shell مثلا
  3. بناء شرائح عرض Views

 

clip_image001 مفهوم Shell

بإختصار مفهوم Shell هي الواجهة الرئيسية  Master Windowأو Master Page بالنسبة لمطوري تطبيقات شكبة الإتصالات (ويب)

 

clip_image001[1] مفهوم المنطقة (المكان) Region

تتيح لك مكتبة Prism تعريف مناطق داخل الواجهة الرئيسية Shell لتمكنك من إضافة شرائح العرض Views أثناء عمل البرنامج

 

clip_image001[2] مفهوم “شرائح العرض” Views

شرائح العرض هي مفهوم العنصر مادون النافذة Window. هذه قد تمثل UserControl أو custom control. شريحة أو شرائح العرض ستظهر ضمن المناطق أو الأماكن Regions التي تم تحديدها داخل الواجهة الرئيسية Shell . بإختصار فإن عملك ستركز على شرائح العرض Views بعد أن تكون قد أتممت بناء واجهتك الرئيسية Shell و رسمت المناطق داخلها.

 

لاحظ الشكل التالي فإن Shell تمثل قالب الواجهة التي تراها ومن ثم فإن المناطق المعرفة عديدة منها Main Region و MainToolBarRegion و  ResearchRegion وأخير فإن شرائح العرض Views هي عبارة عن العناصر التي تراها داخل كل منطقة

 

 

والآن لنبدأ بالخطوات العلمية في إنشاء برنامج عروض ويندوز

 

clip_image003 إنشاء مشروع جديد

قم بإنشاء تطبيق بيئة ويندوز WPF

 

clip_image003[1] تعديل ملف App.xaml

إذهب إلى ملف App.xaml وأزل StartupUri – انظر السطر المظلل باللون الزهري في الشيفرة التالية:

 

App.xaml

<Application x:Class=”PrismRegionSample2.App”
           
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;
           
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;
           
xmlns:local=”clr-namespace:PrismRegionSample2″
            StartupUri=”MainWindow.xaml”>
   
<Application.Resources>

</Application.Resources>
</Application>

 

clip_image003[2] تنصيب حزمة Prism.Unity

بعدها قم بفتح Package Manager Console وادخل الأمر التالي لتنصيب حزمة Prism.Unity

Package Manager Console

PM> Install-Package Prism.Unity

 

بعض تنصيب الحزمة ستلاحظ أن هناك حزم أخرى مرتبطة قد تم تنصيبها ، يمكنك عرض الحزم المنصبة من خلال الأمر Get-Package

clip_image004

 

أو من خلال نافذة نيوجت

clip_image005

 

clip_image003[3] تجهيز ملف Shell.xaml

هذا الملف يمثل العنظر الرئيس (الواجهة الرئيسة) في برنامجك. في هذه الواجهة ستقوم بتعريف (تقسيم) واجهة برنامجك إلى مناطق مثلا منطقة البحث ، منطقة الفهرس و المنطقة الرئيسية. لقد أحطت كل منطقة بحدود حتى يتثنى لنا معرفة المناطق عند تشغيل البرنامج

 

 

Shell.xaml

1

2

3

4

5

6

7

8

9

10

11

12

13

 

14

15

16

17

18

 

19

20

21

 

22

23

24

25

<Window x:Class=”PrismRegionSample2.Shell”

    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;

    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;

    xmlns:d=”http://schemas.microsoft.com/expression/blend/2008&#8243;

    xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006&#8243;

    mc:Ignorable=”d”

    xmlns:prism=”http://prismlibrary.com/&#8221;

    Title=”Shell” Height=”300″ Width=”300″>

  <Grid>

     <Grid.RowDefinitions>

        <RowDefinition Height=”Auto”/>

        <RowDefinition Height=”*”/>

     </Grid.RowDefinitions>
 

     <DockPanel VerticalAlignment=”Top”  >

        <Border BorderThickness=”2″ BorderBrush=”Green”>

           <ContentControl prism:RegionManager.RegionName=”HeaderRegion” />

        </Border>

     </DockPanel>
 

     <DockPanel Grid.Row=”1″>

        <Border BorderThickness=”3″ BorderBrush=”LightGreen”>

           <ContentControl Name=”MainContentControl” prism:RegionManager.RegionName=”MainRegion” Grid.Row=”1″/>

        </Border>

     </DockPanel>

   </Grid>

</Window>

clip_image003[4] تجهيز ملف Bootstrapper

 

 

Bootstrapper

1

2

3

4

5

6

 

7

8

9

10

11

12

 

13

14

15

 

16

17

18

19

 

20

21

22

23

 

24

25

26

27

28

public class Bootstrapper : UnityBootstrapper

{

    protected override DependencyObject CreateShell()

    {

        return this.Container.TryResolve<Shell>();

    }

 

    protected override void InitializeShell()

    {

        base.InitializeShell();

        App.Current.MainWindow = (Window)this.Shell;

        App.Current.MainWindow.Show();

    }

 

    protected override void ConfigureModuleCatalog()

    {

        base.ConfigureModuleCatalog();

 

        var moduleCatalog = (ModuleCatalog)this.ModuleCatalog;

        moduleCatalog.AddModule(typeof(MainRegion));

        moduleCatalog.AddModule(typeof(HeaderRegion));

    }

 

    protected override void InitializeModules()

    {

        base.InitializeModules();

    }

 

    protected override void ConfigureContainer()

    {

        base.ConfigureContainer();

    }

}

 

clip_image003[5] تجهيز فئات الوارثة من IModule

 

 

MainRegion.cs

1

2

3

 

4

5

6

 

7

 

8

9

10

11

12

public class MainRegion : IModule

{

    private readonly IRegionManager regionManager;

 

    public MainRegion(IRegionManager regionManager)

    {

        this.regionManager = regionManager ?? throw new ArgumentNullException(nameof(regionManager));

    }

 

    public void Initialize()

    {

        regionManager.Regions[“MainRegion”].Add(new MainView());

    }

}

 

 

 

HeaderRegion.cs

1

2

3

 

4

5

6

7

 

8

9

10

11

12

public class HeaderRegion : IModule

{

    private readonly IRegionManager regionManager;

 

    public HeaderRegion(IRegionManager regionManager)

    {

        this.regionManager = regionManager;

    }

 

    public void Initialize()

    {

        regionManager.Regions[“HeaderRegion”].Add(new HeaderView());

    }

}

 

clip_image003[6] تجهيز شرائح العرض Views

 

 

MainView.cs

1

2

3

4

5

6

7

8

9

10

11

<UserControl x:Class=”PrismRegionSample2.View.MainView”

             xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;

             xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;

             xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006&#8243;

             xmlns:d=”http://schemas.microsoft.com/expression/blend/2008&#8243;

             mc:Ignorable=”d”

             d:DesignHeight=”300″ d:DesignWidth=”300″>

    <StackPanel>

        <Label FontSize=”40″>Main Region</Label>

    </StackPanel>

</UserControl>

 

 

HeaderView.cs

1

2

3

4

5

6

7

8

9

10

11

12

<UserControl x:Class=”PrismRegionSample2.View.HeaderView”

             xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;

             xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;

             xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006&#8243;

             xmlns:d=”http://schemas.microsoft.com/expression/blend/2008&#8243;

             xmlns:local=”clr-namespace:PrismRegionSample2.View”

             mc:Ignorable=”d”

             d:DesignHeight=”300″ d:DesignWidth=”300″>

    <StackPanel>

        <Label FontSize=”60″>Header Region</Label>

    </StackPanel>

</UserControl>

 

 

clip_image003[7] أخيرا شغل البرنامج

 

 

clip_image006

 

 

clip_image007 الملحق أ

في حال ظهور الخطأ التالي فهذا يعني أن بعض المكتبات ناقصة بسبب أنك لم تقم بتنصيب الحزمة الصحيحة المذكورة في المقالة Prism.Unity

 

clip_image008

حمل الشيفرة المصدرية:

clip_image009

 

المصادر:

[1]. https://msdn.microsoft.com/en-us/library/ff921098(v=pandp.40).aspx

 

Post a comment or leave a trackback: Trackback URL.

اترك رد

إملأ الحقول أدناه بالمعلومات المناسبة أو إضغط على إحدى الأيقونات لتسجيل الدخول:

شعار ووردبريس.كوم

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   /  تغيير )

Google photo

أنت تعلق بإستخدام حساب Google. تسجيل خروج   /  تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   /  تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   /  تغيير )

Connecting to %s

%d مدونون معجبون بهذه: