Share via

استخدام النظرة العامة حول التخطيط التلقائي

  • مقالة

هذا الموضوع يقدم مبادئ توجيهية للمطورين حول كيفية كتابة Windows Presentation Foundation (WPF) ارمزية التطبيقات مع واجهات المستخدم (UI). في الماضي، الترجمة واجهة المستخدمكانت العملية تستغرق وقتا طويلا. كل لغة أن واجهة المستخدم وتكييف، ليناسب المطلوب و ضبطه بكسل بكسل. إلى اليوم بتصميم الأيمن والأيسر ترميز المعايير، واجهات المستخدميمكن بناء حيث يكون localizers أقل تغيير حجمها وإعادة تعيين موضع إلى do. هي الطريقة لكتابة التطبيقات التي يمكن أن يكون تم تغيير حجمها بطريقة أكثر بسهولة و repositioned هو يسمى التخطيط تلقائي، ويمكن الحصول باستخدام WPFتطبيق التصميم.

يشتمل هذا الموضوع على الأقسام التالية.

  • مزايا استخدام التخطيط تلقائي

  • التخطيط والتحكم التلقائي

  • التخطيط التلقائي وترقيم المعايير

  • التخطيط التلقائي للشبكات

  • التخطيط التلقائي للشبكات باستخدام نطاق حجم الملكية المشتركة

  • مواضيع ذات صلة

مزايا استخدام التخطيط تلقائي

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

  • واجهة المستخدم تعرض أيضاً في أي لغه.

  • يقلل من الحاجة لتعديل الموقف وحجم الضوابط بعد ترجمة النص..

  • يقلل من الحاجة لتعديل حجم النافذة.

  • واجهة المستخدم الرمز المميز يعرض بشكل صحيح في أي لغة.

  • ويمكن تخفيض الترجمة إلى الحد الذي يجعلها أكثر قليلا من سلسلة الترجمة.

التخطيط والتحكم التلقائي

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

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="ButtonLoc.Pane1"
    Name="myWindow"
    SizeToContent="WidthAndHeight"
    >

<DockPanel> 
    <Button FontSize="28" Height="50">My name is Hope.</Button>
</DockPanel>
</Window>

في المثال، كل مايجب عليك هو الضغط على زر اسبانيه لتغيير النص. على سبيل المثال،

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="ButtonLoc.Pane1"
    Name="myWindow"
    SizeToContent="WidthAndHeight"
    >

 <DockPanel> 
    <Button FontSize="28" Height="50">Me llamo Esperanza.</Button>
  </DockPanel>
</Window>

يوضح الرسم التالي إخراج نموذج التعليمات البرمجية.

زر يمكن تغيير حجمه تلقائياً

الزر نفسه به نص بلغات مختلفة

التخطيط التلقائي وترقيم المعايير

باستخدام نهج التخطيط التلقائي تتطلب مجموعة من مقاييس الترميز وتصميم وقواعد لإنتاج القابلة للترجمة بشكل كامل واجهة المستخدم. الإرشادات التالية سوف تساعد فى التخطيط التلقائي الخاص بك والترميز.

مقاييس الترميز

الوصف

لا تستخدم مواضع مطلقة.

لا تقم بتعيين حجم ثابت لإطار.

 

<StackPanel
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="GridLoc.Pane1"
>

أضف FlowDirection.

  • لإضافة FlowDirection إلى العنصر الساسي في التطبيق الخاص بك

  • يوفر WPF طريقة ملائمة جداً لدعم التخطيط الأفقي وثنائي الاتجاه والعمودي. في إطار العرض التقديمي الخاصية FlowDirection يمكن استخدامها لتعريف التخطيط. نقوش اتجاه التدفق:

    • LeftToRight - تخطيط أفقي للاتينية والشرق آسيوية وهكذا.

    • RightToLeft - ثنائية الاتجاه للعربية, العبرية وما الى ذلك.

استخدام خطوط مركبة بدلاً من الخطوط الفعلية.

  • مع خطوط مركبة ، FontFamily الملكية ليست في حاجة إلى أن تكون مترجمة.

  • يمكن للمطورين استخدام أحد الخطوط التالية أو إنشاء الخاصة بهم.

    • العالمية واجهة المستخدم

    • عالميهsan Serif

    • Serif العمومية

إضافة xml:lang.

  • إضافة xml:lang سمة في عنصر الجذر الخاص بك واجهة المستخدم, مثل xml:lang="en-US" لتطبيق اللغة الإنجليزية.

  • بسبب استخدام الخطوط المركبه xml:lang لتحديد الخط للاستخدام ، تعيين هذه الخاصية إلى دعم سيناريوهات متعددة اللغات.

التخطيط التلقائي للشبكات

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

<Grid Name="grid" ShowGridLines ="false">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>

<TextBlock Margin="10, 10, 5, 5" Grid.Column="0" Grid.Row="0" FontSize="24">Grid
</TextBlock>
<TextBlock Margin="10, 10, 5, 5" Grid.Column="0" Grid.Row="1" FontSize="12"  
    Grid.ColumnSpan="2">The following buttons and text are positioned using a Grid.
</TextBlock>  
<Button Margin="10, 10, 5, 5" Grid.Column="0" Grid.Row="2" Background="Pink" 
    BorderBrush="Black" BorderThickness="10">Button 1
</Button>
<TextBlock Margin="10, 10, 5, 5" Grid.Column="1" Grid.Row="2" FontSize="12" 
   VerticalAlignment="Center" TextWrapping="WrapWithOverflow">Sets the background 
   color.
</TextBlock>  
<Button Margin="10, 10, 5, 5" Grid.Column="0" Grid.Row="3" Foreground="Red">
   Button 2
</Button>
<TextBlock Margin="10, 10, 5, 5" Grid.Column="1" Grid.Row="3" FontSize="12" 
   VerticalAlignment="Center" TextWrapping="WrapWithOverflow">Sets the foreground 
   color.
</TextBlock>  
<Button Margin="10, 10, 5, 5" Grid.Column="0" Grid.Row="4">
   <Image Source="data\flower.jpg"></Image>
</Button>
<TextBlock Margin="10, 10, 5, 5" Grid.Column="1" Grid.Row="4" FontSize="12" 
   VerticalAlignment="Center" TextWrapping="WrapWithOverflow">Adds an image as 
   the button's content.
</TextBlock>
</Grid>

ويظهر الرسم التالي شبكة التي تنتجها البرمجية السابقة.

خطوط الشبكة

مثال للشبكة

التخطيط التلقائي للشبكات باستخدام نطاق حجم الملكية المشتركة

Grid عنصر مفيداً في التطبيقات القابلة للترجمة لإنشاء عناصر التحكم التي تعدل لتناسب المحتوى. ومع ذلك ، في بعض الأحيان اذ كنت تريد الضوابط للحفاظ على حجم معين بغض النظر عن المحتوى. على سبيل المثال ، إذا كان لديك أنت "موافق" ، "إلغاء" و "استعراض" أزرار ربما كنت لا تريد أزرار الحجم لتناسب المحتوى. في هذه الحالة Grid.IsSharedSizeScope الملكيه المرفقة مفيد من أجل تبادل و تحجيم نفسه من بين عناصر الشبكة متعددة. المثال التالي يوضح كيفية مشاركة العمود والصف التحجيم البيانات بين عدة Grid عناصر.

<StackPanel Orientation="Horizontal" DockPanel.Dock="Top">  
    <Button Click="setTrue" Margin="0,0,10,10">Set IsSharedSizeScope="True"</Button>
    <Button Click="setFalse" Margin="0,0,10,10">Set IsSharedSizeScope="False"</Button>
</StackPanel> 

<StackPanel Orientation="Horizontal" DockPanel.Dock="Top">

<Grid ShowGridLines="True" Margin="0,0,10,0">
  <Grid.ColumnDefinitions>
    <ColumnDefinition SharedSizeGroup="FirstColumn"/>
    <ColumnDefinition SharedSizeGroup="SecondColumn"/>
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" SharedSizeGroup="FirstRow"/>
  </Grid.RowDefinitions>

    <Rectangle Fill="Silver" Grid.Column="0" Grid.Row="0" Width="200" Height="100"/>
    <Rectangle Fill="Blue" Grid.Column="1" Grid.Row="0" Width="150" Height="100"/>

    <TextBlock Grid.Column="0" Grid.Row="0" FontWeight="Bold">First Column</TextBlock>
    <TextBlock Grid.Column="1" Grid.Row="0" FontWeight="Bold">Second Column</TextBlock>
</Grid>

<Grid ShowGridLines="True">
  <Grid.ColumnDefinitions>
    <ColumnDefinition SharedSizeGroup="FirstColumn"/>
    <ColumnDefinition SharedSizeGroup="SecondColumn"/>
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>        
    <RowDefinition Height="Auto" SharedSizeGroup="FirstRow"/>
  </Grid.RowDefinitions>

    <Rectangle Fill="Silver" Grid.Column="0" Grid.Row="0"/>
    <Rectangle Fill="Blue" Grid.Column="1" Grid.Row="0"/>

    <TextBlock Grid.Column="0" Grid.Row="0" FontWeight="Bold">First Column</TextBlock>
    <TextBlock Grid.Column="1" Grid.Row="0" FontWeight="Bold">Second Column</TextBlock>
</Grid>

</StackPanel>

<TextBlock Margin="10" DockPanel.Dock="Top" Name="txt1"/>

للحصول على نموذج كامل، راجع نموذج Geometriesكيفية القيام بما يلي: مشاركة خصائص تغيير الحجم صواب بين الشبكات.

راجع أيضًا:

المهام

كيفية القيام بما يلي: استخدام التخطيط التلقائي لإنشاء زر

كيفية القيام بما يلي: استخدام شبكة للتخطيط التلقائي

المبادئ

التعميم لـ WPF