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

什么是UniformGrid

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

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

UniformGrid常用屬性

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

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

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

UniformGrid示例

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

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

關(guān)于UniformGrid，有以下幾點(diǎn)需要注意：

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

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

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

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

什么是ItemsControl

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

ItemsControl涉及知識點(diǎn)

ItemsControl的常用知識點(diǎn)如下：

• ItemTemplate，是DataTemplate類型，可以通過ItemTemplate設(shè)置條目項(xiàng)的呈現(xiàn)方式。
• ItemsPanel，是ItemsPanelTemplate類型，可以通過ItemsPanel設(shè)置容器中各個(gè)條目項(xiàng)的布局方式。
• ItemsSource，可以通過綁定數(shù)據(jù)源為ItemsControl設(shè)置內(nèi)容。
• Items，條目列表，如果設(shè)置了ItemsSource，則此屬性不生效。

ItemsControl示例

以下示例以文本的形式，展示了每一個(gè)條目項(xiàng)，且默認(rèn)元素以橫向排列。如下所示：

<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ù)綁定，條目項(xiàng)自定義設(shè)置】和UniformGrid【等高，等寬】各自的優(yōu)點(diǎn)，創(chuàng)建一個(gè)圖片列表。具體步驟如下：

• 自動(dòng)識別文件夾中的圖片，然后將數(shù)據(jù)源綁定到ItemsControl中進(jìn)行呈現(xiàn)。
• ItemsControl中的條目項(xiàng)中展示圖片縮略圖和名稱，且條目項(xiàng)中的圖片等比縮放。
• 條目布局采用UniformGrid，且每行顯示5張圖。
• 圖片較多時(shí)，要有滾動(dòng)條，所以需要設(shè)置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層進(jìn)行構(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});
            }
        }
    }
}

運(yùn)行示例如下所示：

到此這篇關(guān)于WPF開發(fā)之UniformGrid和ItemsControl的應(yīng)用詳解的文章就介紹到這了,更多相關(guān)WPF UniformGrid ItemsControl內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論