首页 文章

WPF ScrollViewer为我的listview（在网格行中）提供整个屏幕而不是一部分

提问于
浏览 次
1

我的usercontrol上的主网格有3行 . 顶行是一个数据绑定的listvew，占整个窗口的大约60％（可显示的数据行数量更多，listview自动显示滚动条 - 这很好） . 第二行是网格分析器，第三行占用显示器的其余部分 .

第3行有一个包裹在边框中的网格，还包含一个包装并可以变大的文本框 . 当它这样做时，它有时会将按钮推到屏幕的最底部，所以我想如果我在主网格周围包裹一个ScrollViewer，我会在屏幕上以与现有listview滚动条相同的比例保留我的3行保持原样，然后只需在右侧获得一个额外的滚动条，如果第三行变得太高，我可以向下滚动查看按钮（就像你在这个浏览器页面上做的那样，滚动条代码和页面滚动条也是如此） .

相反的是，列表视图的第一行已经垂直扩展以占据整个屏幕，直到我滚动到列表视图中所有项目的末尾，我才能看到第2行或第3行 . 我已经尝试了各种硬编码行高度的组合（糟糕，我知道）'自动'和'*'现在可用 .

有没有办法完成我正在尝试的东西？我不认为我必须（并且不想）重新设计整个屏幕 .

谢谢，我是WPF的新手，很有趣但有时非常令人沮丧！

我在下面发布了一些XAML，但我不确定它会有所帮助 .

<ScrollViewer>
    <Grid Name="grdEvents" HorizontalAlignment="Center" >
    <Grid.RowDefinitions>
        <RowDefinition Height="60*" />
        <RowDefinition Height="10" />
        <RowDefinition Height="30*"/>
    </Grid.RowDefinitions>
    <ListView SelectionChanged="lvActivities_SelectionChanged" MouseDoubleClick="ListView_MouseDoubleClick" Grid.Row="0" Name="lvActivities" HorizontalAlignment="Stretch" LVLO:ListViewLayoutManager.Enabled="True" >
        <!--ItemContainerStyle="{StaticResource SelectedItem}"   MouseEnter="lvActivities_MouseEnter"  -->

        <ListView.ItemContainerStyle>
            <Style TargetType="ListBoxItem">

...

</ListView>


    <GridSplitter Grid.Row="1" Height="5" HorizontalAlignment="Stretch">  </GridSplitter>

    <Border Grid.Row="2" CornerRadius="20" 
            BorderBrush="Gray"
            Background="White"
            BorderThickness="2"
            Padding="8">

        <Grid Name="wpCurrentRow" DataContext="{Binding ElementName=lvActivities, Path=SelectedItem}" Grid.Row="2" Background="{StaticResource ResourceKey=MyBackGroundBrush}">
wpf xaml scrollviewer

2 回答

  • 1

    而不是使用比例，在行上使用硬编码高度 . 将第一行的60 *更改为60 .

    也只是为了实验，你可以试试这个：

    <Grid.RowDefinitions>
    <RowDefinition Height="2*"/>
    <RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ListBox Name="ListBox1" HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100" Grid.Row="0" Background="Blue"/>
<ScrollViewer Grid.Row="1">
    <StackPanel >   
        <Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Click="Button_Click" />
        <TextBox>Hello </TextBox>
    </StackPanel>
</ScrollViewer>

    它将滚动查看器添加到第二行，然后使用堆栈面板存储其余元素 . 它也让它看起来更好一些 .

    这些元素只是添加了例如;用你自己的替换它们 .

    回复于
  • 0

    我认为你不能用相对的行大小来完成你想要的东西 . 但是，只要ScrollViewer的大小发生变化，您可以手动设置与顶行成比例的高度 . 但是，由于您还有一个分离器，一旦用户手动调整高度，您将需要停止这样做 . 看看这个：

    XAML：

    <Window x:Class="StackOverflow.Wpf.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Grid>
    <ScrollViewer x:Name="_scrollViewer">
      <Grid>
        <Grid.RowDefinitions>
          <RowDefinition x:Name="_mainRow" />
          <RowDefinition Height="Auto" />
          <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <ListView />

        <GridSplitter x:Name="_splitter"
                      Grid.Row="1"
                      Height="5"
                      HorizontalAlignment="Stretch"
                      ResizeDirection="Rows"
                      ResizeBehavior="PreviousAndNext"
                      MouseDoubleClick="OnSplitterMouseDoubleClick" />

        <Grid Grid.Row="2" />
      </Grid>
    </ScrollViewer>
  </Grid>
</Window>

    代码背后：

    public partial class MainWindow
{
    private bool _shouldUpdateGridLayout;

    public MainWindow()
    {
        InitializeComponent();
        EnsureGridLayoutUpdates();
    }

    private void EnsureGridLayoutUpdates()
    {
        if (_shouldUpdateGridLayout)
            return;

        _scrollViewer.SizeChanged += OnScrollViewerSizeChanged;
        _splitter.DragCompleted += OnSplitterDragCompleted;
        _shouldUpdateGridLayout = true;
    }

    private void CancelGridLayoutUpdates()
    {
        if (!_shouldUpdateGridLayout)
            return;

        _scrollViewer.SizeChanged -= OnScrollViewerSizeChanged;
        _splitter.DragCompleted -= OnSplitterDragCompleted;
        _shouldUpdateGridLayout = false;
    }

    private void UpdateGridLayout()
    {
        _mainRow.Height = new GridLength(2 * _scrollViewer.ActualHeight / 3);
    }

    private void OnScrollViewerSizeChanged(object s, SizeChangedEventArgs e)
    {
        UpdateGridLayout();
    }

    private void OnSplitterDragCompleted(object s, DragCompletedEventArgs e)
    {
        CancelGridLayoutUpdates();
    }

    private void OnSplitterMouseDoubleClick(object s, MouseButtonEventArgs e)
    {
        EnsureGridLayoutUpdates();
        UpdateGridLayout();

        // Handle the event to prevent DragCompleted from being raised
        // in response to the double-click.
        e.Handled = true;
    }
}

    请注意，当用户双击拆分器时，我选择恢复默认大小和自动大小管理 . 这不是最漂亮的解决方案，但它使用固定的高度 . 随意将行为封装在自定义面板/控件中 .

    回复于

相关问题