如何在行和列中显示数据 XAML windows 8答案

【问题标题】：how to display data in rows and columns XAML windows 8如何在行和列中显示数据 XAML windows 8
【发布时间】：2012-06-03 10:54:29
【问题描述】：

在 Metro 风格的 Windows 8 应用程序中，我如何使用类似于此 (https://dl.dropbox.com/u/59251888/img.png) 图像的 xaml 显示数据。是否可以使用 ListBox,ListView,GrdView..？

【问题讨论】：

标签： xaml windows-8

【解决方案1】：

是的，但是您需要对其进行样式设置，使其看起来像一个数据网格。（假设您正在根据您分配给此问题的标签在 XAML 中进行开发）。诀窍是制作一个数据模板，该模板使用具有适当宽度、对齐方式等列的 Grid。

我做过类似的事情——使用 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>

【讨论】：

感谢您的回复。实际上，您每行显示了一个项目，在不同的列中具有不同的属性，我想每行显示 3 个项目，每个项目在不同的列中..我可以这样做的任何想法..？
我认为您可以使用 GridView 并将其 ItemsPanel 设置为 WrapGrid 属性 Orientation="Horizontal" 和 MaximumRowsOrColumns="3"。然后你会设置它的样式，使它看起来像单独的行和列。
非常感谢 Krishna，我使用了您提到的 WrapGrid，它完全符合我的要求。谢谢
这是一个很好的答案，谢谢！当您将鼠标放在列表视图上时，您知道如何避免列表视图变成灰色背景吗？谢谢
我认为您可能必须覆盖 ListViewItem 模板并修复里面的 VisualStates。或者至少覆盖一个或多个默认 ListViewItem* 画笔。