اذهب الي المحتوي
أوفيسنا
بحث مخصص من جوجل فى أوفيسنا
Custom Search

جعل برنامجك يتحجم تبعاً لاختلاف الشاشات - responsive design


SEMO.Pa3x

الردود الموصى بها

السلام عليكم ورحمة الله وبركاته..

الكثير يجهل امكانية الأكسس في جعل البرامج بشكل responsive أي انه:

لو كانت لديك شاشة كبيرة سيتغير شكل برنامجك وتوزيع الأزرار والعناصر لتتناسب مع حجم الشاشة

ولو كانت الشاشة صغيرة ايضا ستتغير اماكن العناصر لكي تتناسب مع طبيعة الشاشة وعدم

فقدان أي عنصر او ضياعه عندك تغيير الشاشات.

 

قبل البدء، سأقدم لكم مثال على ما اقصده:

 

 

image.png.7b82e843f648a1d2207957058c6b6618.png

 

image.png.fabb1fa3b1bf0b3080c63489b1548a9a.png

 

image.png.1d1c3f314c8b733b42067ed5b65b9f0e.png

 

image.png.6ef4281733083f0a13e469e8ff33f4ea.png

 

هذا اخر مشاريعي في الأكسس وهو يتغير تبعاً لأختلاف الشاشات.

 

لنبدأ:

سأقوم بوضع Button في منتصف الشاشة بحيث لا يتغير مكانه لو تغير حجم الشاشة

 

image.png.8ddb1f59da5c8dd7bc6860b3e1a4a333.png

 

ثم

 

image.png.b3acc7558829618f80f3ea6bc6f92f64.png

 

قم بعملية الأدراج من جميع الأماكن ( يسار, يمين, أعلى , أسفل )

بحيث يصبح كالأتي:

 

image.png.71f15ec9377a8e5b83a7c78ba13aed3e.png

 

ثم

 

image.png.d65c1f68d619f2924507e3828eb8c0e6.png

 

من الطرف اليمين، نختار الأرتساء الأفقي ( كلاهما )

وكذلك الحال بالنسبة لليسار

 

image.png.f4488b67f99dafc5f70e7de1407792fb.png

 

كذلك الحال نطبق على الأعلى والأسفل لكن هذه المرة سوف نعدل الأرتساء العمودي

 

image.png.4b17871162b9da5957ecb896a577b1bc.png

 

وكذلك بالنسبة للأعلى

 

image.png.086e55fde272776151bf3aa2451b31bd.png

 

جرب الآن وسوف ترى ان الـ Button سيبقى في الوسط مهما تغير حجم الشاشة لو وضعت شاشة كبيرة أو صغيرة سيظل بنفس مكانه في الوسط.

أي سؤال أنا موجود، تحياتي لكم.

تم تعديل بواسطه SEMO.Pa3x
  • Like 4
  • Thanks 4
رابط هذا التعليق
شارك

1 دقيقه مضت, sandanet said:

بارك الله فيك وزادك من علمه .. فعلاً معلومة مفيدة .. لكن ماذا عن حجم النموذج نفسه ان لم يكن في وضع مليء الشاشة..هل هنالك طريقة تجعله يناسب حجم الشاشة بدون أكواد برمجية؟

 

ممكن توضيح لهذه النقطة:

لكن ماذا عن حجم النموذج نفسه ان لم يكن في وضع مليء الشاشة..هل هنالك طريقة تجعله يناسب حجم الشاشة بدون أكواد برمجية؟ )

رابط هذا التعليق
شارك

جزاك الله خيرا اخي واستاذي د حسنين 

جعله الله في ميزان حسناتك 

سأقوم بالتجربه وموافاتك بالتيجه إن شاء الله عند عودتي من العمل بإذن الله 

تقبل تحياتي اخوك الصغير احمد 

رابط هذا التعليق
شارك

صحيح اخي واستاذي العزيز أن هذا التقسيم والتخطيط قد نفعني في هذه الأيام وضبط معي أشياء جميله فالنماذج ولكن لم الحظ هذه المعلومه الا الان منكم ومن درسكم الرائع والمفيد جزاك الله خيرا استاذي العزيز 💐 وجعله الله في ميزان حسناتكم

رابط هذا التعليق
شارك

On 1/26/2021 at 11:36 AM, SEMO.Pa3x said:

Button سيبقى في الوسط مهما تغير حجم الشاشة لو وضعت شاشة كبيرة أو صغيرة سيظل بنفس مكانه في الوسط

 

مبدع استاذنا حسنين

اسمح لي بهذه المداخلة

بخصوص اذا كان اكثر من زر وهذه الازرار متجاورة  وكذلك اكثر من نموذج الفرعي 

 وياريت ان كان لا مانع لديك  شرح عملي لشاشة فيها اغلب الكائنات  للمحاذاة

شاكرا لك سعة صدرك

 

رابط هذا التعليق
شارك

4 ساعات مضت, qathi said:

 

مبدع استاذنا حسنين

اسمح لي بهذه المداخلة

بخصوص اذا كان اكثر من زر وهذه الازرار متجاورة  وكذلك اكثر من نموذج الفرعي 

 وياريت ان كان لا مانع لديك  شرح عملي لشاشة فيها اغلب الكائنات  للمحاذاة

شاكرا لك سعة صدرك

 

 

أهلاً عزيزي، تفضل.

example_semo.accdb

  • Like 1
رابط هذا التعليق
شارك

في ٢٦‏/١‏/٢٠٢١ at 13:41, sandanet said:

ماذا عن حجم النموذج نفسه

انا استخدم هذه الطريقة :

تكبير النموذج بدون تغطية شريط قائمة إبدأ - قسم الأكسيس Access - أوفيسنا (officena.net)

 

 

وبعد اذنك دكتور حسنين ، فقد عملت تغيير على نموذجك ، الى :

image.png.3415f210ae2af952b24e921a29ddc101.png

.

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

 

جعفر

example_semo.zip

  • Like 1
  • Thanks 1
رابط هذا التعليق
شارك

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

زائر
اضف رد علي هذا الموضوع....

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • اضف...

Important Information