Grid layout - allowing a column's content to be truncated when the container shrinks

Question

I'm displaying a list of items using a grid with 2 columns for each item. The first column contains a button which shows a name. The second column contains a button which has "X" and when clicked will remove that item from the list.

This works, however the resizing is not acting as desired. When shrinking the parent container horizontally, it's apparent that WPF is refusing to shrink the first column below what is required to display the content. This makes sense, but in this case, is not the intended behavior. What's wanted is for the "X" column (second column) to ALWAYS be visible on the right regardless of the width of the parent container and for the first column to shrink as needed and truncate the text in that column. There should never be a horizontal scrollbar, it should just lose part of the first column through truncation.

Here's the XAML used in this layout.

<Window x:Class="LayoutTest.MainWindow"  
        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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
        xmlns:local="clr-namespace:LayoutTest"  
        mc:Ignorable="d"  
        Title="MainWindow" Height="450" Width="800">  
  
    <Grid Margin="0" >  
  
        <ListView HorizontalContentAlignment="Stretch"  
                  ItemsSource="{Binding People}"  
                  Background="Black"  
                  FontSize="18pt" >  
  
            <ListView.ItemTemplate>  
                <DataTemplate>  
                    <Grid>  
                        <Grid.ColumnDefinitions>  
                            <ColumnDefinition Width="0.9*" />  
                            <ColumnDefinition Width="0.1*" />  
                        </Grid.ColumnDefinitions>  
                        <Button Grid.Column="0"   
                                Content="{Binding Name}"   
                                HorizontalContentAlignment="Left" />  
                        <Button Grid.Column="1"   
                                Content="X" />  
                    </Grid>  
                </DataTemplate>  
            </ListView.ItemTemplate>  
  
            <ListView.ItemContainerStyle>  
                <Style TargetType="ListViewItem">  
                    <Setter Property="BorderThickness" Value="0" />  
                    <Setter Property="Margin" Value="0" />  
                    <Setter Property="Padding" Value="0" />  
                </Style>  
            </ListView.ItemContainerStyle>  
  
        </ListView>  
  
    </Grid>  
  
</Window>  
  

Any idea how to achieve the desired behavior in XAML? Sample project which repros the above is linked to below.

LayoutTest.zip

Answer 1

Hi,@Dave Calkins . Welcome Microsoft Q&A.
DataGrid has a FrozenColumnCount property that freezes specific columns. If you don't want to display the DataGrid's Header, you could use HeadersVisibility="None" . You can try the code below.

<Window x:Class="DataGridFreezeColumtn.MainWindow"  
  ....  
        mc:Ignorable="d" Name="window"  
        Title="MainWindow" Height="450" Width="800">  
    <StackPanel>  
       
        <DataGrid HorizontalContentAlignment="Stretch"  
                  ItemsSource="{Binding People}" Width="{Binding ElementName=window ,Path=Width}"  AutoGenerateColumns="False"  
                 HeadersVisibility="None" FrozenColumnCount="1"  
                  FontSize="18pt">  
            <DataGrid.Columns>  
                <DataGridTextColumn  Binding="{Binding Name}" Width="2*" />  
                <DataGridTemplateColumn Width="*">  
                    <DataGridTemplateColumn.CellTemplate>  
                        <DataTemplate>  
                            <Button Content="×"  Width="30" />  
                        </DataTemplate>  
                    </DataGridTemplateColumn.CellTemplate>  
                </DataGridTemplateColumn>  
            </DataGrid.Columns>  
        </DataGrid>  
    </StackPanel>  
</Window>  

The result:

---

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.