صفحة 166 - كتاب التقنية الرقمية - الصف 12 - الفصل 1 - المملكة العربية السعودية

لإضافة مكون HorizontalArrangement (الترتيب الأفقي):

من قسم Palette (لوحة)، اضغط على فئة Layout (تخطيط). (الخطوة 1)

من فئة Layout (تخطيط)، اسحب وأفلت مكون HorizontalArrangement (الترتيب الأفقي) إلى Viewer (العارض). (الخطوة 2)

اضبط خاصية AlignHorizontal (محاذاة أفقية) على 3: Center (التوسيط: 3)، وخاصية AlignVertical (محاذاة عمودية) على 2: Center (التوسيط: 2)، وخاصية Width (العرض) على Fill parent (تعبئة المساحة). (الخطوة 3)

ستضيف هنا ثلاثة مكونات: تسمية، ومربع نص، وزر.

وزارة التعليم Ministry of Education 2025 - 1447

166

لإضافة مكون HorizontalArrangement (الترتيب الأفقي): من قسم Palette (لوحة)، اضغط على فئة Layout (تخطيط). (الخطوة 1) من فئة Layout (تخطيط)، اسحب وأفلت مكون HorizontalArrangement (الترتيب الأفقي) إلى Viewer (العارض). (الخطوة 2) اضبط خاصية AlignHorizontal (محاذاة أفقية) على 3: Center (التوسيط: 3)، وخاصية AlignVertical (محاذاة عمودية) على 2: Center (التوسيط: 2)، وخاصية Width (العرض) على Fill parent (تعبئة المساحة). (الخطوة 3) ستضيف هنا ثلاثة مكونات: تسمية، ومربع نص، وزر. وزارة التعليم Ministry of Education 2025 - 1447 166 --- VISUAL CONTEXT --- **DIAGRAM**: User Interface Description: A diagram illustrating a user interface component palette. It shows a list of UI categories and components. A blue circle with the number '1' points to the 'Layout' category, and a blue circle with the number '2' points to the 'HorizontalArrangement' component within the 'Layout' category. Other visible components include AbsoluteArrangement, HorizontalScrollArrangement, TableArrangement, VerticalArrangement, VerticalScrollArrangement, Media, Drawing and Animation, Maps, and Charts. Key Values: 1 Layout, AbsoluteArrangement, 2 HorizontalArrangement, HorizontalScrollArrangement, TableArrangement, VerticalArrangement, VerticalScrollArrangement, Media, Drawing and Animation, Maps, Charts Context: This diagram is used in instructional steps 1 and 2 to show where to locate the 'Layout' category and the 'HorizontalArrangement' component in a UI development environment's palette. **DIAGRAM**: HorizontalArrangement1 Description: A diagram showing a properties panel for a 'HorizontalArrangement1' component. It displays various properties under an 'Appearance' header. A blue circle with the number '3' points to the 'AlignHorizontal' property, which is set to 'Center : 3'. Other properties shown are 'AlignVertical' set to 'Center : 2', 'BackgroundColor' set to '#FFASC2FD', 'Height' set to 'Automatic...', 'Width' set to 'Fill parent...', 'Image' set to 'None...', and 'Visible' with a checked checkbox. Key Values: Appearance, AlignHorizontal: Center : 3, AlignVertical: Center : 2, BackgroundColor: #FFASC2FD, Height: Automatic..., Width: Fill parent..., Image: None..., Visible: Checked Context: This diagram is used in instructional step 3 to demonstrate how to configure the alignment (horizontal and vertical) and width properties of a 'HorizontalArrangement' component in a UI development environment.