C#•6mo ago

✅ WPF Datagrid colums width

Hi, any idea why my column do not fit the whole width of my datagrid ? https://paste.mod.gg/csupsvqrdjql/0

7 Replies

You have to go to heroic efforts to auto stretch columns in list controls. Essentially you'll have to bind to an ancestor and math, at least from my hobbyist experience, I did this years back though, so it's possible I did it wrong, or they may be a better way.

Elio•6mo ago

Thanks for your feedback, I've bound the width with his ancestors, it seems to be the best solution to my point of view. I've struggled so much for this 🤣

Mayor McCheese•6mo ago

Did it work? I recall needing to find the right ancestor, and it was not what I expected iirc, and it was a challenge to get the correct ancestor

Elio•6mo ago

Yup it seems to work, I've created a customContainerStyle to remove all the default parameters like padding, margin etc.. so my listBoxItem can fit the width of the listbox then I just have to get the ancestor of the datagrid which is listboxitem. I'm not sure to be very clear but I can share with you the code tomorrow

Mayor McCheese•6mo ago

Sounds like a more mature solution than mine 🙂 It's exceedingly special we can't just say, stretch

Elio•6mo ago

<ListBox
     x:Name="ParentListBox"
     HorizontalContentAlignment="Stretch"
     VerticalContentAlignment="Stretch"
     Background="Red"
     BorderThickness="0"
     ItemContainerStyle="{StaticResource CustomListBoxItem}"
     ScrollViewer.HorizontalScrollBarVisibility="Disabled">
     <ListBoxItem x:Name="GeometryMachineItem">
         <DockPanel Background="Blue">
             <Label
                 x:Name="TitleGeometryMachine"
                 Background="Yellow"
                 Content="GeometryMachine"
                 DockPanel.Dock="Top"
                 FontFamily="Tahoma"
                 FontSize="30"
                 Foreground="{StaticResource ResourceKey=BluePrimaryColor}" />
             <DataGrid
                 Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ActualWidth}"
                 d:ItemsSource="{d:SampleData ItemCount=5}"
                 AutoGenerateColumns="False"
                 Background="Blue"
                 BorderThickness="0"
                 CanUserAddRows="False"
                 GridLinesVisibility="All"
                 HeadersVisibility="Column"
                 ItemsSource="{Binding PropertyGeometryMachineViewModel.PropertyList}">
                 <DataGrid.Columns>
                     <DataGridTextColumn
                         Width="*"
                         Binding="{Binding Name}"
                         Header="Name"
                         IsReadOnly="True" />
                     <DataGridTextColumn
                         Width="5*"
                         Binding="{Binding Description}"
                         Header="Description"
                         IsReadOnly="True" />
                 </DataGrid.Columns>
             </DataGrid>
         </DockPanel>
     </ListBoxItem>
</ListBox>

<ListBox
     x:Name="ParentListBox"
     HorizontalContentAlignment="Stretch"
     VerticalContentAlignment="Stretch"
     Background="Red"
     BorderThickness="0"
     ItemContainerStyle="{StaticResource CustomListBoxItem}"
     ScrollViewer.HorizontalScrollBarVisibility="Disabled">
     <ListBoxItem x:Name="GeometryMachineItem">
         <DockPanel Background="Blue">
             <Label
                 x:Name="TitleGeometryMachine"
                 Background="Yellow"
                 Content="GeometryMachine"
                 DockPanel.Dock="Top"
                 FontFamily="Tahoma"
                 FontSize="30"
                 Foreground="{StaticResource ResourceKey=BluePrimaryColor}" />
             <DataGrid
                 Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ActualWidth}"
                 d:ItemsSource="{d:SampleData ItemCount=5}"
                 AutoGenerateColumns="False"
                 Background="Blue"
                 BorderThickness="0"
                 CanUserAddRows="False"
                 GridLinesVisibility="All"
                 HeadersVisibility="Column"
                 ItemsSource="{Binding PropertyGeometryMachineViewModel.PropertyList}">
                 <DataGrid.Columns>
                     <DataGridTextColumn
                         Width="*"
                         Binding="{Binding Name}"
                         Header="Name"
                         IsReadOnly="True" />
                     <DataGridTextColumn
                         Width="5*"
                         Binding="{Binding Description}"
                         Header="Description"
                         IsReadOnly="True" />
                 </DataGrid.Columns>
             </DataGrid>
         </DockPanel>
     </ListBoxItem>
</ListBox>

the final solution i'll use with binding to width of his parent ItemContaine Style :

    <Style x:Key="CustomListBoxItem" TargetType="{x:Type ListBoxItem}">
        <Setter Property="Focusable" Value="False" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="Padding" Value="0" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="VerticalContentAlignment" Value="Stretch" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <Border
                        Name="Bd"
                        Padding="{TemplateBinding Padding}"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        SnapsToDevicePixels="true">
                        <ContentPresenter
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="CustomListBoxItem" TargetType="{x:Type ListBoxItem}">
        <Setter Property="Focusable" Value="False" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="Padding" Value="0" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="VerticalContentAlignment" Value="Stretch" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <Border
                        Name="Bd"
                        Padding="{TemplateBinding Padding}"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        SnapsToDevicePixels="true">
                        <ContentPresenter
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Mayor McCheese•6mo ago

👍

Gaming

Programming

✅ WPF Datagrid colums width