بوتستراب سطح المكتب !!!! ؟؟؟؟

العنوان  غريب،  أليس كذلك ؟



لم اجد  عنوان  مناسب  لهذا الدرس  عدى ذكر مكتبة البوت سراب للويب المتجاوب ـ  هل  تعلم ان تطبيقات سطح المكتب  سبقت تطبيقات الويب في  التجاوب مع الاجهزة  وأن الفكرة في الاصل مستنبطة من تطبيقات سطح المكتب  .....   



حاليا في  الفوجل ستوديو  هناك  خاصية  تعطيها  للكوبونات  حيث تسمح لها  بالتجاوب مع اغلب الاجهزة  وبشطل  بسيط  جدا بدون كتابة  اي  سطر برمجي واحد ؟؟ فقط  معليك  سوى الضغط على الخاصية المعروفة ب anchor بعدها  يمكنك تخصيص  الى اي جانب يمكن تموضع الكوبون  في حالة  تكبير  التطبيق   




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



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

float WIDTH_AT_DESIGN_TIME = (float)Convert.ToDouble
                             (ConfigurationManager.AppSettings["DESIGN_TIME_SCREEN_WIDTH"]);
float HEIGHT_AT_DESIGN_TIME = (float)Convert.ToDouble
                              (ConfigurationManager.AppSettings["DESIGN_TIME_SCREEN_HEIGHT"]);
Rectangle Resolution;
float WidthMultiplicationFactor;
float HeightMultiplicationFactor;

&ltadd key="DESIGN_TIME_SCREEN_WIDTH" value="1920"&gt
&ltadd key="DESIGN_TIME_SCREEN_HEIGHT" value="1080"&gt

بعد  انشاء  الكلاسة  نقوم بانشاء تمثيل يقوم بالتقسيم حسب  الشاشة في الميثود التالية

    publicpublic Responsive(Rectangle ResolutionParam)
    {
        Resolution = ResolutionParam;
    }
    
     Responsi public void SetMultiplicationFactor()
    {
        WidthMultiplicationFactor = Resolution.Width / WIDTH_AT_DESIGN_TIME;
        HeightMultiplicationFactor = Resolution.Height / HEIGHT_AT_DESIGN_TIME;
    }

على سبيل  المثال  فتطبيق لديه الابعاد التالية 1920x1080  وتم  تشغيله على  شاشة حاسوب بالقياسات التالية 1024x768  فانه تلقائيا  سيقوم بالعملية التالية  

    WidthMultiplicationFactor = 1024/1920 = 0.533
    HeightMultiplicationFactor = 768/1080 = 0.711

بعدها  يبقى لنا  حساب الاجزاء  الداخلية :

    public int GetMetrics(int ComponentValue)
    {
        return (int)(Math.Floor(ComponentValue * WidthMultiplicationFactor));
    }
    
    public int GetMetrics(int ComponentValue, string Direction)
    {
        if (Direction.Equals("Width") || Direction.Equals("Left"))
            return (int)(Math.Floor(ComponentValue * WidthMultiplicationFactor));
        else if (Direction.Equals("Height") || Direction.Equals("Top"))
            return (int)(Math.Floor(ComponentValue * HeightMultiplicationFactor));
        return 1;
    }

يمكنك تحميل المثال من الرابط  التالي : 

https://github.com/sadik-fattah/ResponsiveWindowsApp