表示内容 - XAMLコントロール

Question

私は（上記参照）コンテンツはストアアプリに表示されUWPアプリとまったく同じ方法の内容を表示しようとしています。 私はListViewを使用していますが、以下のスクリーンショットで見ることができるようItemsが、代わりにまっすぐ下に表示されるの、Headerの右側に表示されます：

これは私のXAMLです：

<Page.Resources> 
    <local:Items x:Key="Item"/> 

    <DataTemplate x:Name="myListViewDataTemplate"> 
     <Grid Margin="0" Width="200"> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="200"/> 
       <RowDefinition Height="40"/> 
      </Grid.RowDefinitions> 
      <Image Grid.Row="0" Source="{Binding Path=ItemImage}" Stretch="UniformToFill"/> 
      <TextBlock Grid.Row="1" Text="{Binding Path=ItemName}" Margin="0,5,0,0" 
         VerticalAlignment="Top" HorizontalAlignment="Left" FontSize="20"/> 
     </Grid> 
    </DataTemplate> 
</Page.Resources> 

<Grid Background="LightGray"> 
    <ListView ItemTemplate="{StaticResource myListViewDataTemplate}" ItemsSource="{StaticResource Item}"> 
     <ListView.Header> 
      <TextBlock Margin="20,10,0,10" Text="Group of items" FontSize="22" FontWeight="SemiBold"/> 
     </ListView.Header> 
     <ListView.ItemsPanel> 
      <ItemsPanelTemplate> 
       <StackPanel Orientation="Horizontal" Background="Transparent"/> 
      </ItemsPanelTemplate> 
     </ListView.ItemsPanel> 
    </ListView> 
</Grid> 

問題を解決する方法はありますか？

Answer 1

簡単な回避策は、Headerを指定する代わりにTextBlockを使用し、ListViewの上に配置することです。

しかし、それはあなたが望むもののように見えるようにするために、我々はHeaderをラップし、StackPanel（ItemsPresenterの子）内の項目のデフォルトListViewのStyleを、変更する必要があります。我々はそれをしたくないので、私たちは最初ItemsPresenterからHeaderとHeaderTemplateのtempateバインディングを削除した後、我々は最終的に我々がHeaderとしてContentPresenterを追加し、GridでルートBorderを交換し、ScrollViewer（親の上に置きますItemsPresenterの）。

上記のすべてを行うStyleを参照してください。

<Style x:Key="ListViewStyle1" 
     TargetType="ListView"> 
    <Setter Property="IsTabStop" 
      Value="False" /> 
    <Setter Property="TabNavigation" 
      Value="Once" /> 
    <Setter Property="IsSwipeEnabled" 
      Value="True" /> 
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" 
      Value="Disabled" /> 
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" 
      Value="Auto" /> 
    <Setter Property="ScrollViewer.HorizontalScrollMode" 
      Value="Disabled" /> 
    <Setter Property="ScrollViewer.IsHorizontalRailEnabled" 
      Value="False" /> 
    <Setter Property="ScrollViewer.VerticalScrollMode" 
      Value="Enabled" /> 
    <Setter Property="ScrollViewer.IsVerticalRailEnabled" 
      Value="True" /> 
    <Setter Property="ScrollViewer.ZoomMode" 
      Value="Disabled" /> 
    <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" 
      Value="False" /> 
    <Setter Property="ScrollViewer.BringIntoViewOnFocusChange" 
      Value="True" /> 
    <Setter Property="UseSystemFocusVisuals" 
      Value="True" /> 
    <Setter Property="ItemContainerTransitions"> 
     <Setter.Value> 
      <TransitionCollection> 
       <AddDeleteThemeTransition /> 
       <ContentThemeTransition /> 
       <ReorderThemeTransition /> 
       <EntranceThemeTransition IsStaggeringEnabled="False" /> 
      </TransitionCollection> 
     </Setter.Value> 
    </Setter> 
    <Setter Property="ItemsPanel"> 
     <Setter.Value> 
      <ItemsPanelTemplate> 
       <ItemsStackPanel Orientation="Vertical" /> 
      </ItemsPanelTemplate> 
     </Setter.Value> 
    </Setter> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="ListView"> 
       <Grid BorderBrush="{TemplateBinding BorderBrush}" 
         BorderThickness="{TemplateBinding BorderThickness}" 
         Background="{TemplateBinding Background}"> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="Auto" /> 
         <RowDefinition /> 
        </Grid.RowDefinitions> 
        <ContentPresenter x:Name="Header" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" /> 
        <ScrollViewer x:Name="ScrollViewer" 
            Grid.Row="1" 
            AutomationProperties.AccessibilityView="Raw" 
            BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}" 
            HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" 
            HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" 
            IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" 
            IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}" 
            IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}" 
            IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" 
            IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" 
            TabNavigation="{TemplateBinding TabNavigation}" 
            VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" 
            VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" 
            ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}"> 
         <ItemsPresenter FooterTransitions="{TemplateBinding FooterTransitions}" 
             FooterTemplate="{TemplateBinding FooterTemplate}" 
             Footer="{TemplateBinding Footer}" 
             Padding="{TemplateBinding Padding}" /> 
        </ScrollViewer> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

次に、このようにListViewに適用します。あなたはVerticalAlignmentをTopに設定してください。

<ListView VerticalAlignment="Top" 
      Style="{StaticResource ListViewStyle1}" 
      ...> 

この情報がお役に立てば幸い！