如何在行和列中顯示數據XAML Windows 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>