リストビューが正しく表示されない

Question

私は3つの列を持っています。私はListViewのセットアップヘッダを表示してデータを表示します。私は同様にListView ItemTemplateを設定しますが、データが正しく表示されません。

<Grid> 
      <ListView x:Name="listView" Grid.Column="0"> 
        <ListView.HeaderTemplate> 
         <DataTemplate> 
          <Grid Background="Gray"> 
           <Grid.ColumnDefinitions> 
            <ColumnDefinition Width="*"/> 
            <ColumnDefinition Width="*"/> 
            <ColumnDefinition Width="*"/> 
           </Grid.ColumnDefinitions> 

           <TextBlock Text="Блюдо" Grid.Column="0"   VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="Bold" FontSize="18" ></TextBlock> 
           <TextBlock Text="Цена" Grid.Column="1"   VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="Bold" FontSize="18" ></TextBlock> 
           <TextBlock Text="Количество" Grid.Column="2" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="Bold" FontSize="18" ></TextBlock> 
          </Grid> 
         </DataTemplate> 
       </ListView.HeaderTemplate> 
       <ListView.ItemTemplate> 
        <DataTemplate> 
         <Grid > 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="*" /> 
           <ColumnDefinition Width="*"/> 
           <ColumnDefinition Width="*"/> 
          </Grid.ColumnDefinitions> 
           <TextBlock Text="{Binding bludo}" Grid.Column="0" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontSize="18" ></TextBlock> 
           <TextBlock Text="{Binding tsena}" Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontSize="18" ></TextBlock> 
           <TextBlock Text="{Binding kol}" Grid.Column="2" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontSize="18" ></TextBlock> 
         </Grid> 
        </DataTemplate> 
       </ListView.ItemTemplate> 
      </ListView> 
      </Grid> 

Answer 1

ここでの問題はListViewItemで、それはHorizontalContentAlignmentプロパティがデフォルトでLeftに設定されているということです。このプロパティは、コントロールのコンテンツの水平方向の配置を示します。 Leftに設定すると、ののコンテンツ、つまりGridが左揃えになります。したがって、GirdはListViewの全幅を取らず、スクリーンショットのような「奇妙な」レイアウトが表示されます。

デフォルトのスタイルで、我々はこの問題を解決するには

<Setter Property="HorizontalContentAlignment" Value="Left"/> 

を見ることができ、我々は同じようStretchにHorizontalContentAlignmentプロパティを設定することができ、これは明らかに、我々はListViewItem styles and templatesを確認することができます表示するには：

<ListView x:Name="listView" Grid.Column="0"> 
    <ListView.HeaderTemplate> 
     <DataTemplate> 
      <Grid Background="Gray"> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="*" /> 
        <ColumnDefinition Width="*" /> 
        <ColumnDefinition Width="*" /> 
       </Grid.ColumnDefinitions> 
       <TextBlock Grid.Column="0" Margin="7,2,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="18" FontWeight="Bold" Text="Блюдо" /> 
       <TextBlock Grid.Column="1" Margin="7,2,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="18" FontWeight="Bold" Text="Цена" /> 
       <TextBlock Grid.Column="2" Margin="7,2,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="18" FontWeight="Bold" Text="Количество" /> 
      </Grid> 
     </DataTemplate> 
    </ListView.HeaderTemplate> 

    <!-- Add this in your code --> 
    <ListView.ItemContainerStyle> 
     <Style TargetType="ListViewItem"> 
      <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
     </Style> 
    </ListView.ItemContainerStyle> 

    <ListView.ItemTemplate> 
     <DataTemplate> 
      <Grid> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="*" /> 
        <ColumnDefinition Width="*" /> 
        <ColumnDefinition Width="*" /> 
       </Grid.ColumnDefinitions> 
       <TextBlock Grid.Column="0" Margin="7,2,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="18" Text="{Binding bludo}" /> 
       <TextBlock Grid.Column="1" Margin="7,2,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="18" Text="{Binding tsena}" /> 
       <TextBlock Grid.Column="2" Margin="7,2,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="18" Text="{Binding kol}" /> 
      </Grid> 
     </DataTemplate> 
    </ListView.ItemTemplate> 
</ListView>