【问题标题】:How to make a data-grid scrollable while placing a userControl under it in WPF app using XAML?如何使用 XAML 在 WPF 应用程序中放置 userControl 时使数据网格可滚动?
【发布时间】:2018-02-24 23:00:00
【问题描述】:

我有一个 WPF 应用程序。我正在将数据渲染到数据网格中。我希望 DataGrid 根据需要扩展屏幕的整个高度。如果数据多于屏幕高度,我想自动显示滚动条。

此外,在数据网格下方,我有一个 ContentControl 部分,它呈现数据的分页。如果需要在数据网格周围显示滚动条,我如何将这两个同时放置在彼此下方。

这是我的XAML 代码

<Grid Style="{StaticResource ContentRoot}">
    <StackPanel>

        <DataGrid ItemsSource="{Binding Vendors}"
                  SelectedItem="{Binding SelectedVendor}"
                  AutoGenerateColumns="False"
                  HorizontalAlignment="Stretch"
                  VerticalAlignment="Center"
                  CanUserAddRows="False"
                  VerticalContentAlignment="Center"
                  ScrollViewer.CanContentScroll="True"
                  ScrollViewer.VerticalScrollBarVisibility="Auto"
                  ScrollViewer.HorizontalScrollBarVisibility="Auto">

            <DataGrid.Columns>

            <DataGridTextColumn Header="Name"
                                Binding="{Binding Name}"
                                />
                <DataGridTextColumn Header="Account Number"
                                    Binding="{Binding AccountCode}" />

                <DataGridTemplateColumn>
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Button VerticalAlignment="Center"
                                    Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type DataGrid}},
                                    Path=DataContext.ShowVendor}"
                                    CommandParameter="{Binding}">
                                <StackPanel Orientation="Horizontal">

                                    <fa:FontAwesome Icon="Eye"
                                                    FontSize="18" />
                                    <Label Content="Details" 
                                           Padding="7 0 0 0" />
                                </StackPanel>
                            </Button>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>

                <DataGridTemplateColumn>
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Button VerticalAlignment="Center"
                                    Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type DataGrid}},
                                                      Path=DataContext.DeleteVendor}"
                                    CommandParameter="{Binding}">
                                <StackPanel Orientation="Horizontal">

                                    <fa:FontAwesome Icon="Trash"
                                                    FontSize="18" />
                                    <Label Content="Delete"
                                           Padding="7 0 0 0" />
                                </StackPanel>
                            </Button>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>

            </DataGrid.Columns>

        </DataGrid>


        <ContentControl Content="{Binding PageMeta}"></ContentControl>

    </StackPanel>

</Grid>

我还尝试添加DockPanel 并用ScrollViewer 包装我的数据网格,但这也不起作用。滚动条有效,但 PageMeta 内容控件不可见。

这是我添加 ScrollViewer 的方式

<Grid Style="{StaticResource ContentRoot}">

    <DockPanel>
        <ScrollViewer DockPanel.Dock="Top">
        <StackPanel >

                <DataGrid ItemsSource="{Binding Vendors}"
                          SelectedItem="{Binding SelectedVendor}"
                          AutoGenerateColumns="False"
                          HorizontalAlignment="Stretch"
                          VerticalAlignment="Center"
                          CanUserAddRows="False"
                          VerticalContentAlignment="Center">

                    <DataGrid.Columns>

                        <DataGridTextColumn Header="Name"
                                            Binding="{Binding Name}" />
                        <DataGridTextColumn Header="Account Number"
                                            Binding="{Binding AccountCode}" />

                        <DataGridTemplateColumn>
                            <DataGridTemplateColumn.CellTemplate>
                                <DataTemplate>
                                    <Button VerticalAlignment="Center"
                                            Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type DataGrid}},
                                            Path=DataContext.ShowVendor}"
                                            CommandParameter="{Binding}">
                                        <StackPanel Orientation="Horizontal">

                                            <fa:FontAwesome Icon="Eye"
                                                            FontSize="18" />
                                            <Label Content="Details"
                                                   Padding="7 0 0 0" />
                                        </StackPanel>
                                    </Button>
                                </DataTemplate>
                            </DataGridTemplateColumn.CellTemplate>
                        </DataGridTemplateColumn>

                        <DataGridTemplateColumn>
                            <DataGridTemplateColumn.CellTemplate>
                                <DataTemplate>
                                    <Button VerticalAlignment="Center"
                                            Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type DataGrid}},
                                                              Path=DataContext.DeleteVendor}"
                                            CommandParameter="{Binding}">
                                        <StackPanel Orientation="Horizontal">

                                            <fa:FontAwesome Icon="Trash"
                                                            FontSize="18" />
                                            <Label Content="Delete"
                                                   Padding="7 0 0 0" />
                                        </StackPanel>
                                    </Button>
                                </DataTemplate>
                            </DataGridTemplateColumn.CellTemplate>
                        </DataGridTemplateColumn>

                    </DataGrid.Columns>

                </DataGrid>


        </StackPanel>
        </ScrollViewer>
        <StackPanel DockPanel.Dock="Bottom">
            <ContentControl Content="{Binding PageMeta}"></ContentControl>

        </StackPanel>

    </DockPanel>

</Grid>

【问题讨论】:

  • 您的问题不清楚,为什么在有滚动条的同时需要分页控件,而且还要覆盖网格?更好的解释和截图肯定会有所帮助。
  • 用户可以选择每页显示 50 条记录。这需要滚动条。虽然用户需要能够导航到下一页...但是如果用户选择每页显示 15 条记录,则不会有滚动条,但仍然会有分页
  • 好的,您是否使用 Snoop 或 Live Property Explorer (docs.microsoft.com/en-us/visualstudio/debugger/…) 检查了您的控件发生了什么情况?
  • 添加滚动查看器以包含您的 ContentControl

标签: c# wpf xaml datagrid


【解决方案1】:

这成功了

<DockPanel Style="{StaticResource ContentRoot}"
           Margin="0"
           LastChildFill="True"
           VerticalAlignment="Top">

    <StackPanel DockPanel.Dock="Bottom" Margin="0 10 0 0">
        <ContentControl Content="{Binding PageMeta}"></ContentControl>
    </StackPanel>


    <ScrollViewer VerticalScrollBarVisibility="Auto" VerticalAlignment="Top">

            <DataGrid ItemsSource="{Binding Vendors}"
                        SelectedItem="{Binding SelectedVendor}"
                        AutoGenerateColumns="False"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Center"
                        CanUserAddRows="False"
                        VerticalContentAlignment="Center">

            <DataGrid.Columns>

                <DataGridTextColumn Header="Name"
                                    Binding="{Binding Name}" />
                <DataGridTextColumn Header="Account Number"
                                    Binding="{Binding AccountCode}" />

                <DataGridTemplateColumn>
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Button VerticalAlignment="Center"
                                    Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type DataGrid}},
                                        Path=DataContext.ShowVendor}"
                                    CommandParameter="{Binding}">
                                <StackPanel Orientation="Horizontal">

                                    <fa:FontAwesome Icon="Eye"
                                                    FontSize="18" />
                                    <Label Content="Details"
                                           Padding="7 0 0 0" />
                                </StackPanel>
                            </Button>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>

                <DataGridTemplateColumn>
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Button VerticalAlignment="Center"
                                    Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type DataGrid}},
                                                            Path=DataContext.DeleteVendor}"
                                    CommandParameter="{Binding}">
                                <StackPanel Orientation="Horizontal">

                                    <fa:FontAwesome Icon="Trash"
                                                    FontSize="18" />
                                    <Label Content="Delete"
                                           Padding="7 0 0 0" />
                                </StackPanel>
                            </Button>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>

            </DataGrid.Columns>
        </DataGrid>


    </ScrollViewer>



</DockPanel>

【讨论】:

    猜你喜欢
    • 2014-11-28
    • 1970-01-01
    • 1970-01-01
    • 2019-12-08
    • 2018-11-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-08-09
    相关资源
    最近更新 更多