How to force a WPF DataGrid to fill containing Grid cell

Question

How to force a WPF DataGrid to fill containing Grid cell

David DeMoney 0

I have a DataGrid within a Grid, and want that DataGrid to fill the Grid cell, adding scroll bars when the content exceeds the available space. I have tried various options, but in most cases, when the content exceeds the space, the scroll bars are placed on the outer grid, instead of the DataGrid (and scrolling moves the DG headers off the page). The only partial solution I have found is to size the DataGrid based on a percentage of SystemParameters.PrimaryScreenWidth/Height - which is not ideal because it only works when app is maximized (and probably only on primary monitor).


        <Grid Grid.Row="1">
			<Grid.RowDefinitions>
				<RowDefinition Height="Auto"></RowDefinition>
				<RowDefinition Height="*" />
			</Grid.RowDefinitions>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Grid.Row="0" Grid.Column="0" Margin="5">
                <GroupBox Grid.Row="0" Grid.Column="0" Margin="5" Header="{x:Static p:Resources.kstrTypeOfEventLog}">
                    <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Margin="5,5,5,5">
                        <RadioButton x:Name="m_rbPrimary" Tag="4.0" Content="{x:Static p:Resources.kstrPrimary}" Margin="5,5,5,5" GroupName="EventType" IsChecked="True" Command="{Binding DisplayPrimaryEventCmd}" />
                        <RadioButton x:Name="m_rbAlternate" Tag="4.0" Content="{x:Static p:Resources.kstrAlternate}" Margin="5,5,5,5" GroupName="EventType" Command="{Binding DisplayAlternateEventCmd}" />
                    </StackPanel>
                </GroupBox>
                <Button Content="{x:Static p:Resources.kstrView}" Height="25" Padding="20,2" Margin="10,20" Command="{Binding ViewEventCmd}" IsEnabled="{Binding IsEnableViewButton}" />
                <Button Content="{x:Static p:Resources.kstrClear}" Height="25" Padding="20,2" Margin="10,20" Command="{Binding ClearTableCmd}" IsEnabled="{Binding IsEnableClearButton, Mode=OneWay}" />
            </StackPanel>
            <DataGrid Grid.Row="1" ItemsSource="{Binding EventList}" Grid.Column="0" RowHeaderWidth="0" AutoGenerateColumns="False" 
						CanUserResizeColumns="True" CanUserReorderColumns="False" CanUserAddRows="False" FrozenColumnCount="4" Margin="10" 
						MinWidth="{Binding ConverterParameter=0.6, Converter={helper:RatioConverter}, Source={x:Static SystemParameters.PrimaryScreenWidth}}" 
						MinHeight="{Binding ConverterParameter=0.5, Converter={helper:RatioConverter}, Source={x:Static SystemParameters.PrimaryScreenHeight}}" 					  
						MaxWidth="{Binding ConverterParameter=0.65, Converter={helper:RatioConverter}, Source={x:Static SystemParameters.PrimaryScreenWidth}}" 
						MaxHeight="{Binding ConverterParameter=0.7, Converter={helper:RatioConverter}, Source={x:Static SystemParameters.PrimaryScreenHeight}}" 					  
						Width="Auto" Height="Auto" VerticalAlignment="Stretch" HorizontalAlignment="Left">
                <DataGrid.Columns>
                    <DataGridTextColumn Header="{x:Static p:Resources.kstrSequenceNo}" Binding="{Binding Event_Seq}" Width="Auto" MinWidth="{Binding Source={x:Static SystemParameters.PrimaryScreenWidth}, Converter={helper:RatioConverter}, ConverterParameter='0.035'}" IsReadOnly="True" />
                    <DataGridTextColumn Header="{x:Static p:Resources.kstrTime}" Binding="{Binding Time}" Width="Auto" MinWidth="{Binding Source={x:Static SystemParameters.PrimaryScreenWidth}, Converter={helper:RatioConverter}, ConverterParameter='0.08'}" IsReadOnly="True" />
                    <DataGridTextColumn Header="{x:Static p:Resources.kstrUser}" Binding="{Binding User}" Width="Auto" MinWidth="{Binding Source={x:Static SystemParameters.PrimaryScreenWidth}, Converter={helper:RatioConverter}, ConverterParameter='0.03'}" IsReadOnly="True" />
                    <DataGridTextColumn Header="{x:Static p:Resources.kstrEventNo}" Binding="{Binding Event_No}" Width="Auto" MinWidth="{Binding Source={x:Static SystemParameters.PrimaryScreenWidth}, Converter={helper:RatioConverter}, ConverterParameter='0.03'}" IsReadOnly="True" />
                    <DataGridTextColumn Header="{x:Static p:Resources.kstrStdMfgId}" Binding="{Binding StdMfg_Id}" Width="Auto" MinWidth="{Binding Source={x:Static SystemParameters.PrimaryScreenWidth}, Converter={helper:RatioConverter}, ConverterParameter='0.03'}" IsReadOnly="True" />
                    <DataGridTextColumn Header="{x:Static p:Resources.kstrEventName}" Binding="{Binding Event_No_Description}" Width="Auto" MinWidth="{Binding Source={x:Static SystemParameters.PrimaryScreenWidth}, Converter={helper:RatioConverter}, ConverterParameter='0.15'}" IsReadOnly="True" />
                    <DataGridTextColumn Header="{x:Static p:Resources.kstrArgValue}" Binding="{Binding Event_Arg}" Width="Auto" MinWidth="{Binding Source={x:Static SystemParameters.PrimaryScreenWidth}, Converter={helper:RatioConverter}, ConverterParameter='0.035'}" IsReadOnly="True" />
                    <DataGridTextColumn Header="{x:Static p:Resources.kstrArgumentDescription}" Binding="{Binding Event_Arg_Description}" Width="Auto" MinWidth="{Binding Source={x:Static SystemParameters.PrimaryScreenWidth}, Converter={helper:RatioConverter}, ConverterParameter='0.3'}" IsReadOnly="True" />
                </DataGrid.Columns>
            </DataGrid>
        </Grid>

Reza Aghaei 4,986 Reputation points MVP Volunteer Moderator

2023-02-01T23:50:32.0333333+00:00

An image which demonstrates the expected behavior may help.
David DeMoney 0 Reputation points

2023-02-02T00:55:32.9466667+00:00

This is screen shot with Window maximized and include parameters to set min/max height/width based on Screen size. This is closest I could get to what I want, but it still does not fill the grid cell.
David DeMoney 0 Reputation points

2023-02-02T00:57:07.0066667+00:00

This is same as above but app is not maximized. Now the scroll bars move out to the outer grid. I want the DataGrid to resize in the available space & have its own scroll bars.
David DeMoney 0 Reputation points

2023-02-02T00:59:18.9833333+00:00

This is without the parameters to set min/max height/width, with empty DataGrid. Here, at least the width is what I like.
David DeMoney 0 Reputation points

2023-02-02T01:02:42.89+00:00
Again without max/min height/width, now with control populated. Scroll bars are on outer grid instead of data grid.
David DeMoney 0 Reputation points

2023-02-02T01:04:15.73+00:00

Finally, if I scroll the above, the top the grid and the DataGrid header scroll of the page. I want both to continue to be visible.
Hui Liu-MSFT 48,681 Reputation points Microsoft External Staff

2023-02-10T06:58:06.05+00:00

Hi,@David DeMoney . Could you show me the sample code that reproduces your problem for analysis?
David DeMoney 0 Reputation points

2023-02-10T19:44:52.18+00:00

I have posted sample code below. Is this sufficient?

David DeMoney 0

Model code.


using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Diagnostics;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;

namespace Sample
{
	public class EventViewModel : INotifyPropertyChanged
	{
		private ObservableCollection<EventEntry> _EventList = new ObservableCollection<EventEntry>();
		private readonly ICommand viewEventCmd;
		public EventViewModel()
		{
			viewEventCmd = new RelayCommand(ViewEventClick);
		}


		public void RefreshPermissions() { }

		public ICommand ViewEventCmd { get { return viewEventCmd; } }


		private async void ViewEventClick(object clsObject)
		{
			// Multi-threading
			Task clsTask = new Task(ViewEvent);
			clsTask.Start();
			await clsTask;
		}
		private void ViewEvent()
		{
			try
			{
				EventList = new ObservableCollection<EventEntry>(GetDisplayData());
			}
			catch (Exception)
			{

			}
			finally
			{

			}
		}

		public List<EventEntry> GetDisplayData()
		{
			List<EventEntry> evList = new List<EventEntry>();
			DateTime dt = DateTime.Now;

			for (int i = 0; i < 150; i++)
			{
				EventEntry ev = new EventEntry(i.ToString(), dt.ToShortDateString() + " " + dt.ToShortTimeString(),
					"User", i.ToString(), "M_____" + i.ToString(), 
					"------------------Description----------------", "Code", "-----------------CodeDesc------------------");

				evList.Add(ev);
			}
			return evList;
		}


		public ObservableCollection<EventEntry> EventList
		{
			get { return _EventList; }
			set
			{
				_EventList = value;
				OnPropertyChanged("EventList");
			}
		}
		public event PropertyChangedEventHandler PropertyChanged;

		protected virtual void OnPropertyChanged(string propertyName)
		{
			PropertyChangedEventHandler pceh = PropertyChanged;
			if (pceh != null)
			{
				pceh(this, new PropertyChangedEventArgs(propertyName));
			}
		}

	}

	public class EventEntry
	{
		public EventEntry() { }
		public EventEntry(string _event_Seq, string _time, string _user, string _event_No, string _stdMfg_Id, string _event_No_Description, string _event_Code, string _event_Arg_Description)
		{
			Time = _time;
			User = _user;
			Event_Seq = _event_Seq;
			Event_No = _event_No;
			StdMfg_Id = _stdMfg_Id;
			Event_No_Description = _event_No_Description;
			Event_Arg = _event_Code;
			Event_Arg_Description = _event_Arg_Description;
		}

		public string Time { set; get; } = "";
		public string User { set; get; } = "";
		public string Event_Seq { set; get; } = "";
		public string Event_No { set; get; } = "";
		public string StdMfg_Id { set; get; } = "";
		public string Event_No_Description { set; get; } = "";
		public string Event_Arg { set; get; } = "";
		public string Event_Arg_Description { set; get; } = "";
	}

	public class RelayCommand : ICommand
	{
		#region Fields

		readonly Action<object> _execute;
		readonly Predicate<object> _canExecute;

		#endregion // Fields

		#region Constructors

		/// <summary>
		/// Creates a new command that can always execute.
		/// </summary>
		/// <param name="execute">The execution logic.</param>
		public RelayCommand(Action<object> execute)
			: this(execute, null)
		{
		}

		/// <summary>
		/// Creates a new command.
		/// </summary>
		/// <param name="execute">The execution logic.</param>
		/// <param name="canExecute">The execution status logic.</param>
		public RelayCommand(Action<object> execute, Predicate<object> canExecute)
		{
			if (execute == null)
				throw new ArgumentNullException(@"execute");

			_execute = execute;
			_canExecute = canExecute;
		}

		#endregion // Constructors

		#region ICommand Members

		[DebuggerStepThrough]
		public bool CanExecute(object parameter)
		{
			return _canExecute == null ? true : _canExecute(parameter);
		}

		public event EventHandler CanExecuteChanged
		{
			add { CommandManager.RequerySuggested += value; }
			remove { CommandManager.RequerySuggested -= value; }
		}

		public void Execute(object parameter)
		{
			_execute(parameter);
		}

		#endregion // ICommand Members
	}
}

David DeMoney 0

Sample XAML


<UserControl x:Class="Sample.EventView" 
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:helper="clr-namespace:Sample.Helper">
	<UserControl.Resources>
		<Style TargetType="TextBlock">
			<Setter Property="Height" Value="40" />
		</Style>
		<Style TargetType="TextBox">
			<Setter Property="HorizontalAlignment" Value="Left" />
			<Setter Property="Margin" Value="0,5" />
			<Setter Property="Height" Value="30" />
			<Setter Property="Width" Value="Auto" />
		</Style>
	</UserControl.Resources>
	<Grid>
		<Grid.RowDefinitions>
			<RowDefinition Height="40" />
			<RowDefinition Height="*" />
		</Grid.RowDefinitions>
		<TextBlock Grid.Row="0" x:Name="m_lbleventView" Text="View Event Log" Background="#0078D7" FontSize="16" Foreground="White" HorizontalAlignment="Stretch" Padding="10,8,0,0" />
		<Grid Grid.Row="1">
			<Grid.RowDefinitions>
				<RowDefinition Height="Auto"></RowDefinition>
				<RowDefinition Height="*" />
			</Grid.RowDefinitions>
			<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Grid.Row="0" Grid.Column="0" Margin="5">
				<GroupBox Grid.Row="0" Grid.Column="0" Margin="5" Header="Event Log Type">
					<StackPanel Orientation="Horizontal" VerticalAlignment="Center" Margin="5,5,5,5">
						<RadioButton x:Name="m_rbPrimary" Tag="4.0" Content="Primary" Margin="5,5,5,5" GroupName="EventType" IsChecked="True" Command="{Binding DisplayPrimaryEventCmd}" />
						<RadioButton x:Name="m_rbAlternate" Tag="4.0" Content="Alternate" Margin="5,5,5,5" GroupName="EventType" Command="{Binding DisplayAlternateEventCmd}" />
					</StackPanel>
				</GroupBox>
				<Button Content="View" Height="25" Padding="20,2" Margin="10,20" Command="{Binding ViewEventCmd}" IsEnabled="{Binding IsEnableViewButton}" />
				<Button Content="Clear" Height="25" Padding="20,2" Margin="10,20" Command="{Binding ClearTableCmd}" IsEnabled="{Binding IsEnableClearButton, Mode=OneWay}" />
			</StackPanel>
			<!-- -->
			<DataGrid Grid.Row="1" ItemsSource="{Binding EventList}" Grid.Column="0" RowHeaderWidth="0" AutoGenerateColumns="False" 
						CanUserResizeColumns="True" CanUserReorderColumns="False" CanUserAddRows="False" FrozenColumnCount="4" Margin="10" 		  
						Width="Auto"  VerticalAlignment="Stretch" HorizontalAlignment="Left" VerticalScrollBarVisibility="Visible"
					    HorizontalScrollBarVisibility="Visible">
				<DataGrid.Columns>
					<DataGridTextColumn Header="Seq No" Binding="{Binding Event_Seq}" Width="Auto" MinWidth="{Binding Source={x:Static SystemParameters.PrimaryScreenWidth}, Converter={helper:RatioConverter}, ConverterParameter='0.035'}" IsReadOnly="True" />
					<DataGridTextColumn Header="Date/Time" Binding="{Binding Time}" Width="Auto" MinWidth="{Binding Source={x:Static SystemParameters.PrimaryScreenWidth}, Converter={helper:RatioConverter}, ConverterParameter='0.2'}" IsReadOnly="True" />
					<DataGridTextColumn Header="User" Binding="{Binding User}" Width="Auto" MinWidth="{Binding Source={x:Static SystemParameters.PrimaryScreenWidth}, Converter={helper:RatioConverter}, ConverterParameter='0.03'}" IsReadOnly="True" />
					<DataGridTextColumn Header="Event No" Binding="{Binding Event_No}" Width="Auto" MinWidth="{Binding Source={x:Static SystemParameters.PrimaryScreenWidth}, Converter={helper:RatioConverter}, ConverterParameter='0.03'}" IsReadOnly="True" />
					<DataGridTextColumn Header="Mfg Id" Binding="{Binding StdMfg_Id}" Width="Auto" MinWidth="{Binding Source={x:Static SystemParameters.PrimaryScreenWidth}, Converter={helper:RatioConverter}, ConverterParameter='0.03'}" IsReadOnly="True" />
					<DataGridTextColumn Header="Event Name" Binding="{Binding Event_No_Description}" Width="Auto" MinWidth="{Binding Source={x:Static SystemParameters.PrimaryScreenWidth}, Converter={helper:RatioConverter}, ConverterParameter='0.35'}" IsReadOnly="True" />
					<DataGridTextColumn Header="Arg" Binding="{Binding Event_Arg}" Width="Auto" MinWidth="{Binding Source={x:Static SystemParameters.PrimaryScreenWidth}, Converter={helper:RatioConverter}, ConverterParameter='0.035'}" IsReadOnly="True" />
					<DataGridTextColumn Header="Arg description" Binding="{Binding Event_Arg_Description}" Width="Auto" MinWidth="{Binding Source={x:Static SystemParameters.PrimaryScreenWidth}, Converter={helper:RatioConverter}, ConverterParameter='0.3'}" IsReadOnly="True" />
				</DataGrid.Columns>
			</DataGrid>
			
			<!--
			<ListView Grid.Row="1"  SelectionMode="Single" ItemsSource="{Binding EventList}" >
				<ListView.View>
					<GridView>
						<GridViewColumn Header="Seq No" DisplayMemberBinding="{Binding Event_Seq}" Width="Auto"  />
						<GridViewColumn Header="Date/Time" DisplayMemberBinding="{Binding Time}" Width="Auto"  />
						<GridViewColumn Header="User" DisplayMemberBinding="{Binding User}" Width="Auto"  />
						<GridViewColumn Header="Event No" DisplayMemberBinding="{Binding Event_No}" Width="Auto"  />
						<GridViewColumn Header="Mfg Id" DisplayMemberBinding="{Binding StdMfg_Id}" Width="Auto"  />
						<GridViewColumn Header="Event Name" DisplayMemberBinding="{Binding Event_No_Description}" Width="Auto"  />
						<GridViewColumn Header="Arg" DisplayMemberBinding="{Binding Event_Arg}" Width="Auto"  />
						<GridViewColumn Header="Arg description" DisplayMemberBinding="{Binding Event_Arg_Description}" Width="Auto"  />

					</GridView>
				</ListView.View>
			</ListView>
			-->
		</Grid>
	</Grid>
</UserControl>

David DeMoney 0

Also just modified the default main window to include a StackPanel with my control.


<Window x:Class="Sample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Sample"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
	<Grid>
		<Grid.RowDefinitions>
			<RowDefinition Height="*">			
			</RowDefinition>
		</Grid.RowDefinitions>
		<StackPanel x:Name="container" Grid.Row="0">
			<local:EventView/>

		</StackPanel>
	</Grid>
</Window>

David DeMoney 0

Also, added Helper class to compute proportional values.

Note that this sample does not behave exactly like my app. However, the DataGrid goes beyond the containing StackPanel and Grid, and there is no way to access lines not in main view.


using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Data;
using System.Windows.Markup;

namespace Sample.Helper
{
	[ValueConversion(typeof(string), typeof(string))]
	public class RatioConverter : MarkupExtension, IValueConverter
	{
		private static RatioConverter _instance = new RatioConverter();

		public RatioConverter() { }

		public object Convert(object value, Type targetType, object param, CultureInfo culture)
		{
			double size = 0.0;
			if (value != null)
			{
				size = ConvertDouble(value.ToString()) * System.Convert.ToDouble(param, CultureInfo.InvariantCulture);
			}
			return size.ToString("G0", CultureInfo.InvariantCulture);
		}

		public static double ConvertDouble(string strValue)
		{
			CultureInfo ci = (CultureInfo)CultureInfo.CurrentCulture.Clone();
			ci.NumberFormat.CurrencyDecimalSeparator = ".";
			return double.Parse(strValue, NumberStyles.Any, ci);
		}

		// read only converter
		public object ConvertBack(object value, Type targetType, object param, CultureInfo culture)
		{
			throw new NotImplementedException();
		}

		public override object ProvideValue(IServiceProvider serviceProvider)
		{
			return _instance ?? (_instance = new RatioConverter());
		}

	}
}

Your answer

Reza Aghaei 4,986 Reputation points MVP Volunteer Moderator

2023-02-01T23:50:32.0333333+00:00

An image which demonstrates the expected behavior may help.
David DeMoney 0 Reputation points

2023-02-02T00:55:32.9466667+00:00

This is screen shot with Window maximized and include parameters to set min/max height/width based on Screen size. This is closest I could get to what I want, but it still does not fill the grid cell.
David DeMoney 0 Reputation points

2023-02-02T00:57:07.0066667+00:00

This is same as above but app is not maximized. Now the scroll bars move out to the outer grid. I want the DataGrid to resize in the available space & have its own scroll bars.
David DeMoney 0 Reputation points

2023-02-02T00:59:18.9833333+00:00

This is without the parameters to set min/max height/width, with empty DataGrid. Here, at least the width is what I like.
David DeMoney 0 Reputation points

2023-02-02T01:02:42.89+00:00

Again without max/min height/width, now with control populated. Scroll bars are on outer grid instead of data grid.
David DeMoney 0 Reputation points

2023-02-02T01:04:15.73+00:00

Finally, if I scroll the above, the top the grid and the DataGrid header scroll of the page. I want both to continue to be visible.
Hui Liu-MSFT 48,681 Reputation points Microsoft External Staff

2023-02-10T06:58:06.05+00:00

Hi,@David DeMoney . Could you show me the sample code that reproduces your problem for analysis?
David DeMoney 0 Reputation points

2023-02-10T19:44:52.18+00:00

I have posted sample code below. Is this sufficient?
David DeMoney 0 Reputation points

2023-02-11T00:41:53.4733333+00:00

Also just modified the default main window to include a StackPanel with my control.

<Window x:Class="Sample.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:Sample" mc:Ignorable="d" Title="MainWindow" Height="450" Width="800"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="*"> </RowDefinition> </Grid.RowDefinitions> <StackPanel x:Name="container" Grid.Row="0"> <local:EventView/> </StackPanel> </Grid> </Window>
David DeMoney 0 Reputation points

2023-02-11T00:44:29.6933333+00:00

Also, added Helper class to compute proportional values.

Note that this sample does not behave exactly like my app. However, the DataGrid goes beyond the containing StackPanel and Grid, and there is no way to access lines not in main view.

using System; using System.Collections.Generic; using System.Globalization; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Data; using System.Windows.Markup; namespace Sample.Helper { [ValueConversion(typeof(string), typeof(string))] public class RatioConverter : MarkupExtension, IValueConverter { private static RatioConverter _instance = new RatioConverter(); public RatioConverter() { } public object Convert(object value, Type targetType, object param, CultureInfo culture) { double size = 0.0; if (value != null) { size = ConvertDouble(value.ToString()) * System.Convert.ToDouble(param, CultureInfo.InvariantCulture); } return size.ToString("G0", CultureInfo.InvariantCulture); } public static double ConvertDouble(string strValue) { CultureInfo ci = (CultureInfo)CultureInfo.CurrentCulture.Clone(); ci.NumberFormat.CurrencyDecimalSeparator = "."; return double.Parse(strValue, NumberStyles.Any, ci); } // read only converter public object ConvertBack(object value, Type targetType, object param, CultureInfo culture) { throw new NotImplementedException(); } public override object ProvideValue(IServiceProvider serviceProvider) { return _instance ?? (_instance = new RatioConverter()); } } }

Share via

How to force a WPF DataGrid to fill containing Grid cell

Your answer