【发布时间】: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