首页 文章

UWP App中的表格

提问于
浏览
0

我在Microsoft / Windows Store中有一些UWP应用程序,我想开发一个新的UWP应用程序 . 它是一个简单而静态的应用程序,我想放一个表(总是相等的数据 - 静态),但我已经在搜索并没有发现如何在UWP应用程序(XAML和C#)中创建表 .

是否可以在UWP应用程序中创建表?

4 回答

  • 0

    如评论中所述,您可以使用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控件放在每个“单元格”中 .

  • 0

    我遇到了类似的问题 . 但是我使用了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中提供项目

  • 2

    最新版本的Windows Community Toolkit具有DataGrid https://docs.microsoft.com/en-us/windows/communitytoolkit/controls/datagrid . 我还没有知道数据绑定是多么简单或困难,但它看起来非常强大 .

  • 0

    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>
    

相关问题