I have a UserControl that contains a WPF DataGrid with column widths set to either Auto or Star(*) - see code below:
<UserControl
x:Class="DFMStockroomWPF.Views.Dashboard.MessagesWidget"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:converters="clr-namespace:DFMStockroomWPF.Views.XamlConverters"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:dashboard="clr-namespace:DFMStockroomWPF.ViewModels.Dashboard;assembly=DFMStockroomWPF.ViewModels"
xmlns:gif="http://wpfanimatedgif.codeplex.com"
xmlns:local="clr-namespace:DFMStockroomWPF.Views.Dashboard"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DataContext="{d:DesignInstance Type=dashboard:MessagesWidgetViewModel}"
d:DesignHeight="400"
d:DesignWidth="800"
mc:Ignorable="d">
<UserControl.Resources>
<converters:PriorityToBrushConverter x:Key="PriorityToBrushConverter" />
</UserControl.Resources>
<Border
BorderBrush="Gray"
BorderThickness="1"
CornerRadius="10">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- Header -->
<Border
Grid.Row="0"
Grid.ColumnSpan="2"
Background="#2980B9"
CornerRadius="10,10,0,0">
<TextBlock
Padding="0,5"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
FontSize="16"
Foreground="White"
Text=":: Messageboard ::"
TextAlignment="Center" />
</Border>
<Button
x:Name="NewMessageButton"
Grid.Column="0"
Width="36"
Height="36"
Margin="10,0,10,0"
HorizontalAlignment="Left"
Background="Transparent"
BorderBrush="Transparent"
Click="NewMessageButton_Click"
ToolTip="Help">
<Image
x:Name="NewMessageImage"
Width="26"
Height="26"
Source="pack://application:,,,/DFMStockroomWPF.Views;component/Resources/newmessage.png"
Stretch="Fill"
ToolTip="Create New Message" />
</Button>
<StackPanel
Grid.Column="1"
HorizontalAlignment="Right"
Orientation="Horizontal">
<Button
x:Name="MessageBoardRefreshButton"
Grid.Column="1"
Width="36"
Height="36"
Margin="0,0,10,0"
HorizontalAlignment="Right"
Background="Transparent"
BorderBrush="Transparent"
Click="MessageBoardRefreshButton_Click"
ToolTip="Help">
<Image
x:Name="MessageBoardRefreshImage"
Width="26"
Height="26"
Source="pack://application:,,,/DFMStockroomWPF.Views;component/Resources/refreshicon_small.png"
Stretch="Fill"
ToolTip="Refresh Message Board" />
</Button>
<Button
x:Name="MessageBoardHelpButton"
Grid.Column="1"
Width="36"
Height="36"
Margin="0,0,10,0"
HorizontalAlignment="Right"
Background="Transparent"
BorderBrush="Transparent"
Click="MessageBoardHelpButton_Click"
ToolTip="Help">
<Image
x:Name="MessageBoardHelpImage"
Width="32"
Height="32"
gif:ImageBehavior.AnimatedSource="pack://application:,,,/DFMStockroomWPF.Views;component/Resources/helpicon_animated.gif"
gif:ImageBehavior.AutoStart="False"
Stretch="Fill"
ToolTip="Message Board Help" />
</Button>
</StackPanel>
<Grid Grid.Row="1" Grid.ColumnSpan="2">
<DataGrid
x:Name="MessagesWidgetDataGrid"
Margin="5"
HorizontalAlignment="Stretch"
AlternatingRowBackground="LightGray"
AutoGenerateColumns="False"
CanUserAddRows="False"
CanUserReorderColumns="False"
ColumnWidth="*"
HeadersVisibility="Column"
HorizontalScrollBarVisibility="Auto"
ItemsSource="{Binding MessageList}"
MouseDoubleClick="MessagesWidgetDataGrid_MouseDoubleClick"
SelectedItem="{Binding SelectedMessage}"
ToolTip="All unread messages are displayed in bold. Messages are colored according to Priority.">
<DataGrid.Resources>
<Style TargetType="DataGridRow">
<Style.Triggers>
<!-- Bold unread messages -->
<DataTrigger Binding="{Binding IsRead}" Value="False">
<Setter Property="FontWeight" Value="Bold" />
</DataTrigger>
<!-- Foreground color by Priority -->
<DataTrigger Binding="{Binding Priority}" Value="Critical">
<Setter Property="Foreground" Value="Red" />
</DataTrigger>
<DataTrigger Binding="{Binding Priority}" Value="High">
<Setter Property="Foreground" Value="Purple" />
</DataTrigger>
<DataTrigger Binding="{Binding Priority}" Value="Normal">
<Setter Property="Foreground" Value="Orange" />
</DataTrigger>
<DataTrigger Binding="{Binding Priority}" Value="Low">
<Setter Property="Foreground" Value="Green" />
</DataTrigger>
</Style.Triggers>
</Style>
</DataGrid.Resources>
<DataGrid.Columns>
<DataGridTextColumn
x:Name="MsgPriorityGridColumn"
Width="Auto"
Binding="{Binding Priority}"
Header="Msg Priority"
IsReadOnly="True" />
<DataGridTextColumn
x:Name="MsgFromGridColumn"
Width="Auto"
Binding="{Binding From}"
Header="From"
IsReadOnly="True" />
<DataGridTextColumn
x:Name="MsgSubjectGridColumn"
Width="*"
Binding="{Binding Subject}"
Header="Subject"
IsReadOnly="True" />
<DataGridTextColumn
x:Name="MsgDateGridColumn"
Width="Auto"
Binding="{Binding CreateDate}"
Header="Timestamp" />
</DataGrid.Columns>
</DataGrid>
</Grid>
</Grid>
</Border>
In the designer the effect of setting these widths works correctly, but at runtime not - see screenshot below:
Note that I tried both setting all columns widths to 1*, 1*, 3* and 1* as well as the current Auto, Auto, *, Auto... Both have exact same result at runtime but shows correctly in designer.
EDIT I tried adding the usercontrol containing the grid to an empty WINDOW - to see if I get same results. In that version the datagrid columns resize perfectly as they should (Thank you Dragan for giving me this idea). In other words SOMETHING ELSE is causing this... Its a lot of code to paste here but I will try...
this is the PAGE where the usercontrol is hosted (see "MessagesWidgetViewerControl"):
<Page
x:Class="DFMStockroomWPF.Views.MainDashboardPage"
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:dashboardcontrols="clr-namespace:DFMStockroomWPF.Views.Dashboard"
xmlns:local="clr-namespace:DFMStockroomWPF.Views"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
Title="Dashboard"
d:DesignHeight="450"
d:DesignWidth="800"
FontSize="16"
mc:Ignorable="d">
<Grid x:Name="SchedulerContainer" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ContentControl
x:Name="MessagesWidgetViewerControl"
Grid.Row="0"
MinHeight="200"
Margin="5"
Padding="5"
HorizontalAlignment="Stretch"
VerticalAlignment="Top" />
<ContentControl
x:Name="StocklevelsWidgetViewerControl"
Grid.Row="1"
Margin="5"
Padding="5"
HorizontalAlignment="Stretch" />
</Grid>
<Grid Grid.Column="1">
<ContentControl
x:Name="CalendarWidgetViewerControl"
Margin="5"
Padding="5"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" />
</Grid>
</Grid>
This PAGE in turn is hosted in a FRAME (name=_mainFrame) on a WINDOW - this WINDOW is the "Main" window of the application. See Window code below:
<Window
x:Class="DFMStockroomWPF.Views.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:anims="clr-namespace:DFMStockroomWPF.Views.XamlAnimations"
xmlns:converters="clr-namespace:DFMStockroomWPF.Views.XamlConverters"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:datawidgets="clr-namespace:DFMStockroomWPF.Views.DataWidgets"
xmlns:local="clr-namespace:DFMStockroomWPF.Views"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:navigation="clr-namespace:DFMStockroomWPF.Views.NavigationControls"
xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
xmlns:vm="clr-namespace:DFMStockroomWPF.ViewModels;assembly=DFMStockroomWPF.ViewModels"
Title="DFM Stockroom 2025"
Width="1200"
Height="700"
d:DataContext="{d:DesignInstance Type=vm:MainWindowViewModel}"
Icon="/DFMStockroomWPF.Views;component/appicon.png"
WindowStartupLocation="CenterScreen"
mc:Ignorable="d">
<Window.Resources>
<!--REMOVED FOR BREVITY-->
</Window.Resources>
<Grid ClipToBounds="False">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
<RowDefinition Height="auto" />
<RowDefinition x:Name="FooterRow" Height="50" />
</Grid.RowDefinitions>
<navigation:TopNavigationBar Grid.Row="0" NavigationButtonClick="TopNavigationBar_NavigationButtonClick" />
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="25" />
</Grid.ColumnDefinitions>
<Label
x:Name="SideNavigationLabel"
Grid.Column="0"
Padding="10"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Content="Select category above..."
FontSize="14"
FontStyle="Italic"
Foreground="Black" />
<navigation:SideNavigationMenu
x:Name="SideNavMenu"
Grid.Column="0"
Margin="0"
Background="Transparent"
NavigationButtonClick="SideNavMenu_NavigationButtonClick" />
<GridSplitter
Grid.Column="1"
Width="3"
HorizontalAlignment="Center"
VerticalAlignment="Stretch"
Background="Gray"
ResizeDirection="Columns"
ShowsPreview="True" />
<ScrollViewer
Grid.Column="2"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto">
<Frame
x:Name="_mainFrame"
Grid.Column="2"
Margin="0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
NavigationUIVisibility="Visible" />
</ScrollViewer>
</Grid>
<!--REMOVED FOR BREVITY-->
</Grid>
<!-- Right Sliding Panel -->
<!--REMOVED FOR BREVITY-->
</Grid>
Somewhere in the WINDOW, FRAME in that WINDOW, PAGE in that FRAME containing this UserControl is something breaking the widths. I cannot figure out what....
ANOTHER EDIT I took the test a step further by hosting a frame on the testpage with the dashboardpage containing the usercontorl - all still works. So the issue I think is in MainWindow...
Ok, Thanks to Dragan and many many tests I actually did figure it out. This is where the problem was:
<ScrollViewer
Grid.Column="2"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto">
<Frame
x:Name="_mainFrame"
Grid.Column="2"
Margin="0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
NavigationUIVisibility="Visible" />
</ScrollViewer>
The ScrollViewer broke the widths... As soon as I removed that, all works as expected.
Dragan, I would like you to get the credit for this solution - how do I do that?