WPF UserControl组件网格定义问题

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.

Answer 1

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>

Answer 2

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

Answer 3

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.

Answer 4

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 .