在日常開發中，有些佈局非常具有規律性，比如相同的列寬，行高，均勻的排列等，爲了簡化開發，WPF提供了UniformGrid佈局和ItemsControl容器，本文以一個簡單的小例子，簡述，如何在WPF開發中應用UniformGrid和ItemsControl實現均勻的佈局，僅供學習分享使用，如有不足之處，還請指正。
什麼是UniformGrid?
在WPF開發中，提供了一種Grid網格佈局，此佈局應用靈活，形式多樣，在使用之前，需要定義行，列，設置高度，寬度等內容，使用相對複雜。爲了簡化佈局，針對具有等寬，等高的佈局，提供了一種更加簡化的佈局容器UniformGrid。
UniformGrid【統一佈局】，提供一種在網格(網格中的所有單元格都具有相同的大小)中排列內容的方法。
UniformGrid常用屬性
UniformGird中同一行中，列等寬，同一列中，行等高。常用屬性爲：
- Margin：獲取或設置元素的外邊距。
- Name：元素的標識名稱；
- Opacity：透明度
- Width/Height：寬度和高度；
- Visibility：該元素可見性；
- Rows：獲取或設置網格中的行數；
- Columns：獲取或設置網格中的列數；
- FirstColumn 獲取或設置網格第一行中前導空白單元格的數量，必須小於屬性的值 Columns；
注意：UniformGrid相當於簡化版的Gird，但並不是Grid的子類，而是和Grid同級，都繼承於與Panel類。
UniformGrid示例
UniformGrid中如果不設置子元素的控件大小，會根據容器的大小和行列數自動填充。如下所示：
<UniformGrid Columns="4" Margin="5">
<Button Content="按鈕1" Margin="2"></Button>
<Button Content="按鈕2" Margin="2"></Button>
<Button Content="按鈕3" Margin="2"></Button>
<Button Content="按鈕4" Margin="2"></Button>
<Button Content="按鈕5" Margin="2"></Button>
<Button Content="按鈕6" Margin="2"></Button>
</UniformGrid>
關於UniformGrid，有以下幾點需要注意：
如果設置了Columns，沒有設置Rows，則會根據元素個數和列數自動計算行數。
如果設置了Rows，沒有設置Columns，則會根據元素個數和行數自動計算列數。
如果Rows，Columns都沒有設置，則會根據元素個數自動匹配，建議至少設置一個，否則可能與預期的佈局不符。
如果沒有設置容器中元素的大下，則自動填充；如果設置了容器中元素的大小，且小於容器爲該元素分配的平均大小，則以元素爲準，其他以空白填充；如果設置了元素大小，且元素的大小大於容器爲該元素分配的平均大小，則多餘部分會隱藏，只顯示能夠顯示的那部分。
什麼是ItemsControl?
ItemsControl條目控件，用於顯示數據項集合，它允許按照自定義方式呈現任何類型的對象，可以在其中使用不同的佈局和麪板來展示數據。ItemsControl非常靈活，可以滿足各種需求。
ItemsControl涉及知識點
ItemsControl的常用知識點如下：
- ItemTemplate，是DataTemplate類型，可以通過ItemTemplate設置條目項的呈現方式。
- ItemsPanel，是ItemsPanelTemplate類型，可以通過ItemsPanel設置容器中各個條目項的佈局方式。
- ItemsSource，可以通過綁定數據源爲ItemsControl設置內容。
- Items，條目列表，如果設置了ItemsSource，則此屬性不生效。
ItemsControl示例
以下示例以文本的形式，展示了每一個條目項，且默認元素以橫向排列。如下所示：
<ItemsControl ItemsSource="{Binding Customers}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
ItemsControl和UniformGrid結合
結合ItemsControl【數據綁定，條目項自定義設置】和UniformGrid【等高，等寬】各自的優點，創建一個圖片列表。具體步驟如下：
- 自動識別文件夾中的圖片，然後將數據源綁定到ItemsControl中進行呈現。
- ItemsControl中的條目項中展示圖片縮略圖和名稱，且條目項中的圖片等比縮放。
- 條目佈局採用UniformGrid，且每行顯示5張圖。
- 圖片較多時，要有滾動條，所以需要設置ScrollViewer。
在Xaml中，頁面佈局如下所示：
<ScrollViewer VerticalScrollBarVisibility="Auto">
<ItemsControl ItemsSource="{Binding ImageItems}" Background="#eeeeee">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="5"></UniformGrid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Margin="3">
<Image Source="{Binding ImagePath}" Stretch="Uniform"></Image>
<TextBlock Text="{Binding ImageName}" HorizontalAlignment="Center" VerticalAlignment="Bottom"></TextBlock>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>其中ItemsSource屬性用於綁定數據源，在ViewModel層進行構造，如下所示：
public class MainWindowViewModel
{
public ObservableCollection<ImageItem> ImageItems { get; set; }
public MainWindowViewModel()
{
ImageItems = new ObservableCollection<ImageItem>();
for(int i = 0; i < 8; i++)
{
for(int j = 0; j < 5; j++)
{
var imageName = $"{i+1}.{j+1}.jpg";
var imagePath = Path.Combine(Environment.CurrentDirectory, "imgs", imageName);
ImageItems.Add(new ImageItem(){ImageName = imageName,ImagePath = imagePath});
}
}
}
}運行示例如下所示：
以上就是【淺談WPF之UniformGrid和ItemsControl】的全部內容，關於更多詳細內容，可參考官方文檔。希望能夠一起學習，共同進步。