我在Microsoft / Windows Store中有一些UWP应用程序,我想开发一个新的UWP应用程序 . 它是一个简单而静态的应用程序,我想放一个表(总是相等的数据 - 静态),但我已经在搜索并没有发现如何在UWP应用程序(XAML和C#)中创建表 .
是否可以在UWP应用程序中创建表?
如评论中所述,您可以使用Telerik Grid . 但是,如果您想自己构建表,那么Grid控件就足够了 .
<Grid> <Grid.RowDefinitions> <RowDefinition Height="50"/> <RowDefinition Height="50"/> <RowDefinition Height="50"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="50"/> <ColumnDefinition Width="50"/> <ColumnDefinition Width="50"/> </Grid.ColumnDefinitions> </Grid>
以上将创建一个包含3行和3列的网格 . 如果要自动调整列:
<ColumnDefinition Width="*"/> <RowDefinition Width="Auto"/>
这将分别创建一个列,该列根据可用空间量和自身调整其内容的行进行自我调整 .
要使网格看起来像一个表(即每个单元格之间的边框),请使用边框控件:
<Grid> <Grid.RowDefinitions> <RowDefinition Height="50"/> ... </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="50"/> ... </Grid.ColumnDefinitions> <Border Grid.Row="2" Grid.Column="1" BorderBrush="Black" BorderThickness="2"> //Content here </Border> </Grid>
您可以通过调整Grid.Row和Grid.Column属性将Border控件放在每个“单元格”中 .
我遇到了类似的问题 . 但是我使用了listview和 Headers . 它几乎提供了像Table的外观 . 看看下面的代码
</Grid.ColumnDefinitions> <TextBlock FontSize="14" Margin="10 0 0 0" Text="Date" VerticalAlignment="Top"></TextBlock> <TextBlock FontSize="14" Margin="12 0 6 0" Text="Item no" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Top"></TextBlock> <TextBlock FontSize="14" Margin="12 0 6 0" Text="Amount" Grid.Column="3" HorizontalAlignment="Right" VerticalAlignment="Top"></TextBlock> </Grid> </ListView.Header> <ListView.ItemContainerStyle> <Style TargetType="ListViewItem"> <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/> <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/> <Setter Property="Background" Value="Transparent"/> <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/> <Setter Property="TabNavigation" Value="Local"/> <Setter Property="IsTabStop" Value="True"/> <Setter Property="IsHoldingEnabled" Value="True"/> <Setter Property="Padding" Value="0,0,0,0"/> <Setter Property="HorizontalContentAlignment" Value="Stretch"/> <Setter Property="VerticalContentAlignment" Value="Center"/> <Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}"/> <Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ListViewItem"> <ListViewItemPresenter CheckBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}" ContentMargin="{TemplateBinding Padding}" CheckMode="Inline" ContentTransitions="{TemplateBinding ContentTransitions}" CheckBoxBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" PointerOverForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}" ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" FocusBorderBrush="LightGray" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/> </ControlTemplate> </Setter.Value> </Setter> </Style> </ListView.ItemContainerStyle> <ListView.ItemTemplate> <DataTemplate x:DataType="data:ITEM"> <Grid Padding="0, 12" VerticalAlignment="Top"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"></ColumnDefinition> <ColumnDefinition Width="*"></ColumnDefinition> <ColumnDefinition Width="*"></ColumnDefinition> </Grid.ColumnDefinitions> <TextBlock FontSize="12" Margin="0 0 0 0" TextWrapping="Wrap" Text="{x:Bind date}" VerticalAlignment="Top"></TextBlock> <TextBlock Margin="12 0 6 0" Text="{x:Bind item_number}" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Top"></TextBlock> <TextBlock Margin="12 0 6 0" Text="{x:Bind amount,Mode=OneWay}" Grid.Column="2" HorizontalAlignment="Left" VerticalAlignment="Top"></TextBlock> </Grid> </DataTemplate> </ListView.ItemTemplate> </ListView>
上面的代码将提供一个包含3列的表,您可以在itemsource中提供项目
最新版本的Windows Community Toolkit具有DataGrid https://docs.microsoft.com/en-us/windows/communitytoolkit/controls/datagrid . 我还没有知道数据绑定是多么简单或困难,但它看起来非常强大 .
Grid nad ListView没问题,但DataGrid控件将是最佳选择 .在链接下,您将找到它的MS文档:Windows Community Toolkit DataGrid XAML control documentation最好使用原生解决方案而不是从头开始重新发明轮子 .
示例:
<controls:DataGrid x:Name="dataGrid1" Height="600" Margin="12" AutoGenerateColumns="False" ItemsSource="{x:Bind MyViewModel.Customers}"> <controls:DataGrid.Columns> <!-- Name Column --> <controls:DataGridTemplateColumn Header="Name"> <controls:DataGridTemplateColumn.CellTemplate> <DataTemplate> <StackPanel Orientation="Horizontal" VerticalAlignment="Center"> <TextBlock Padding="5,0,5,0" Text="{x:Bind FirstName}"/> <TextBlock Text="{x:Bind LastName}"/> </StackPanel> </DataTemplate> </controls:DataGridTemplateColumn.CellTemplate> <controls:DataGridTemplateColumn.CellEditingTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <TextBox Text="{x:Bind FirstName}" BorderThickness="0"/> <TextBox Text="{x:Bind LastName}" BorderThickness="0"/> </StackPanel> </DataTemplate> </controls:DataGridTemplateColumn.CellEditingTemplate> </controls:DataGridTemplateColumn> <!-- other columns below --> </controls:DataGrid>
4 回答
如评论中所述,您可以使用Telerik Grid . 但是,如果您想自己构建表,那么Grid控件就足够了 .
以上将创建一个包含3行和3列的网格 . 如果要自动调整列:
这将分别创建一个列,该列根据可用空间量和自身调整其内容的行进行自我调整 .
要使网格看起来像一个表(即每个单元格之间的边框),请使用边框控件:
您可以通过调整Grid.Row和Grid.Column属性将Border控件放在每个“单元格”中 .
我遇到了类似的问题 . 但是我使用了listview和 Headers . 它几乎提供了像Table的外观 . 看看下面的代码
上面的代码将提供一个包含3列的表,您可以在itemsource中提供项目
最新版本的Windows Community Toolkit具有DataGrid https://docs.microsoft.com/en-us/windows/communitytoolkit/controls/datagrid . 我还没有知道数据绑定是多么简单或困难,但它看起来非常强大 .
Grid nad ListView没问题,但DataGrid控件将是最佳选择 .
在链接下,您将找到它的MS文档:
Windows Community Toolkit DataGrid XAML control documentation
最好使用原生解决方案而不是从头开始重新发明轮子 .
示例: