行と列にデータを表示する方法XAMLのウィンドウ8

Question

メトロスタイルのWindows 8アプリケーションでは、このようなxamlを使用してデータを表示するにはどうすればよいですか（https://dl.dropbox.com/u/59251888/img.png） ）画像。 ListBox、ListView、GrdViewを使って可能ですか？

Answer 1

はい、データグリッドのようにスタイルを設定する必要があります。 （この質問に割り当てたタグに基づいてXAMLで開発していると仮定します）。トリックは、適切な幅、整列などの列を持つグリッドを使用するデータテンプレートを作ることです。

私はListViewを使用して同様のことをしました。これは、行とは対照的に、セルに対してのみ背景を表示するように変更することができます。

XAML：ご返信用

<ListView 
     VerticalAlignment="Top" 
     Margin="0,5" 
     ItemsSource="{Binding HighestExpensesAlternatingList}" 
     ItemTemplate="{StaticResource HighestExpensesTemplate}" 
     BorderBrush="#19FFFFFF" BorderThickness="1,0,0,0" 
     SelectionMode="None" IsItemClickEnabled="False" 
     ScrollViewer.VerticalScrollBarVisibility="Hidden" 
     ScrollViewer.HorizontalScrollBarVisibility="Hidden" 
     ItemContainerStyle="{StaticResource SimpleListViewItemStyle}" 
     IsHitTestVisible="False"/> 


    <DataTemplate x:Key="HighestExpensesTemplate"> 
     <Grid Width="500" VerticalAlignment="Center" Margin="5,0" 
       Background="{Binding AlternatingIndexBrush}"> 

      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="120" /> 
       <ColumnDefinition Width="*" /> 
       <ColumnDefinition Width="150" /> 
      </Grid.ColumnDefinitions> 

      <TextBlock Grid.Column="0" Margin="5" TextWrapping="NoWrap" 
         Style="{StaticResource BasicTextStyle}" 
         VerticalAlignment="Center" 
         Text="{Binding Item.DateString}" /> 

      <TextBlock Grid.Column="1" Margin="5" TextWrapping="NoWrap" 
         Style="{StaticResource BasicTextStyle}" 
         VerticalAlignment="Center" 
         Text="{Binding Item.Description}" /> 

      <TextBlock Grid.Column="2" Margin="5" TextWrapping="NoWrap" 
         Style="{StaticResource BasicTextStyle}" 
         VerticalAlignment="Center" 
         Text="{Binding Item.AmountStringCurrencyFormat}" 
         HorizontalAlignment="Right"/> 

     </Grid> 
    </DataTemplate> 

<Style x:Key="SimpleListViewItemStyle" TargetType="ListViewItem"> 
    <Setter Property="Background" Value="Transparent"/> 
    <Setter Property="TabNavigation" Value="Local"/> 
    <Setter Property="IsHoldingEnabled" Value="False"/> 
    <Setter Property="IsDoubleTapEnabled" Value="False"/> 
    <Setter Property="IsRightTapEnabled" Value="False" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="ListViewItem"> 
       <Border BorderBrush="{TemplateBinding BorderBrush}" 
          BorderThickness="{TemplateBinding BorderThickness}" 
          Background="{TemplateBinding Background}" 
          Margin="{TemplateBinding Margin}"> 

        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="CommonStates"> 
          <VisualState x:Name="Normal"/> 
          <VisualState x:Name="Pressed"> 
           <Storyboard> 
            <PointerDownThemeAnimation TargetName="Container"/> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 

        <Grid x:Name="Container"> 
         <ContentPresenter x:Name="contentPresenter" 
               ContentTemplate="{TemplateBinding ContentTemplate}" 
               ContentTransitions="{TemplateBinding ContentTransitions}" 
               Content="{TemplateBinding Content}" 
               HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
               Margin="{TemplateBinding Padding}" 
               VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /> 
        </Grid> 
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style>