Setting different alignments for listview columns

Question

I'm having trouble drawing a listview with columns that are left or centre aligned. I've looked at a few of solutions that I've found on here or other forums but they either seem to work for all columns or I can't get them working.

The best I've got so far is this code, but everything is left aligned (I've put the right-aligns in to test the code). Can someone tell me where I'm going wrong please?

<ListView Name="lsvQuestions" DockPanel.Dock="Bottom">                
     <ListView.View>
         <GridView>
             <GridViewColumn Width="450" Header="Question Text">
                 <GridViewColumn.CellTemplate>
                     <DataTemplate>
                         <TextBlock Text="{Binding QuestionText}" TextAlignment="Left"/>
                     </DataTemplate>
                 </GridViewColumn.CellTemplate>
                 </GridViewColumn>
                 <GridViewColumn Width="200" Header="Type">
                    <GridViewColumn.CellTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding QuestionType}" TextAlignment="Right"/>
                        </DataTemplate>
                    </GridViewColumn.CellTemplate>
                 </GridViewColumn>
                 <GridViewColumn Width="100" Header="Page Number">
                     <GridViewColumn.CellTemplate>
                         <DataTemplate>
                             <TextBlock Text="{Binding QuestionPageNumber}" TextAlignment="Center"/>
                         </DataTemplate>
                     </GridViewColumn.CellTemplate>
                 </GridViewColumn>
                 <GridViewColumn Width="100" Header="Order">
                    <GridViewColumn.CellTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding QuestionOrder}" TextAlignment="Center"/>
                        </DataTemplate>
                    </GridViewColumn.CellTemplate>
                </GridViewColumn>
            </GridView>
        </ListView.View>               
    </ListView>

Answer 1

Your ListViewItems don't stretch the content by default and that's why all items appear on the left. Add this and it will work:

<ListView.ItemContainerStyle>
    <Style TargetType="ListViewItem">
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    </Style>
</ListView.ItemContainerStyle>

Answer 2

Although LPL's hint had already saved thousands of headaches, I would go even further and define HorizontalContentAlignment and VerticalContentAlignment to stretch in order to target an expected alignment behaviours on most used table driven controls:

• ListView column headers and items templates

• DataGrid column headers and cell templates.

  <Window x:Class="TaskManager.UI.Views.AcumuladosPorTarefaWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:v="clr-namespace:TaskManager.UI.Views"
  xmlns:catel="http://catel.codeplex.com"        
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  Title="AcumuladosPorTarefaWindow" Height="451.533" Width="323.305"
  >
  <Window.Resources>
  <Style TargetType="GridViewColumnHeader">
      <Setter Property="HorizontalContentAlignment" Value="Stretch" />
      <Setter Property="VerticalContentAlignment" Value="Stretch" />
  </Style>
  <Style TargetType="DataGridColumnHeader">
      <Setter Property="HorizontalContentAlignment" Value="Stretch" />
      <Setter Property="VerticalContentAlignment" Value="Stretch" />
  </Style>
  <Style TargetType="ListViewItem">
      <Setter Property="HorizontalContentAlignment" Value="Stretch" />
      <Setter Property="VerticalContentAlignment" Value="Stretch" />
  </Style>
  <Style TargetType="DataGridCell">
      <Setter Property="HorizontalContentAlignment" Value="Stretch" />
      <Setter Property="VerticalContentAlignment" Value="Stretch" />
  </Style>
  </Window.Resources>
  <StackPanel Orientation="Vertical">
  
  <ListView ItemsSource="{Binding AcumuladosPorTarefa}" SelectedItem="{Binding LinhaSelecionada}">
      <ListView.View>
          <GridView>
              <GridViewColumn>
                  <GridViewColumn.CellTemplate>
                      <DataTemplate>
                          <TextBlock Text="{Binding TarefaID}"/>
                      </DataTemplate>
                  </GridViewColumn.CellTemplate>
                  <GridViewColumnHeader>
                      <TextBlock Text="ID" TextAlignment="Center" />
                  </GridViewColumnHeader>
              </GridViewColumn>
              <GridViewColumn>
                  <GridViewColumn.CellTemplate>
                      <DataTemplate>
                          <TextBlock Text="{Binding Tarefa.Nome}"/>
                      </DataTemplate>
                  </GridViewColumn.CellTemplate>
                  <TextBlock Text="Nome" TextAlignment="Left"/>
              </GridViewColumn>
              <GridViewColumn>
                  <GridViewColumn.CellTemplate>
                      <DataTemplate>
                          <TextBlock Text="{Binding DuracaoInMS}" TextAlignment="Right" HorizontalAlignment="Stretch" />
                      </DataTemplate>
                  </GridViewColumn.CellTemplate>
                  <GridViewColumnHeader Width="auto">
                      <TextBlock Text="Duração" TextAlignment="Right"/>
                  </GridViewColumnHeader>
              </GridViewColumn>
          </GridView>
      </ListView.View>
  </ListView>
  <DataGrid ItemsSource="{Binding AcumuladosPorTarefa}" AutoGenerateColumns="False" SelectedItem="{Binding LinhaSelecionada}" CanUserAddRows="False" HorizontalAlignment="Stretch">
      <DataGrid.Columns>
          <DataGridTemplateColumn Width="auto" MinWidth="20" CanUserSort="True" CanUserReorder="True" CanUserResize="True">
              <DataGridTemplateColumn.Header>
                  <TextBlock Text="ID" TextAlignment="Right" />
              </DataGridTemplateColumn.Header>
              <DataGridTemplateColumn.CellTemplate>
                  <DataTemplate>
                      <TextBlock Text="{Binding TarefaID}" HorizontalAlignment="Stretch"/>
                  </DataTemplate>
              </DataGridTemplateColumn.CellTemplate>
          </DataGridTemplateColumn>
          <DataGridTemplateColumn Width="auto" MinWidth="150" CanUserSort="True">
              <DataGridTemplateColumn.HeaderTemplate>
                  <DataTemplate>
                      <TextBlock Text="Nome" HorizontalAlignment="Left"/>
                  </DataTemplate>
              </DataGridTemplateColumn.HeaderTemplate>
              <DataGridTemplateColumn.CellTemplate>
                  <DataTemplate>
                      <TextBlock Text="{Binding Tarefa.Nome}"/>
                  </DataTemplate>
              </DataGridTemplateColumn.CellTemplate>
          </DataGridTemplateColumn>
          <DataGridTemplateColumn Header="Duração" Width="auto" MinWidth="25" IsReadOnly="True">
              <DataGridTemplateColumn.HeaderTemplate>
                  <DataTemplate>
                      <TextBlock Text="Duração" TextAlignment="Right"/>
                  </DataTemplate>
              </DataGridTemplateColumn.HeaderTemplate>
              <DataGridTemplateColumn.CellTemplate>
                  <DataTemplate>
                      <TextBlock Text="{Binding DuracaoInMS}" TextAlignment="Right" />
                  </DataTemplate>
              </DataGridTemplateColumn.CellTemplate>
          </DataGridTemplateColumn>
      </DataGrid.Columns>
  </DataGrid>
  </StackPanel>
  </Window>
  

Rembember: you can always define your default styles and other resources at application level so you don't have to define it every view.

Hope it helps someone else like LPL's hint helped me.