wpf scrollviewer开始滚动到早期

Question

我需要一种使按钮在水平调整到较小尺寸时重叠文本块的方法。对于第一个示例，这可以正常工作，但是当我将相同的代码放在滚动浏览器中时，水平滚动栏从文本和按钮开始就开始了见面。 如何避免使用此功能，以使该按钮与没有ScrollViewer的情况相同？理想情况下，滚动应从文本块达到其最小宽度的那一刻开始。

      <StackPanel>
            <!--works-->
            <Grid Height="30" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                    <ColumnDefinition Width="Auto"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <TextBlock Text="testsdfqqsdfqsdqsdfqsdfqsdfqsdfqsdfsdqsdf"  HorizontalAlignment="Left"></TextBlock>
                <Button Grid.Column="1" MinWidth="20">te</Button>
            </Grid>

            <!--doesn't work-->
            <ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled">
                <Grid Height="30" >
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                        <ColumnDefinition Width="Auto"></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <TextBlock Text="testsdfqqsdfqsdqsdfqsdfqsdfqsdfqsdfsdqsdf"  HorizontalAlignment="Left"></TextBlock>
                    <Button Grid.Column="1" MinWidth="20">te</Button>
                </Grid>
            </ScrollViewer>
        </StackPanel>

更新 实际上，我可以将问题减少到滚动浏览器中的文本块。我希望，只有在达到文本块的最小宽度时，水平卷轴才有可能滚动。

    <ScrollViewer HorizontalScrollBarVisibility="Visible" 
                      VerticalScrollBarVisibility="Disabled">
        <TextBlock Background="Yellow" 
                   MinWidth="50">reallylooooooooooooooooooooong 
                   text</TextBlock>
    </ScrollViewer>

更新 I found a solution here

我不知道任何内容的自定义滚动浏览器是否足够聪明，可以以相同的方式行事？

<ScrollViewer HorizontalScrollBarVisibility="Visible" 
            VerticalScrollBarVisibility="Disabled"
            >
    <Grid Height="30" x:Name="grid">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <TextBlock Text="testsdfqqsdfqsdqsdfqsdfqsdfqsdfqsdfsdqsdf"  
                HorizontalAlignment="Left"
                MinWidth="150"
                Width="{Binding ElementName=grid, Path=ActualWidth, 
                 Converter={x:Static conv:WidthConverter.Instance}}"
                ></TextBlock>
        <Button Grid.Column="1" MinWidth="20">te</Button>
    </Grid>
</ScrollViewer>

Answer 1

如果要在面板中显示多个元素，由scrollviewer管辖，可以在itemscontrol scrollviewer内使用itemscontrol

<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled" >
      <ItemsControl >
        <Grid Height="30">
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
          </Grid.ColumnDefinitions>
          <TextBlock Text="testsdfqqsdfqsdqsdfqsdfqsdfqsdfqsdfsdqsdf"
                     HorizontalAlignment="Left"></TextBlock>
          <Button Grid.Column="1"
                  MinWidth="20">te</Button>
        </Grid>
        <Grid Height="30">
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
          </Grid.ColumnDefinitions>
          <TextBlock Text="testsdfqqsdfqsdqsdfqsdfqsdfqsdfqsdfsdqsdf"
                     HorizontalAlignment="Left"></TextBlock>
          <Button Grid.Column="1"
                  MinWidth="20">te</Button>
        </Grid>
      </ItemsControl>
    </ScrollViewer>

Answer 2

您需要重新绘制ScrollViewer控件。首先通过将光标移动到滚动视图控制器和属性窗格中，从而提取模板。模板 - ＆GT;转换为新资源（从下拉列表）。出现的新模板中的卷轴卷件是绘制“客户端区域”内部所有内容的内容：

<ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanHorizontallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}" CanVerticallyScroll="False" Grid.Column="0" Content="{TemplateBinding Content}" CanContentScroll="{TemplateBinding CanContentScroll}" Margin="{TemplateBinding Padding}" Grid.Row="0"/>

因此，将2列网格从模板外部移动到那里，然后将scrollContentPresenter移动到左列，并将您的按钮移至右边。您还应该将按钮的列宽度设置为“自动”，以便获得所需的所有空间。最终的ControlTemplate应该看起来像这样：

<ControlTemplate x:Key="ScrollViewerTemplate1" TargetType="{x:Type ScrollViewer}">
    <Grid x:Name="Grid" Background="{TemplateBinding Background}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Rectangle x:Name="Corner" Grid.Column="1" Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" Grid.Row="1"/>
        <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanHorizontallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}" CanVerticallyScroll="False" Grid.Column="0" Content="{TemplateBinding Content}" CanContentScroll="{TemplateBinding CanContentScroll}" Margin="{TemplateBinding Padding}" Grid.Row="0"/>
                <Button Grid.Column="1" MinWidth="20">te</Button>
            </Grid>
        </Grid>
        <ScrollBar x:Name="PART_VerticalScrollBar" AutomationProperties.AutomationId="VerticalScrollBar" Cursor="Arrow" Grid.Column="1" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Grid.Row="0" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>
        <ScrollBar x:Name="PART_HorizontalScrollBar" AutomationProperties.AutomationId="HorizontalScrollBar" Cursor="Arrow" Grid.Column="0" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Orientation="Horizontal" Grid.Row="1" Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportWidth}" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>
    </Grid>
</ControlTemplate>

并且您的XAML应该看起来像这样：

<StackPanel>
    <ScrollViewer Template="{DynamicResource ScrollViewerTemplate1}" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled">
        <Grid Height="30" >
            <TextBlock Text="testsdfqqsdfqsdqsdfqsdfqsdfqsdfqsdfsdqsdf"  HorizontalAlignment="Left"></TextBlock>
        </Grid>
    </ScrollViewer>
</StackPanel>

//i.sstatic.net/hsvva.png“ alt =”在此处输入图像描述”>

Answer 3

将完整的网格包装到scrollViewer中导致scrollviewer使其所有包含的元素可见IE可见。在您的情况下，它将使textblock和按钮可滚动。

要允许按钮剪辑textblock即textblock.text.text几乎超过textblock的实际宽度，您可以将textblock单独包装到scrollviewer。
这将导致textBlock能够隐藏或剪辑超过可用渲染宽度的文本，而用户仍然可以通过滚动完全查看它。

下面的示例将使滚动条出现，因为文本很快就对用户隐藏了，允许他仍然阅读所有文本：

<Grid Height="30">
  <Grid.ColumnDefinitions>
    <ColumnDefinition />
    <ColumnDefinition Width="Auto" />
  </Grid.ColumnDefinitions>
  <ScrollViewer HorizontalScrollBarVisibility="Auto"
                VerticalScrollBarVisibility="Disabled">
    <TextBlock Text="testsdfqqsdfqsdqsdfqsdfqsdfqsdfqsdfsdqsdf" />
  </ScrollViewer>
  <Button Grid.Column="1"
          HorizontalAlignment="Right"
          MinWidth="20">te</Button>
</Grid>

---

您的要求听起来像您想在用户中隐藏一定数量的文本，然后才能允许他滚动浏览。它使他能够阅读所有文本。
从用户体验的角度来看，我强烈建议您反对这种行为。
但是，为实现此目的，只需修改上面的示例即可向scrollViewer添加负面权利：

<Grid Height="30">
  <Grid.ColumnDefinitions>
    <ColumnDefinition />
    <ColumnDefinition Width="Auto" />
  </Grid.ColumnDefinitions>
  <ScrollViewer HorizontalScrollBarVisibility="Auto"
                VerticalScrollBarVisibility="Disabled"
                Padding="0,0,-150,0>
    <TextBlock Text="testsdfqqsdfqsdqsdfqsdfqsdfqsdfqsdfsdqsdf" />
  </ScrollViewer>
  <Button Grid.Column="1"
          HorizontalAlignment="Right"
          MinWidth="20">te</Button>
</Grid>

---

以上解决方案将剪辑超过文本，并将显示> scrollviewer在特定阈值之后（通过scrollviewer.padding），但不允许滚动整个隐藏的文本（仅在scrollviewer 变得可见）。

要启用整个隐藏文本的滚动，您可以定义一个简单的样式将padding重置为 0 0 （实际上，它将切换填充），一旦可见滚动条：

<Grid Height="30">
  <Grid.ColumnDefinitions>
    <ColumnDefinition /n>
    <ColumnDefinition Width="Auto" />
  </Grid.ColumnDefinitions>

  <ScrollViewer HorizontalScrollBarVisibility="Auto"
                VerticalScrollBarVisibility="Disabled">
    <ScrollViewer.Style>

      <!-- Optionally, move this Style to a ResourceDictionary (e.g. App.xaml), 
           to make it apply to all ScrollViewer instance within the scope -->
      <Style TargetType="ScrollViewer">
        <Setter Property="Padding"
                Value="0,0,-150,0" />
        <Style.Triggers>
          <Trigger Property="ComputedHorizontalScrollBarVisibility"
                   Value="Visible">
            <Setter Property="Padding"
                    Value="0" />
          </Trigger>
        </Style.Triggers>
      </Style>
    </ScrollViewer.Style>

    <TextBlock Text="testsdfqqsdfqsdqsdfqsdfqsdfqsdfqsdfsdqsdf" />
  </ScrollViewer>

  <Button Grid.Column="1"
          MinWidth="20">te</Button>
</Grid>