Wpf datagrid显示有限的行数,并在该计数后滚动

时间:2018-01-20 08:05:20

标签: c# wpf xaml mvvm datagrid

我正在开发一个小型库存管理应用程序,其中可用商品列表和销售商品列表显示在数据网格中

WPF MVVM

我面临的问题是我只希望在datagrid中显示5个项目,其他项目应该可以使用固定标题滚动。有没有办法实现它(只有XAML代码)。在其他论坛/帖子中找不到解决方案,所以创建了一个新的。 这是我的代码

<Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <TextBlock Grid.Column="0" Grid.Row="0" Margin="10 0 0 0" Text="Available List"/>
            <DataGrid ScrollViewer.CanContentScroll="True" 
                      ScrollViewer.VerticalScrollBarVisibility="Auto"
                      ScrollViewer.HorizontalScrollBarVisibility="Auto" Name="availablegrid" Grid.Row="1" Grid.Column="0" ItemsSource="{Binding DetailListCollection}" AutoGenerateColumns="False" CanUserSortColumns="True"
                      HorizontalAlignment="Left" Margin="10" CanUserResizeColumns="True" IsReadOnly="True"
                      Height="auto">
                <DataGrid.Columns>
                    <DataGridTextColumn Header="ItemCode" Binding="{Binding ItemCode}"/>
                    <DataGridTextColumn Header="Weight" Binding="{Binding Weight,StringFormat=' {0} gm'}"/>
                    <DataGridTextColumn IsReadOnly="False" Header="Comment" Binding="{Binding Comment,FallbackValue=Empty}"/>
                    <DataGridTemplateColumn Header="Sold">
                        <DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <Button Margin="5" Name="Sold"  Click="Sold_OnClick" Background="Red" Foreground="White" FontWeight="Bold" Content="Sold"/>
                            </DataTemplate>
                        </DataGridTemplateColumn.CellTemplate>
                    </DataGridTemplateColumn>
                    <DataGridTemplateColumn Header="Edit">
                        <DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <Button Margin="5" Name="Edit1" Click="Edit1_OnClick"  Background="Red" Foreground="White" FontWeight="Bold" Content="Edit"/>
                            </DataTemplate>
                        </DataGridTemplateColumn.CellTemplate>
                    </DataGridTemplateColumn>
                </DataGrid.Columns>
            </DataGrid>

我尝试了ScrollViewer属性但没有工作

2 个答案:

答案 0 :(得分:0)

我不确定我是否正确。但我认为你应该限制DataGrid的最大高度,只有5个项目适合DataGrid,其余项目可以滚动查看。

答案 1 :(得分:0)

这是仅限XAML的解决方案:

<paper-button on-tap="customfunc"> Test </paper-button>
<div><strong>[[format(date)]]</strong></div>   // result at screen: Saturday, 20 January 2018
  ...
<script>
class MyTest extends Polymer.Element {
  static get is() { return 'test-component'; }

  ready(){
      super.ready();
      this.set('date', new Date())
   }
   customfunc() {
      var d = new Date();
      var dd = this.format(d);
      console.log("d ", d, " - dd = ", dd);// d  Sat Jan 20 2018 17:02:38 GMT+0300 (Türkiye Standart Saati)  - dd =  Saturday, 20 January 2018
   }
   format(date){
      return moment(date).format('dddd, D MMMM YYYY');
   }

当然,此代码假设每行的大小相同,并且内容适合20个单位,更好的方法是不设置 <DataGrid ItemsSource="{Binding MyItems}" ColumnHeaderHeight="30" RowHeight="20" Height="130"/> 值,从中获取任何RowHeight代码隐藏,检查其GridDataRow并影响您的ActualHeight DataGrid值可以使用转换器绑定的自定义属性(或者如果您知道它将总是5倍,则对计算进行硬编码) Height)。这需要C#中的代码,您不想处理它。