WPF Canvas标尺滚动条问题

Question

即使滚动条可见，我也希望标尺始终可见。参阅下图

如果我向下滚动或滚动到右，两个帆布统治者会因为我滚动整个面板底部/右边消失。两个统治者都是Dock.Left和Dock.To.

如何设置两个统治者总是可见，即使我向右滚动到下一路。我无法将滚动条放在侧面板上，因为左标尺需要根据垂直滚动进行上下移动，而水平标尺需要按照水平滚动左右移动。

Answer 1

我能想到这样做的最好的方式是通过使一个自定义的控件来封装像以下行为：

public class RulerScrollViewer : ScrollViewer 
{ 
    static RulerScrollViewer() 
    { 
     DefaultStyleKeyProperty.OverrideMetadata(typeof(RulerScrollViewer), new FrameworkPropertyMetadata(typeof(RulerScrollViewer))); 
    } 

    public override void OnApplyTemplate() 
    { 
     base.OnApplyTemplate(); 

     this.ScrollChanged -= RulerScrollViewer_ScrollChanged; 
     this.ScrollChanged += RulerScrollViewer_ScrollChanged; 
    } 

    void RulerScrollViewer_ScrollChanged(object sender, ScrollChangedEventArgs e) 
    { 
     var h = this.Template.FindName("PART_HorizontalRulerScrollViewer", this) as ScrollViewer; 

     if (h != null) 
      h.ScrollToHorizontalOffset(this.HorizontalOffset); 

     var v = this.Template.FindName("PART_VerticalRulerScrollViewer", this) as ScrollViewer; 
     if (v != null) 
      v.ScrollToVerticalOffset(this.VerticalOffset); 
    } 
} 

public class HorizontalRuler : Control 
{ 
    protected override void OnRender(DrawingContext drawingContext) 
    { 
     for (int i = 0; i < this.ActualWidth/100; i++) 
     { 
      var ft = new FormattedText(i.ToString(), CultureInfo.CurrentUICulture, FlowDirection.LeftToRight, new Typeface("Tahoma"), 8, Brushes.Black); 
      drawingContext.DrawText(ft, new Point(i * 100, 0)); 
     } 
    } 
} 

public class VerticallRuler : Control 
{ 
    protected override void OnRender(DrawingContext drawingContext) 
    { 
     for (int i = 0; i < this.ActualHeight/100; i++) 
     { 
      var ft = new FormattedText(i.ToString(), CultureInfo.CurrentUICulture, FlowDirection.LeftToRight, new Typeface("Tahoma"), 8, Brushes.Black); 
      drawingContext.DrawText(ft, new Point(0, i*100)); 
     } 
    } 
} 

的东西，如在generic.xaml以下为它：

<ControlTemplate x:Key="RulerScrollViewer_Template" TargetType="local:RulerScrollViewer"> 
    <Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="Auto" /> 
      <ColumnDefinition /> 
      <ColumnDefinition Width="Auto" /> 
     </Grid.ColumnDefinitions> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto" /> 
      <RowDefinition /> 
      <RowDefinition Height="Auto" /> 
     </Grid.RowDefinitions> 

     <ScrollViewer x:Name="PART_HorizontalRulerScrollViewer" Grid.Row="0" Grid.Column="1" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"> 
      <local:HorizontalRuler Width="{Binding ElementName=content,Path=ExtentWidth}" Height="20" /> 
     </ScrollViewer> 

     <ScrollViewer x:Name="PART_VerticalRulerScrollViewer" Grid.Row="1" Grid.Column="0" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"> 
      <local:VerticallRuler Height="{Binding ElementName=content,Path=ExtentHeight}" Width="20" /> 
     </ScrollViewer> 

     <ScrollContentPresenter Name="content" Grid.Row="1" Grid.Column="1" /> 

     <ScrollBar x:Name="PART_VerticalScrollBar" 
        Grid.Row="1" Grid.Column="2" 
        Value="{TemplateBinding VerticalOffset}" 
        Maximum="{TemplateBinding ScrollableHeight}" 
        ViewportSize="{TemplateBinding ViewportHeight}" 
        Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/> 

     <ScrollBar x:Name="PART_HorizontalScrollBar" 
        Orientation="Horizontal" 
        Grid.Row="2" Grid.Column="1" 
        Value="{TemplateBinding HorizontalOffset}" 
        Maximum="{TemplateBinding ScrollableWidth}" 
        ViewportSize="{TemplateBinding ViewportWidth}" 
        Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/> 

    </Grid> 
</ControlTemplate> 

<Style TargetType="{x:Type local:RulerScrollViewer}"> 
    <Setter Property="Template" Value="{StaticResource RulerScrollViewer_Template}" /> 
</Style> 

---

编辑：

我为使其自定义控件的理由是BEC因为我想确定水平尺的宽度和垂直尺的高度与可见内容尺寸相同。这是因为我没有看到统治者以与内容稍微不同的速率移动的奇怪行为，因为可见内容区域与ScrollViewer内的滚动条略小。