WPF UserControl component grid definition issue

Question

I have simple UserControl with two columns and in first column I have DataGrid:

<UserControl x:Class="Caliburn_SimpleInjector_Sample.ViewModel.ShellView"
             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"
             mc:Ignorable="d"
             MinWidth="1100" MinHeight="400">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width=".20*" />
            <ColumnDefinition Width="5" />
            <ColumnDefinition Width=".70*" />
        </Grid.ColumnDefinitions>
        <DataGrid Grid.Row="0" Grid.Column="0" ItemsSource="{Binding Path=Tasks, Mode=OneWay}"
                  SelectedItem="{Binding SelectedTask}"
                  AutoGenerateColumns="False" IsReadOnly="True"
                  CanUserResizeRows="False" GridLinesVisibility="None"
                  SelectionUnit="FullRow"
                  RowHeaderWidth="0"
                  FontSize="14">
            <DataGrid.CellStyle>
                <Style TargetType="DataGridCell">
                    <Setter Property="BorderThickness" Value="0" />
                    <Setter Property="FocusVisualStyle" Value="{x:Null}" />
                </Style>
            </DataGrid.CellStyle>
            <DataGrid.Columns>
                <DataGridTextColumn Header="Col 1" Binding="{Binding Find}" />
                <DataGridTextColumn Header="Col 2" Binding="{Binding Action}" />
                <DataGridTextColumn Header="Col 3" Binding="{Binding Status}" />
            </DataGrid.Columns>
        </DataGrid>

        <GridSplitter Grid.Row="0" Grid.Column="1"
                      VerticalAlignment="Stretch"
                      ResizeBehavior="PreviousAndNext"
                      Width="5" Background="#FFBCBCBC" />

        <StackPanel Grid.Row="0" Grid.Column="2" Background="Red"></StackPanel>
    </Grid>
</UserControl>

Let's take a look what we have:

Perfect! That's exactly what I need.

But! If I just try to set dynamic Width for each column inside of DataGrid, the whole template becomes broken:

<DataGrid.Columns>
    <DataGridTextColumn Width="0.2*" Header="Col 1 20%" Binding="{Binding Find}" />
    <DataGridTextColumn Width="0.2*" Header="Col 2 20%" Binding="{Binding Action}" />
    <DataGridTextColumn Width="0.6*" Header="Col 3 60%" Binding="{Binding Status}" />
</DataGrid.Columns>

And here is the result:

And also one interesting thing. If you try to start resize the window - then all becomes normal, example: ScreenCast

Could someone assist me with this issue?

Thanks in advance.

Does it happen when you set `HorizontalAllignment="Stretch"` for data grid? — praty, Jun 28 '17 at 17:38
@Rostislav, can you also include window markup? I can't reproduce the issue with control code — ASh, Jun 28 '17 at 17:48
@ASh, hmmm... Strange. I also can't reproduce it on clear WPF. But I using Caliburn.Micro, and this framework has own WindowManager, so maybe we have problem there. Code for reproduce: [code.](https://github.com/rolshevsky/Caliburn-SimpleInjector-Sample) — Rostislav Olshevsky, Jun 28 '17 at 18:00

score 0 · Answer 1 · answered Jun 29 '17 at 03:03

Have you tried combination of MinWidth and Width with *? See example below:

<DataGrid.Columns>
<DataGridTextColumn MinWidth="0.2" Width="*" Header="Col 1 20%" Binding="{Binding Find}" />
<DataGridTextColumn MinWidth="0.2" Width="*" Header="Col 2 20%" Binding="{Binding Action}" />
<DataGridTextColumn MinWidth="0.6" Width="*" Header="Col 3 60%" Binding="{Binding Status}" /></DataGrid.Columns>

score 0 · Answer 2 · answered Jun 29 '17 at 05:56

0

Just set the control window width and height

<UserControl x:Class="Caliburn_SimpleInjector_Sample.ViewModel.ShellView"
             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"
             mc:Ignorable="d"
             MinWidth="1100" MinHeight="400"
             Width="1100" Height="400"
             >

Control will behave perfectly

answered Jun 29 '17 at 05:56

Syed

98
7

yeah, but unfortunately this option is not for me. I need to keep all components `autoresizable`. If you define this `Width` and `Height` then `autoresize` stops working. Just take a look on `maximized window` mode [without `Width` and `Height`](http://img.in6k.com/screens/Caliburn-SimpleInjector-Sample_2017-06-29_10-40-52.png), [and with](http://img.in6k.com/screens/Caliburn-SimpleInjector-Sample_2017-06-29_10-41-59.png). So as you can see `autoresize` stops working if we define `Width` and `Height`, but this feature is important for me. – Rostislav Olshevsky Jun 29 '17 at 07:46

score 0 · Answer 3 · answered Jun 30 '17 at 05:20

The problem lies in empty StackPanel. You are using * for dynamic DataGridTextColumn width.

(star) take up any available remaining space

As discussed in detail at: Meaning of * (asterisk) in a WPF ColumnDefinition? (weighted proportion of available space)

Just fill the StackPanel with controls or to get an idea, replace the StackPanel with the duplicate of DataGrid definition. As sample demo will be like:

    <UserControl x:Class="Caliburn_SimpleInjector_Sample.ViewModel.ShellView"
             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"
             mc:Ignorable="d"
             MinWidth="1100" MinHeight="400">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width=".20*" />
            <ColumnDefinition Width="5" />
            <ColumnDefinition Width=".70*" />
        </Grid.ColumnDefinitions>
        <DataGrid Grid.Row="0" Grid.Column="0" ItemsSource="{Binding Path=Tasks, Mode=OneWay}"
                  SelectedItem="{Binding SelectedTask}"
                  AutoGenerateColumns="False" IsReadOnly="True"
                  CanUserResizeRows="False" GridLinesVisibility="None"
                  SelectionUnit="FullRow"
                  RowHeaderWidth="0"
                  FontSize="14">
            <DataGrid.CellStyle>
                <Style TargetType="DataGridCell">
                    <Setter Property="BorderThickness" Value="0" />
                    <Setter Property="FocusVisualStyle" Value="{x:Null}" />
                </Style>
            </DataGrid.CellStyle>
            <DataGrid.Columns>
                <DataGridTextColumn Width="0.2*" Header="Col 1 20%" Binding="{Binding Find}" />
                <DataGridTextColumn Width="0.2*" Header="Col 2 20%" Binding="{Binding Action}" />
                <DataGridTextColumn Width="0.6*" Header="Col 3 60%" Binding="{Binding Status}" />
            </DataGrid.Columns>
        </DataGrid>

        <GridSplitter Grid.Row="0" Grid.Column="1"
                      VerticalAlignment="Stretch"
                      ResizeBehavior="PreviousAndNext"
                      Width="5" Background="#FFBCBCBC" />

        <DataGrid Grid.Row="0" Grid.Column="2" ItemsSource="{Binding Path=Tasks, Mode=OneWay}"
                  SelectedItem="{Binding SelectedTask}"
                  AutoGenerateColumns="False" IsReadOnly="True"
                  CanUserResizeRows="False" GridLinesVisibility="None"
                  SelectionUnit="FullRow"
                  RowHeaderWidth="0"
                  FontSize="14">
            <DataGrid.CellStyle>
                <Style TargetType="DataGridCell">
                    <Setter Property="BorderThickness" Value="0" />
                    <Setter Property="FocusVisualStyle" Value="{x:Null}" />
                </Style>
            </DataGrid.CellStyle>
            <DataGrid.Columns>
                <DataGridTextColumn Width="0.2*" Header="Col 1 20%" Binding="{Binding Find}" />
                <DataGridTextColumn Width="0.2*" Header="Col 2 20%" Binding="{Binding Action}" />
                <DataGridTextColumn Width="0.6*" Header="Col 3 60%" Binding="{Binding Status}" />
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</UserControl>

You can then observe that behaviour of control is correct, because there is no space left to be consumed by first data grid columns.

I already tested this case and unfortunately it's also not working. Even worse, in this case application is goes crazy. :D After I run your example the main window got width which equals of width of two my displays, just take a look: [image.](http://img.in6k.com/screens/explorer_2017-06-30_10-45-47.png) — Rostislav Olshevsky, Jun 30 '17 at 07:52

score 0 · Accepted Answer · answered Jul 04 '17 at 13:03

0

Issue is not related to Caliburn. Exact the same issue described here: Window SizeToContent issue when child UserControl has grid with Column of max Width.

I fixed my problem in the same way as proposed here: fix.

answered Jul 04 '17 at 13:03

Rostislav Olshevsky

317
5
18

WPF UserControl component grid definition issue

4 Answers4