Reputation: 1061
I have this DataGrid which looks like this when I load data for the first time:
so, its almost perfect but what I really want is shown when I resize the Window to maximum - the columns are now layouted like this:
I would like to layout the right most columns at the right part of the DataGrid view and have the left column allocate the rest of the view.
My question is: Can I invoke an event on the DataGrid to cause this layouting of the columns that would otherwise only occur when the Window is maximized?
The simplified version of the DataGrid's XAML looks like this:
<DataGrid
ItemsSource="{Binding ItemsSource, RelativeSource={RelativeSource TemplatedParent}}"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
ScrollViewer.HorizontalScrollBarVisibility="Hidden"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.CanContentScroll="True"
AutoGenerateColumns="False"
GridLinesVisibility="None"
ColumnWidth="*">
<DataGrid.Columns>
<DataGridTemplateColumn Width="*" Header="Name">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="1"
Text="{Binding ItemName}"
ToolTipService.ShowOnDisabled="true"
>
</TextBlock>
</Grid>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Width="Auto" Header="Size">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock
Text="{Binding ItemLengthA}"
HorizontalAlignment="Right"
Margin="3,0,0,0"
/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Width="Auto" Header="Modified">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock
Text="{Binding ItemLastUpdateA}"
HorizontalAlignment="Right"
Margin="3,0,0,0"
/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
I also have working application/control to inspect here but I think looking at the above XAML should be enough to find a solution based on the given layout.
Upvotes: 2
Views: 660
Reputation: 1341
I've tried to reproduce your case and came to the result: It depends on how you will the ItemsSource. In case ItemsSource in ViewModel is a List, then you can just Assign a new instance to it, and call the PropertyChanged Event. This will cause the columns to behave like you want (Width="Auto").
ItemsSource = new List<Data>();
// ItemsSource.Add(new Data()); // ..adding data
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(ItemsSource)));
However, as it's currently not working, I guess that you have maybe a ObservableCollection as ItemsSource, and you are adding Items there. In my tests, it behaves as you descriped, columns stay small, unless resizing of the Window oder the columns manually.
public ObservableCollection<Data> ItemsSource { get; set; }
public void AddItems()
{
ItemsSource.Add(new Data()); // not working
}
The only way I've found to force the grid to do it, was, to Unset the Column Width from Auto to some value, and then back. Is used a button to do this. but Any Onload would also work
private void Button_Click(object sender, RoutedEventArgs e)
{
foreach (DataGridTemplateColumn item in MyDataGrid.Columns)
{
if (item.Width.IsAuto)
{
item.Width = new DataGridLength(item.ActualWidth, item.Width.UnitType);
item.Width = DataGridLength.Auto;
}
}
}
Upvotes: 1