UWP - GroupHeaderPlacement = Left 인 ItemStackPanel에서 HeaderTemplate의 늘이기 높이

Question

ItemsControl 또는 ListView 내부에서 GroupStyle.HeaderTemplate 스트레치의 높이를 그룹화 된 항목의 높이와 일치시킬 수 있습니까?

VerticalAlignment/VerticalContentAlignment를로 설정 한 것과 관계없이 그룹 머리글은 그룹의 첫 번째 항목 왼쪽에 나타납니다.

Answer 1

내가 VerticalAlignment/VerticalContentAlignment를 설정 한 것과 관계없이 그룹 머리글은 그룹의 첫 번째 항목 왼쪽에 나타납니다.

그룹 헤더는 실제로 ListViewHeaderItem 개체입니다. ViewTree을 보면 모든 그룹에 대해 상위 컨테이너가 표시되지 않습니다 (한 그룹에는 ListViewHeaderItem과 여러 개의 ListViewItem이 포함되어 있습니다). 그래서 힘이 단순히 ListViewHeaderItem에 대한 부모 컨트롤이없는 것 같습니다. 그러나 우리는 정확한 계산에 의해 그룹 항목을 행진시키기 위해 ListViewHeaderItem의 높이를 설정할 수 있습니다.

는 여기에서 우리는 먼저 AcualHeight ListViewItem의를 얻기 위해 ViewTreeHelper 클래스를 사용하고 항목이 XAML에 바인딩 그룹 리소스에서 현재 그룹에 대한 계산 얻고, 지금은 그룹 머리글의 높이가 계산 될 수있다. 코드는 다음과 같이

XAML 코드를

public sealed partial class MainPage : Page 
{ 
    DateTime startDate; 
    IOrderedEnumerable<IGrouping<string, Activity>> result; 
    public MainPage() 
    { 
     this.InitializeComponent(); 
    } 
    //Calculate the group height. 
    public void calculate() 
    { 
     IEnumerable<ListViewHeaderItem> headeritems = FindVisualChildren<ListViewHeaderItem>(CListView); 
     IEnumerable<ListViewItem> listviewitems = FindVisualChildren<ListViewItem>(CListView); 
     var listviewitemheight = listviewitems.FirstOrDefault().ActualHeight; 

     for (int i = 0; i < headeritems.Count(); i++) 
     { 
      ListViewHeaderItem headeritem = headeritems.ElementAt<ListViewHeaderItem>(i); 
      var currentgroup = result.ElementAt<IGrouping<string, Activity>>(i); 
      var groupcount = currentgroup.Count(); 
      headeritem.Height = listviewitemheight * groupcount; 
      System.Diagnostics.Debug.WriteLine(headeritem.ActualHeight); 
     } 
    } 
    private static IEnumerable<T> FindVisualChildren<T>(DependencyObject depObj) where T : DependencyObject 
    { 
     if (depObj != null) 
     { 
      for (int i = 0; i < VisualTreeHelper.GetChildrenCount(depObj); i++) 
      { 
       DependencyObject child = VisualTreeHelper.GetChild(depObj, i); 
       if (child != null && child is T) 
       { 
        yield return (T)child; 
       } 

       foreach (T childOfChild in FindVisualChildren<T>(child)) 
       { 
        yield return childOfChild; 
       } 
      } 
     } 
    } 

    protected override void OnNavigatedTo(NavigationEventArgs e) 
    { 
     DateTime.TryParse("1/1/2014", out startDate);    
     PopulateActivities(); 
    } 

    private void PopulateActivities() 
    { 
     List<Activity> Activities = new List<Activity>(); 

     Activities.Add(new Activity() 
     { 
      Name = "Activity 1", 
      Complete = true, 
      DueDate = startDate.AddDays(4), 
      Project = "Project 1" 
     }); 
     ... 

     Activities.Add(new Activity() 
     { 
      Name = "Activity A", 
      Complete = true, 
      DueDate = startDate.AddDays(2), 
      Project = "Project 2" 
     }); 
     ... 
     result = from act in Activities group act by act.Project into grp orderby grp.Key select grp; 
     cvsActivities.Source = result; 
    } 
    private void Page_Loaded(object sender, RoutedEventArgs e) 
    { 
     calculate(); 
    }   
} 

public class ListGroupStyleSelector : GroupStyleSelector 
{ 
    protected override GroupStyle SelectGroupStyleCore(object group, uint level) 
    { 
     return (GroupStyle)App.Current.Resources["listViewGroupStyle"]; 
    } 
} 

public class Activity 
{ 
    public string Name { get; set; } 
    public DateTime DueDate { get; set; } 
    public bool Complete { get; set; } 
    public string Project { get; set; } 
} 

업데이트 HeaderContainerStyle 뒤에

<Page.Resources> 
    <CollectionViewSource x:Name="cvsActivities" IsSourceGrouped="True" /> 
    <CollectionViewSource 
     x:Name="cvsProjects" 
     IsSourceGrouped="True" 
     ItemsPath="Activities" /> 
    <local:ListGroupStyleSelector x:Key="listGroupStyleSelector" /> 
</Page.Resources> 

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Padding="30"> 
    <ListView 
     x:Name="CListView" 
     GroupStyleSelector="{StaticResource listGroupStyleSelector}" 
     ItemContainerStyle="{StaticResource ListViewItemExpanded}" 
     ItemTemplate="{StaticResource listViewItemTemplate}" 
     ItemsSource="{Binding Source={StaticResource cvsActivities}}"> 
     <ListView.ItemsPanel> 
      <ItemsPanelTemplate> 
       <ItemsStackPanel GroupHeaderPlacement="Left" Orientation="Vertical"/> 
     </ItemsPanelTemplate> 
     </ListView.ItemsPanel> 
    </ListView> 
</Grid> 

코드 그룹 스타일의 레이아웃이 깔끔 보이게 할 수 있습니다.

<GroupStyle x:Key="listViewGroupStyle"> 
    <GroupStyle.HeaderTemplate> 
     <DataTemplate>      
       <TextBlock 
        VerticalAlignment="Center" 
        Foreground="Black" 
        Text="{Binding Key}" />     
     </DataTemplate> 
    </GroupStyle.HeaderTemplate> 
    <GroupStyle.HeaderContainerStyle> 
     <Style TargetType="ListViewHeaderItem"> 
      <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" /> 
      <Setter Property="FontSize" Value="{ThemeResource ListViewHeaderItemThemeFontSize}" /> 
      <Setter Property="Background" Value="Azure" /> 
      <Setter Property="Margin" Value="0,0,0,0" /> 
      <Setter Property="Padding" Value="0,0,0,0" /> 
      <Setter Property="HorizontalContentAlignment" Value="Left" /> 
      <Setter Property="VerticalContentAlignment" Value="Stretch" /> 
      <Setter Property="MinHeight" Value="{ThemeResource ListViewHeaderItemMinHeight}" /> 
      <Setter Property="UseSystemFocusVisuals" Value="True" /> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="ListViewHeaderItem"> 
         <Grid 
          Background="{TemplateBinding Background}" 
          BorderBrush="{TemplateBinding BorderBrush}" 
          BorderThickness="{TemplateBinding BorderThickness}"> 
          <ContentPresenter 
           x:Name="ContentPresenter" 
           Margin="0" 
           HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
           VerticalContentAlignment="Stretch" 
           Content="{TemplateBinding Content}" 
           ContentTemplate="{TemplateBinding ContentTemplate}" 
           ContentTransitions="{TemplateBinding ContentTransitions}" /> 
          <Rectangle 
           Height="1" 
           Margin="0,0,0,0" 
           HorizontalAlignment="Stretch" 
           VerticalAlignment="Bottom" 
           Stroke="{ThemeResource SystemControlForegroundBaseLowBrush}" 
           StrokeThickness="0.5" /> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </GroupStyle.HeaderContainerStyle> 
</GroupStyle> 

그리고 그 결과.