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

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

ترجمة واجهة المستخدم (UI) يمكن أن تكون عملية مضيعة للوقت. يحتاج المترجمين غالباً تغيير حجم و إعادة تحديد موضع العناصر بالإضافة إلى ترجمة النص. في الماضي كل لغة التي واجهة المستخدم ، تم ضبطها لتناسب الضبط المطلوب. الآن مع قدرات Windows Presentation Foundation (WPF) يمكنك تصميم العناصر التي تقلل الحاجة للضبط. طريقة كتابة تطبيقات يمكن بسهولة تغيير حجمها و موضعها تسمى auto layout.

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

مثال

يعرض المثال التالي كيفية استخدام خطوط الشبكة.

<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>

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

خطوط الشبكة

راجع أيضًا:

المهام

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

المبادئ

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