GroupStyle頭垂直上方不居中

Question

我嘗試生成具有以下佈局的列表視圖：

如果我用的是標準的分組報頭（大陸名）總是呈現垂直居中，但需要他們垂直在組的頂部。

Answer 1

對於該列或該列中的單元格，應該將單元格的內容設置爲使用VerticalAlignment=Center。

This answer可能對您有所幫助。

Answer 2

你想可以使用的方法可以實現如下的輸出類型：

<Window ...> 
<Window.Resources> 

    <Style x:Key="HeaderContainerStyleKey" TargetType="GridViewColumnHeader"> 
     <Setter Property="HorizontalContentAlignment" Value="Left"/> 
     <Setter Property="BorderBrush" Value="Transparent"/> 
     <Setter Property="BorderThickness" Value="0"/> 
    </Style> 

    <GridViewColumnCollection x:Key="ColumnKey"> 
     <GridViewColumn Width="75" HeaderContainerStyle="{StaticResource HeaderContainerStyleKey}">     
      <GridViewColumn.HeaderTemplate> 
       <DataTemplate> 
        <Grid Height="20"> 
         <Line VerticalAlignment="Bottom" Stroke="#000" X2="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=GridViewColumnHeader}}"/> 
        </Grid> 
       </DataTemplate> 
      </GridViewColumn.HeaderTemplate> 

      <GridViewColumn.CellTemplate> 
       <DataTemplate> 
        <TextBlock> 
         <Run Text="{Binding Name, Mode=OneWay}"/> 
         <Run Text=":"/> 
        </TextBlock> 
       </DataTemplate> 
      </GridViewColumn.CellTemplate> 
     </GridViewColumn> 
    </GridViewColumnCollection> 

    <GridViewColumnCollection x:Key="ColumnsKey"> 
     <GridViewColumn Width="75" HeaderContainerStyle="{StaticResource HeaderContainerStyleKey}"> 
      <GridViewColumn.HeaderTemplate> 
       <DataTemplate> 
         <Grid Height="20"> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="Auto"/> 
           <ColumnDefinition Width="*"/> 
         </Grid.ColumnDefinitions> 
         <TextBlock Text="Name" VerticalAlignment="Bottom" Height="16"/> 
         <Line Grid.Column="1" VerticalAlignment="Bottom" Stroke="#000" X2="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=GridViewColumnHeader}}"/> 
        </Grid> 
       </DataTemplate> 
      </GridViewColumn.HeaderTemplate> 
      <GridViewColumn.CellTemplate> 
       <DataTemplate> 
        <TextBlock> 
         <Run Text="{Binding CountryName}"/> 
         <Run Text=","/> 
        </TextBlock> 
       </DataTemplate> 
      </GridViewColumn.CellTemplate> 
     </GridViewColumn> 
     <GridViewColumn Width="100" Header="Inhabitants" DisplayMemberBinding="{Binding CountryPopulation}" HeaderContainerStyle="{StaticResource HeaderContainerStyleKey}"> 
      <GridViewColumn.HeaderTemplate> 
       <DataTemplate> 
        <Grid Height="20"> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="Auto"/> 
          <ColumnDefinition Width="*"/> 
         </Grid.ColumnDefinitions> 
         <TextBlock Text="Inhabitants" VerticalAlignment="Bottom"/> 
         <Line Grid.Column="1" VerticalAlignment="Bottom" Stroke="#000" X2="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=GridViewColumnHeader}}"/> 
        </Grid> 
       </DataTemplate> 
      </GridViewColumn.HeaderTemplate> 
     </GridViewColumn> 
    </GridViewColumnCollection> 

</Window.Resources> 

<Grid>   
    <Grid.Resources> 
     <CollectionViewSource x:Key="CvsKey" Source="{Binding Data}"> 
      <CollectionViewSource.GroupDescriptions> 
       <PropertyGroupDescription PropertyName="ContinentName"/> 
      </CollectionViewSource.GroupDescriptions> 
     </CollectionViewSource> 
    </Grid.Resources> 

    <StackPanel> 

     <Grid> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="Auto"/> 
       <ColumnDefinition Width="*"/> 
      </Grid.ColumnDefinitions> 
      <GridViewHeaderRowPresenter Columns="{StaticResource ColumnKey}" Grid.Column="0"/> 
      <GridViewHeaderRowPresenter Columns="{StaticResource ColumnsKey}" Grid.Column="1"/> 
     </Grid> 
     <ListView Visibility="Visible" ItemsSource="{Binding Source={StaticResource CvsKey}}" BorderThickness="0"> 
      <ListView.GroupStyle> 
       <GroupStyle> 
        <GroupStyle.ContainerStyle> 
         <Style TargetType="GroupItem"> 
          <Setter Property="Template"> 
           <Setter.Value> 
            <ControlTemplate TargetType="GroupItem"> 
             <StackPanel Orientation="Horizontal">             
              <GridViewRowPresenter Margin="0 0 0 10" Columns="{StaticResource ColumnKey}" Content="{Binding DataContext, RelativeSource={RelativeSource Self}}"/> 
              <ItemsControl ItemsSource="{Binding DataContext.Items, RelativeSource={RelativeSource AncestorType=GroupItem}}"> 
               <ItemsControl.ItemTemplate> 
                <DataTemplate> 
                 <GridViewRowPresenter Margin="0 0 0 10" Columns="{StaticResource ColumnsKey}" Content="{Binding DataContext, RelativeSource={RelativeSource Mode=Self}}"/> 
                </DataTemplate> 
               </ItemsControl.ItemTemplate> 
              </ItemsControl> 
             </StackPanel> 
            </ControlTemplate> 
           </Setter.Value> 
          </Setter> 
         </Style> 
        </GroupStyle.ContainerStyle> 
       </GroupStyle> 
      </ListView.GroupStyle> 
     </ListView> 
    </StackPanel> 

    </Grid> 
</Window> 

視圖模型

public class ViewModel:INotifyPropertyChanged 
{  
    public List<ContinentData> Data { get; set; } 
    public ViewModel() 
    { 
     Data = new List<ContinentData>(); 
     Data.Add(new ContinentData() { ContinentName="Europe", CountryName="Italy", CountryPopulation="12345" }); 
     Data.Add(new ContinentData() { ContinentName = "Asia", CountryName = "India", CountryPopulation="987253" }); 
     Data.Add(new ContinentData() { ContinentName = "Asia", CountryName = "Pak", CountryPopulation = "987253" }); 
     Data.Add(new ContinentData() { ContinentName = "Europe", CountryName = "Germany", CountryPopulation = "54678" }); 
     Data.Add(new ContinentData() { ContinentName = "Asia", CountryName = "Nepal", CountryPopulation = "987253" }); 
     Data.Add(new ContinentData() { ContinentName = "Asia", CountryName = "China", CountryPopulation = "987253" }); 
     Data.Add(new ContinentData() { ContinentName = "Europe", CountryName = "England", CountryPopulation="54678" }); 
    } 

    public event PropertyChangedEventHandler PropertyChanged; 
    private void OnPropertyChanged(string prop) 
    { 
     if (PropertyChanged != null) 
      PropertyChanged(this, new PropertyChangedEventArgs(prop)); 
    } 
} 

public class ContinentData 
{ 
    public string ContinentName { get; set; } 
    public string CountryName { get; set; } 
    public string CountryPopulation { get; set; }   
} 

public MainWindow() 
    { 
     InitializeComponent(); 

     this.DataContext = new ViewModel(); 
    }