堆栈内存溢出
  简体   繁体   English

如何使用XAML在WPF应用程序中将userControl放在其下方的同时使数据网格可滚动？

[英]How to make a data-grid scrollable while placing a userControl under it in WPF app using XAML?

 原文  2018-02-24 04:47:24  5   1    c#/ wpf/ xaml/ datagrid

问题描述

I have a WPF application. 我有一个WPF应用程序。 I am rendering the data into a data-grid. 我正在将数据渲染到数据网格中。 I want the DataGrid to expand as need to take the full height of the screen. 我希望DataGrid能够根据需要扩展到整个屏幕高度。 If there are more data than the height of the screen, I want to automatically show scrollbar. 如果数据多于屏幕高度，我想自动显示滚动条。

Also, below the data-grid, I have a ContentControl section which renders a pagination for the data. 另外，在数据网格下方，我有一个ContentControl部分，该部分呈现数据的分页。 How can I place these two under each other at the same time while showing scroll bar if needed around the data-grid. 如果需要围绕数据网格，如何在显示滚动条的同时将这两个对象放在一起。

Here is my XAML code 这是我的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>

I also tried to add DockPanel and wrap my datagrid with ScrollViewer but that did not work either. 我还尝试添加DockPanel并用ScrollViewer包装我的数据网格，但这也不起作用。 The scroll bar works but the PageMeta Content Control is not visible. 滚动条可以使用，但是PageMeta Content Control不可见。

Here is how I added the ScrollViewer 这是我添加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>

1 个解决方案

解决方案1
 0  2018-02-24 15:00:00

This did the trick 这成功了 

<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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使用XAML的WPF用户控件数据绑定 - wpf usercontrol data-binding using xaml 如何将数据网格导出到报表以进行打印 - How to Export data-grid to a report for printing 使用实体框架将数据绑定到WPF中的数据网格 - Binding data to a data-grid in WPF with Entity Framework 如何通过 MVVM 在 WPF 数据网格中实现汇总行（总行） - How to implement summary rows(Total rows) in WPF data-grid via MVVM 在WPF中的数据网格中获取多个选定的行？ - Get the multiple selected Row in data-grid in WPF? 如何在网格中放置一个 XAML 用户控件 - How to place an XAML usercontrol in a grid 使XAML在网格下可见 - Make XAML visible under Grid WPF：数据网格不能水平滚动 - WPF: Data Grid not horizontally scrollable 具有动态调整UserControl大小的WPF XAML数据绑定 - WPF XAML data binding with dynamically resizing UserControl 如何在XAML中将网格绑定到UserControl属性？ - How to bind a Grid to a UserControl Property in XAML?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM