如何:針對自動配置使用格線
此範例說明如何使用自動版面配置方法中的格線,以建立當地語系化的應用程式。
使用者介面 (UI) 的當地語系化可能是一個耗時的程式。 當地語系化人員除了翻譯文字以外,通常還需要重新調整項目的大小並重新定位。 在過去,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>
下圖顯示程式碼範例的輸出。
方格
另請參閱
意見反應
https://aka.ms/ContentUserFeedback。
即將登場:在 2024 年,我們將逐步淘汰 GitHub 問題作為內容的意見反應機制,並將它取代為新的意見反應系統。 如需詳細資訊,請參閱:提交並檢視相關的意見反應