SilverLight动态改变DataGrid行高。

Question

RT！让DataGrid的高度像宽度一样的，可以用鼠标拉伸！

Answer 1

DataGrid行高调整辅助类。
功能：支持鼠标拉升行高，支持自动显示行号。

注：这是TFSoft闲来无事的无私奉献，你们还有什么要求，尽管提，只要我有时间，我尽量满足。

我可不是搞代码的和学代码的，我只是业余把编代码当娱乐。

1）测试文件

11）xaml文件

<UserControl
  x:Class="T4Test.Sla.T4DataGridRowResizeTest"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
  xmlns:ap="clr-namespace:T4Test.Sla">

  <Grid
    x:Name="LayoutRoot"
    Width="600"
    VerticalAlignment="Center"
    HorizontalAlignment="Center">
    <Grid.RowDefinitions>
      <RowDefinition
        Height="30"></RowDefinition>
      <RowDefinition
        Height="300"></RowDefinition>
    </Grid.RowDefinitions>
    <Grid
      Grid.Row="0">
      <TextBlock
        VerticalAlignment="Center"
        HorizontalAlignment="Center"
        Text="DataGrid Row Resize Test"></TextBlock>
    </Grid>
    <Grid
      Grid.Row="1">
      <sdk:DataGrid
        x:Name="DgrMain"
        HorizontalScrollBarVisibility="Visible"
        VerticalScrollBarVisibility="Visible"
        ColumnHeaderHeight="30"
        RowBackground="White"
        AlternatingRowBackground="White"
        HeadersVisibility="All"
        CanUserResizeColumns="True"
        RowHeaderWidth="40"
        GridLinesVisibility="All"
        RowHeight="24">
        <ap:T4DBGridRowResizeAttacher.AttachInfo>
          <ap:T4DBGridRowResizeAttachInfo
            MinRowHeight="10"
            DefaultRowHeight="20"
            ShowRowNumberIf="True"
            MaxRowHeight="100"></ap:T4DBGridRowResizeAttachInfo>
        </ap:T4DBGridRowResizeAttacher.AttachInfo>
      </sdk:DataGrid>
    </Grid>
  </Grid>

</UserControl>

12）c#文件

using System.ComponentModel;
using System.Windows.Controls;

namespace T4Test.Sla
{
    public partial class T4DataGridRowResizeTest : UserControl
    {
        public T4DataGridRowResizeTest()
        {
            InitializeComponent();
            if (!DesignerProperties.IsInDesignTool) { InitMe(); }
        }

        //设置数据源。
        private void InitMe()
        {
            var DataList = new System.Collections.Generic.List<CDataItem>();
            DataList.Add(new CDataItem() { Name = "TFSoft", Gender = "Male", Notes = "TFSoft love programming." });
            DataList.Add(new CDataItem() { Name = "I", Gender = "Male", Notes = "I am foolish." });
            DataList.Add(new CDataItem() { Name = "You", Gender = "Male", Notes = "You are clever.", });
            DataList.Add(new CDataItem() { Name = "He", Gender = "Male", Notes = "He is handsome." });
            DataList.Add(new CDataItem() { Name = "She", Gender = "Female", Notes = "She is beautifull" });
            this.DgrMain.ItemsSource = DataList;
        }

        //数据源数据项定义。
        public class CDataItem
        {
            public string Name { get; set; }
            public string Gender { get; set; }
            public string Notes { get; set; }
        }
    }
}

2）实现类

21)xaml文件

<UserControl
  x:Class="T4Test.Sla.T4DBGridRowResizeHelper_Res"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">

  <UserControl.Resources>

    <!--
    CssResizableDataGridRowHeader，可调整行高的行标题样式。
    这个你可以参照默认DataGridRowHeader的Template修改成你喜欢的样式。
    -->
    <Style
      x:Name="CssResizableDataGridRowHeader"
      TargetType="sdk:DataGridRowHeader">
      <Setter
        Property="Template">
        <Setter.Value>
          <ControlTemplate
            TargetType="sdk:DataGridRowHeader">
            <Grid
              x:Name="Root"
              Background="#FFF6F7F7">

              <Border
                BorderThickness="0,0,1,1"
                BorderBrush="Silver">
              </Border>

              <ContentControl
                VerticalAlignment="Center"
                HorizontalAlignment="Right"
                Margin="0,0,2,0"
                Content="{TemplateBinding Content}"></ContentControl>

              <Rectangle
                x:Name="RowResizer"
                Stretch="Fill"
                Height="4"
                Fill="Transparent"
                Cursor="SizeNS"
                MouseLeftButtonDown="RowResizer_MouseLeftButtonDown"
                MouseLeftButtonUp="RowResizer_MouseLeftButtonUp"
                MouseMove="RowResizer_MouseMove"
                VerticalAlignment="Bottom">
              </Rectangle>
            </Grid>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </UserControl.Resources>

  <Grid
    x:Name="LayoutRoot"
    Background="White">

  </Grid>
</UserControl>

22）C#文件

using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Shapes;

namespace T4Test.Sla
{
    /// <summary>
    /// T4DBGridRowResizeHelper_Res，行高调整资源容器。
    /// </summary>
    public partial class T4DBGridRowResizeHelper_Res : UserControl
    {
        //输入参数：需要实施行高调整的DataGrid。
        internal DataGrid MainDataGrid { get; set; }

        //输入参数：行高调整信息。
        internal T4DBGridRowResizeAttachInfo PIn { get; set; }

        //内部用变量。
        private CPri Pri = new CPri();
        private class CPri
        {
            //鼠标按下前的行高。
            public double OldRowHeight = default(double);

            //鼠标释放后的行高。
            public double NewRowHeight = default(double);

            //鼠标是否按下。
            public bool IsDown = false;

            //按下时的鼠标位置。
            public double OldY = default(double);

            //按住或释放事的鼠标位置。
            public double NewY = default(double);

            //行高调整预览线，弹出控件。
            public Popup PopPreview = default(Popup);

            //行高调整预览线，内容控件。
            public Rectangle RctPreview = default(Rectangle);
        }

        //构造函数。
        internal T4DBGridRowResizeHelper_Res()
        {
            InitializeComponent();
        }

        //调整指示器，鼠标左键按下。
        private void RowResizer_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            var Rct = sender as Rectangle;
            Pri.IsDown = true; Rct.CaptureMouse();
            Pri.OldRowHeight = this.MainDataGrid.RowHeight;
            Pri.OldY = e.GetPosition(null).Y; PreviewInit();
        }

        //调整指示器，鼠标移动。
        private void RowResizer_MouseMove(object sender, MouseEventArgs e)
        {
            if (Pri.IsDown) { Pri.NewY = e.GetPosition(null).Y; PreviewShow(); }
        }

        //调整指示器，鼠标左键释放。
        private void RowResizer_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            var Rct = sender as Rectangle;
            Pri.IsDown = false; Rct.ReleaseMouseCapture();
            Pri.NewY = (e.GetPosition(null)).Y; PreviewHide(); ResizeRows();
        }

        //行高调整预览线，初始化。
        private void PreviewInit()
        {
            Pri.RctPreview = new Rectangle()
            {
                Width = this.MainDataGrid.ActualWidth,
                Height = 1,
                StrokeThickness = 0,
                Fill = new SolidColorBrush(Colors.DarkGray),
            };
            Pri.PopPreview = new Popup()
            {
                IsOpen = false,
                Child = Pri.RctPreview,
                HorizontalOffset = GetUIControlAbsPos(this.MainDataGrid).Left,
            };
        }

        //行高调整预览线，显示。
        private void PreviewShow()
        {
            PreviewForceInRange();
            var NewOffset = Pri.NewY;
            Pri.PopPreview.VerticalOffset = NewOffset;
            Pri.PopPreview.IsOpen = true;
        }

        //行高调整预览线，隐藏。
        private void PreviewHide()
        {
            Pri.PopPreview.IsOpen = false;
            Pri.PopPreview.Visibility = Visibility.Collapsed;
        }

        //调整行高。
        private void ResizeRows()
        {
            PreviewForceInRange();
            Pri.NewRowHeight = Pri.OldRowHeight + Pri.NewY - Pri.OldY;
            this.MainDataGrid.RowHeight = Pri.NewRowHeight;
        }

        //确保行高调整预览线在合适范围内。
        private void PreviewForceInRange()
        {
            var TestValue = Pri.OldRowHeight + Pri.NewY - Pri.OldY;
            if (TestValue <= PIn.MinRowHeight)
            {
                Pri.NewY = PIn.MinRowHeight + Pri.OldY - Pri.OldRowHeight;
            }
            if (TestValue >= PIn.MaxRowHeight)
            {
                Pri.NewY = PIn.MaxRowHeight + Pri.OldY - Pri.OldRowHeight;
            }
        }

        //获取控件绝对位置。
        private Rect GetUIControlAbsPos(FrameworkElement TheUIControl)
        {
            var X = TheUIControl.TransformToVisual(Application.Current.RootVisual);
            var Y = new Rect()
            {
                X = 0,
                Y = 0,
                Height = TheUIControl.ActualHeight,
                Width = TheUIControl.ActualWidth
            };
            var Rlt = X.TransformBounds(Y);
            return Rlt;
        }
    }

    /// <summary>
    /// T4DBGridRowResizeAttachInfo，DataGrid行高调整信息定义。
    /// 写成依赖属性，主要是为了方便在xaml代码中绑定。
    /// </summary>
    public class T4DBGridRowResizeAttachInfo : DependencyObject
    {
        /// <summary>
        /// DefaultRowHeight，默认行高。
        /// </summary>
        public double DefaultRowHeight
        {
            get { return (double)GetValue(DefaultRowHeightProperty); }
            set { SetValue(DefaultRowHeightProperty, value); }
        }
        /// <summary>
        /// DefaultRowHeight，默认行高，依赖属性。
        /// </summary>
        public static readonly DependencyProperty DefaultRowHeightProperty =
            DependencyProperty.Register("DefaultRowHeight", typeof(double), typeof(T4DBGridRowResizeAttachInfo),
            new PropertyMetadata(20.0));

        /// <summary>
        /// MinRowHeight，最小行高。
        /// </summary>
        public double MinRowHeight
        {
            get { return (double)GetValue(MinRowHeightProperty); }
            set { SetValue(MinRowHeightProperty, value); }
        }
        /// <summary>
        /// MinRowHeight，最小行高，依赖属性。
        /// </summary>
        public static readonly DependencyProperty MinRowHeightProperty =
            DependencyProperty.Register("MinRowHeight", typeof(double), typeof(T4DBGridRowResizeAttachInfo),
            new PropertyMetadata(10.0));

        /// <summary>
        /// MaxRowHeight，最大行高。
        /// </summary>
        public double MaxRowHeight
        {
            get { return (double)GetValue(MaxRowHeightProperty); }
            set { SetValue(MaxRowHeightProperty, value); }
        }
        /// <summary>
        /// MaxRowHeight，最大行高，依赖属性。
        /// </summary>
        public static readonly DependencyProperty MaxRowHeightProperty =
            DependencyProperty.Register("MaxRowHeight", typeof(double), typeof(T4DBGridRowResizeAttachInfo),
            new PropertyMetadata(100.0));

        /// <summary>
        /// ShowRowNumberIf，是否显示行号(我想你也许还希望显示行号，干脆也给你们顺便搞好)。
        /// </summary>
        public bool ShowRowNumberIf
        {
            get { return (bool)GetValue(ShowRowNumberIfProperty); }
            set { SetValue(ShowRowNumberIfProperty, value); }
        }
        /// <summary>
        /// ShowRowNumberIf，是否显示行号，依赖属性。
        /// </summary>
        public static readonly DependencyProperty ShowRowNumberIfProperty =
            DependencyProperty.Register("ShowRowNumberIf", typeof(bool), typeof(T4DBGridRowResizeAttachInfo),
            new PropertyMetadata(false));

    }

    /// <summary>
    /// T4DBGridRowResizeAttacher,DataGrid行高调整附加类。
    /// 写成附加属性，主要是为了可以在xaml代码中方便使用。
    /// </summary>
    public class T4DBGridRowResizeAttacher : DependencyObject
    {
        /// <summary>
        /// 行高调整附加信息。
        /// </summary>
        public static T4DBGridRowResizeAttachInfo GetAttachInfo(DependencyObject obj)
        {
            return (T4DBGridRowResizeAttachInfo)obj.GetValue(AttachInfoProperty);
        }
        /// <summary>
        /// 行高调整附加信息。
        /// </summary>
        public static void SetAttachInfo(DependencyObject obj, T4DBGridRowResizeAttachInfo value)
        {
            obj.SetValue(AttachInfoProperty, value);
        }
        /// <summary>
        /// 行高调整附加信息。
        /// </summary>
        public static readonly DependencyProperty AttachInfoProperty =
            DependencyProperty.RegisterAttached("AttachInfo", typeof(T4DBGridRowResizeAttachInfo),
            typeof(T4DBGridRowResizeAttacher), new PropertyMetadata(null, AttachInfo_Changed));
       
        //附加信息变化，回调。
        private static void AttachInfo_Changed(DependencyObject s, DependencyPropertyChangedEventArgs e)
        {
            var Owner = s as DataGrid;
            if (Owner != null)
            {
                var Arg = (T4DBGridRowResizeAttachInfo)e.NewValue;
                if (Arg != null)
                {
                    var Res = new T4DBGridRowResizeHelper_Res() { MainDataGrid = Owner, PIn = Arg, };
                    Owner.RowHeight = Arg.DefaultRowHeight;
                    Owner.RowHeaderStyle = Res.CssResizableDataGridRowHeader;
                    var ShowRowNumberIf = GetAttachInfo(Owner).ShowRowNumberIf;
                    if (ShowRowNumberIf)
                    {
                        Owner.LoadingRow -= Owner_LoadingRow;
                        Owner.LoadingRow += Owner_LoadingRow;
                    }
                }
            }
        }

        //显示行号。
        private static void Owner_LoadingRow(object sender, DataGridRowEventArgs e)
        {
            var Owner = sender as DataGrid;
            var CurerntItem = e.Row.DataContext;
            var CurrentItemIndex = -1;
            foreach (var Item in Owner.ItemsSource)
            {
                CurrentItemIndex += 1;
                if (Item.Equals(CurerntItem)) { break; }
            }
            e.Row.Header = (CurrentItemIndex + 1) + "";
        }
    }

}

Answer 2

非常感谢！

Answer 3

你也可以使用 GridSplitter 控件来动态改变 DataGrid 的行高和列宽。以下是参考链接：

http://msdn.microsoft.com/en-us/library/ff382751(v=vs.95).aspx 

希望对你有帮助。

Answer 4

你也可以使用 GridSplitter 控件来动态改变 DataGrid 的行高和列宽。以下是参考链接：

http://msdn.microsoft.com/en-us/library/ff382751(v=vs.95).aspx 

希望对你有帮助。

这个可能不是提问者的本意。

据我所知，GridSpliter 运用于 Grid，而不是DataGrid。

也许你的回答，不仅不能“希望对你有帮助”，而恰恰相反，还可能是一个“误导”。如果你能把GridSplitter运用到 DataGrid，请给出示例，万分感谢。

Answer 5

大哥，我错了。。。

我看错了！

@TFSoft 谢谢你指出来