wpf小技巧——datagrid 滾動條問題

今天在項目中遇到了一個問題，datagrid 不出現滾動條了，拿出來給大家分享下，以作前車之鑒。

很簡單的布局代碼如下

<Window x:Class="DataGrid_AutoSize.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="500" Width="800">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="376*" />
            <ColumnDefinition Width="402*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="65" />
            <RowDefinition Height="396*" />
        </Grid.RowDefinitions>
        <Border BorderBrush="Silver" BorderThickness="1" HorizontalAlignment="Stretch" Margin="5" Name="border1" VerticalAlignment="Top" CornerRadius="5" Height="50" Grid.ColumnSpan="2">
            <TextBlock Name="textBlock1" Text="DataGrid ScrollBar Demo" Margin="15,15,0,0" />
        </Border>
        <Grid  Grid.Row="1"  HorizontalAlignment="Stretch" Name="grid1" VerticalAlignment="Stretch">
            <DataGrid AutoGenerateColumns="False" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" x:Name="SrollBarDataGrid">
                <DataGrid.Columns>
                    <DataGridTextColumn Width="100" Binding="{Binding id}"/>
                    <DataGridTextColumn Width="100" Binding="{Binding text}"/>
                </DataGrid.Columns>
            </DataGrid>
        </Grid>
        <StackPanel Grid.Column="1" Grid.Row="1" HorizontalAlignment="Stretch" Name="stackPanel1" VerticalAlignment="Stretch">
            <DataGrid AutoGenerateColumns="False" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" x:Name="NoSrollBarDataGrid">
                <DataGrid.Columns>
                    <DataGridTextColumn Width="100" Binding="{Binding id}"/>
                    <DataGridTextColumn Width="100" Binding="{Binding text}"/>
                </DataGrid.Columns>
            </DataGrid>
        </StackPanel>
    </Grid>
</Window>

 

后台代碼如下

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.ComponentModel;
using System.Collections.ObjectModel;
namespace DataGrid_AutoSize
{
    /// <summary>
    /// MainWindow.xaml 的交互邏輯
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            Init();
        }
        private void Init()
        {

            ObservableCollection<Test> mytestdata = new ObservableCollection<Test>();
            for(int i=0;i<200;i++)
            {
                mytestdata.Add(new Test(){id=i.ToString(), text="name"+i.ToString()});
            }
            SrollBarDataGrid.ItemsSource = mytestdata;
            NoSrollBarDataGrid.ItemsSource = mytestdata;
        }
    }
    class Test 
    {
        public string id { get; set; }
        public string text { get; set; }
    }
}

運行就可以看到右邊的 datagrid不會出現滾動條了 

原因也比較簡單 就是因為右邊的布局用了StackPanel

查了下微軟文檔http://msdn.microsoft.com/zh-cn/library/ms754213

可以看出StackPanel實際上是在水平或者垂直方向正無窮大

導致datagrid認為它的父容器在垂直方向無窮大 所以就沒法出現滾動條了

相信很多人都會出現這類情況 在datagrid外面套stackpanel布局吧

所以如果想出現滾動條 就千萬別在datagrid外面套stackpanel布局 切記切記~~~~~

小弟才疏學淺，剛剛上手wpf，歡迎大家多交流、批評指正。