在日常開發(fā)中，有些布局非常具有規(guī)律性，比如相同的列寬，行高，均勻的排列等，為了簡化開發(fā)，WPF提供了UniformGrid布局和ItemsControl容器，本文以一個簡單的小例子，簡述，如何在WPF開發(fā)中應用UniformGrid和ItemsControl實現(xiàn)均勻的布局，僅供學習分享使用，如有不足之處，還請指正。

什么是UniformGrid

在WPF開發(fā)中，提供了一種Grid網(wǎng)格布局，此布局應用靈活，形式多樣，在使用之前，需要定義行，列，設置高度，寬度等內(nèi)容，使用相對復雜。為了簡化布局，針對具有等寬，等高的布局，提供了一種更加簡化的布局容器UniformGrid。

UniformGrid【統(tǒng)一布局】，提供一種在網(wǎng)格(網(wǎng)格中的所有單元格都具有相同的大小)中排列內(nèi)容的方法。

UniformGrid常用屬性

UniformGird中同一行中，列等寬，同一列中，行等高。常用屬性為：

• Margin：獲取或設置元素的外邊距。
• Name：元素的標識名稱；
• Opacity：透明度
• Width/Height：寬度和高度；
• Visibility：該元素可見性；
• Rows：獲取或設置網(wǎng)格中的行數(shù)；
• Columns：獲取或設置網(wǎng)格中的列數(shù)；
• FirstColumn    獲取或設置網(wǎng)格第一行中前導空白單元格的數(shù)量，必須小于屬性的值 Columns；

注意：UniformGrid相當于簡化版的Gird，但并不是Grid的子類，而是和Grid同級，都繼承于與Panel類。

UniformGrid示例

UniformGrid中如果不設置子元素的控件大小，會根據(jù)容器的大小和行列數(shù)自動填充。如下所示：

<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，則會根據(jù)元素個數(shù)和列數(shù)自動計算行數(shù)。

如果設置了Rows，沒有設置Columns，則會根據(jù)元素個數(shù)和行數(shù)自動計算列數(shù)。

如果Rows，Columns都沒有設置，則會根據(jù)元素個數(shù)自動匹配，建議至少設置一個，否則可能與預期的布局不符。

如果沒有設置容器中元素的大下，則自動填充；如果設置了容器中元素的大小，且小于容器為該元素分配的平均大小，則以元素為準，其他以空白填充；如果設置了元素大小，且元素的大小大于容器為該元素分配的平均大小，則多余部分會隱藏，只顯示能夠顯示的那部分。

什么是ItemsControl

ItemsControl條目控件，用于顯示數(shù)據(jù)項集合，它允許按照自定義方式呈現(xiàn)任何類型的對象，可以在其中使用不同的布局和面板來展示數(shù)據(jù)。ItemsControl非常靈活，可以滿足各種需求。

ItemsControl涉及知識點

ItemsControl的常用知識點如下：

• ItemTemplate，是DataTemplate類型，可以通過ItemTemplate設置條目項的呈現(xiàn)方式。
• ItemsPanel，是ItemsPanelTemplate類型，可以通過ItemsPanel設置容器中各個條目項的布局方式。
• ItemsSource，可以通過綁定數(shù)據(jù)源為ItemsControl設置內(nèi)容。
• 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結(jié)合

結(jié)合ItemsControl【數(shù)據(jù)綁定，條目項自定義設置】和UniformGrid【等高，等寬】各自的優(yōu)點，創(chuàng)建一個圖片列表。具體步驟如下：

• 自動識別文件夾中的圖片，然后將數(shù)據(jù)源綁定到ItemsControl中進行呈現(xiàn)。
• 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屬性用于綁定數(shù)據(jù)源，在ViewModel層進行構(gòu)造，如下所示：

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開發(fā)之UniformGrid和ItemsControl的應用詳解的文章就介紹到這了,更多相關WPF UniformGrid ItemsControl內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論