沿滚动条在 Scrollviewer 行中显示控件答案

【问题标题】：Show controls in Scrollviewer row along the Scrollbar沿滚动条在 Scrollviewer 行中显示控件
【发布时间】：2016-12-21 20:29:34
【问题描述】：

所以我有这种情况，我在ScrollViewer 中显示Grid。我想以不影响滚动功能的方式沿滚动条显示组合框和图像，像这样的东西：

目前，当滚动查看器变得可见时，它会出现在新行中，我如何在同一行中的控件上显示它？

这是我的 xaml 设计：

<DockPanel  LastChildFill="True">

    <!--Top Panel-->
    <Grid DockPanel.Dock="Top">
      --GridContent
    </Grid>

    <!--Bottom Panel-->
    <Grid DockPanel.Dock="Bottom">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>


        <ComboBox Grid.Column ="0"> 
        </ComboBox>

      <Image Grid.Column="1">

      </Image>
    </Grid>

    <ScrollViewer   HorizontalScrollBarVisibility="Auto"  HorizontalAlignment="Stretch"
                    VerticalScrollBarVisibility="Auto" VerticalAlignment="Stretch" >
        <Grid              
              HorizontalAlignment="Stretch" 
              VerticalAlignment="Stretch">
          -- Grid Content
        </Grid>
    </ScrollViewer>
</DockPanel>

目前它看起来像这样：

【问题讨论】：

除非你想做一些相当复杂的自定义模板，一个快速的解决方法是在滚动查看器中隐藏水平条可见性，而只使用绑定到你想要的滚动查看器的偏移和滚动更改属性的滚动条与。。。相互作用。做一个例子比我在空闲时间要花更长的时间，对不起，朋友
在您的示例中，您的 ScrollViewer 与组合框和图像不在同一个网格中。这是故意的吗？？
@Bryan 是的，因为我不希望这些控件在用户滚动时与网格内容一起流动。
@chris 小代码示例会很有帮助
有人吗？有人吗？

标签： c# wpf xaml scrollview

【解决方案1】：

我没有考虑在 XAML 中这样做，但你可以在后面的代码中这样做：

public partial class MainWindow : Window
{
    private void IncrementColumn(UIElement element)
    {
        Grid.SetColumn(element, Grid.GetColumn(element) + 1);
    }

    public MainWindow()
    {
        InitializeComponent();

        scrollPanel.ApplyTemplate();

        var horizontal = scrollPanel.Template.FindName("PART_HorizontalScrollBar", scrollPanel) as ScrollBar;
        var vertical = scrollPanel.Template.FindName("PART_VerticalScrollBar", scrollPanel) as ScrollBar;
        var presenter = scrollPanel.Template.FindName("PART_ScrollContentPresenter", scrollPanel) as ScrollContentPresenter;
        var corner = scrollPanel.Template.FindName("Corner", scrollPanel) as Rectangle;
        var grid = corner.Parent as Grid;

        grid.ColumnDefinitions.Insert(0, new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Auto) });
        IncrementColumn(horizontal);
        IncrementColumn(vertical);
        IncrementColumn(corner);
        Grid.SetColumnSpan(presenter, 2);

        var panel = new StackPanel() { Orientation = Orientation.Horizontal };
        panel.Children.Add(new ComboBox());
        panel.Children.Add(new Image());

        Grid.SetRow(panel, 1);
        Grid.SetColumn(panel, 0);
        grid.Children.Add(panel);
    }
}

这是与之配套的 XAML：

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        Title="MainWindow" Height="150" Width="525">
        <ScrollViewer
            Name="scrollPanel"
            HorizontalScrollBarVisibility="Visible"
            HorizontalAlignment="Stretch"
            VerticalScrollBarVisibility="Auto"
            VerticalAlignment="Stretch">
            <Grid              
                HorizontalAlignment="Stretch" 
                VerticalAlignment="Stretch">
                <Image Source="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg"/>
            </Grid>
        </ScrollViewer>
</Window>

【讨论】：

谢谢队友，很好的回答，我遵循了这种方法并在 XAML 中实现了它，就像一个魅力。
没问题，很高兴它帮助您找到了答案。我很想看看你的 XAML 解决方案。您可以将其添加到您的问题中吗？