How to align items in a listView in wpf to be in the center middle of a column?

Chocolade 516 Reputation points
2023-10-09T23:42:56.9066667+00:00

id1

I tried to change the alignment to the center, but it didn't change much.

I also tried to change the ID Width value to 150 but it didn't change anything.

I want the names in the Name column to stay aligned to the left as it is now but the id's in the Id column to be in the center and not to the left.

<Window x:Class="wpfMultiThreadListViewUpdate.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="500">
    <Grid>
        <Button Content="Update" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="10,10,0,0" Click="btnUpdate_Click"/>
        <ListView x:Name="lstvwPeople" HorizontalAlignment="Left" VerticalAlignment="Top" Width="400" Height="250" Margin="10,40,0,0">
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="Name" Width="200" DisplayMemberBinding="{Binding Name}"/>
                    <GridViewColumn Header="ID" Width="100">
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding Id}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                </GridView>
            </ListView.View>
        </ListView>
    </Grid>
</Window>
Windows Presentation Foundation
Windows Presentation Foundation
A part of the .NET Framework that provides a unified programming model for building line-of-business desktop applications on Windows.
2,687 questions
C#
C#
An object-oriented and type-safe programming language that has its roots in the C family of languages and includes support for component-oriented programming.
10,401 questions
0 comments No comments
{count} votes

Accepted answer
  1. Hui Liu-MSFT 44,186 Reputation points Microsoft Vendor
    2023-10-10T08:13:46.2666667+00:00

    Hi,@Chocolade.Welcome Microsoft Q&A. To center-align the text in the ID column you could create a cell template using a TextBlock and set the TextAlignment. Then set the ListViewItem.HorizontalContentAlignment (using a style with a setter on the ListViewItem) to make the cell template fill the entire GridViewCell.

    Note: the solution requires both HorizontalContentAlignment=Stretch in Window.Resources and TextAlignment=Right in the CellTemplate.

    And when I change the ID width value to 150, it works.

    <Window.Resources>
        <Style TargetType="ListViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        </Style>
    </Window.Resources>
     <ListView x:Name="lstvwPeople" HorizontalAlignment="Left" VerticalAlignment="Top" Width="400" Height="250" Margin="10,40,0,0"
                          ItemsSource="{Binding Users}">
                    <ListView.View>
                        <GridView >
                            <GridViewColumn Header="Name" Width="200" DisplayMemberBinding="{Binding Name}" />
                            <GridViewColumn Header="ID" Width="150" >
                                <GridViewColumn.CellTemplate>
                                    <DataTemplate>
                                        <TextBlock Text="{Binding Id}" HorizontalAlignment="Center" VerticalAlignment="Center" TextAlignment="Center"  />
                                    </DataTemplate>
                                </GridViewColumn.CellTemplate>
                            </GridViewColumn>
                        </GridView>
                    </ListView.View>
                </ListView>
    
    
    

    The result:

    User's image


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

    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.


2 additional answers

Sort by: Most helpful
  1. Josué Levi Aguilar 0 Reputation points
    2023-10-10T05:52:09.44+00:00

    It looks like you've already attempted to use HorizontalAlignment="Center" in the TextBlock within the CellTemplate for the "ID" column. However, in WPF, the horizontal alignment within a cell might be affected by other factors such as the column's content alignment.

    You can try setting the TextAlignment property of the TextBlock within the "ID" column's CellTemplate to ensure that the content is centered within the cell. Here's an updated version of your XAML:

    <Window x:Class="wpfMultiThreadListViewUpdate.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="350" Width="500">
        <Grid>
            <Button Content="Update" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="10,10,0,0" Click="btnUpdate_Click"/>
            <ListView x:Name="lstvwPeople" HorizontalAlignment="Left" VerticalAlignment="Top" Width="400" Height="250" Margin="10,40,0,0">
                <ListView.View>
                    <GridView>
                        <GridViewColumn Header="Name" Width="200" DisplayMemberBinding="{Binding Name}"/>
                        <GridViewColumn Header="ID" Width="100">
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{Binding Id}" HorizontalAlignment="Center" VerticalAlignment="Center" TextAlignment="Center"/>
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
                    </GridView>
                </ListView.View>
            </ListView>
        </Grid>
    </Window>
    
    
    0 comments No comments

  2. Viorel 113.2K Reputation points
    2023-10-10T08:24:16.3233333+00:00

    (Deleted)

    0 comments No comments