WPF：如何使用ScrollBar滾動Grid？

我知道你可以在ScrollViewer中包裝網格，並且滾動會自動進行。不過，我想在網格周圍製作自己的滾動條。到目前爲止，當我在網格中移動時，我設法將滾動條與網格同步。但是，當我單擊滾動條時，找不到Grid的屬性或方法使其滾動。我確信它是可行的，因爲SchollViewer已經在做它了。非常感謝您的提示。WPF：如何使用ScrollBar滾動Grid？

更新：事實上，我想要的是創建一個Excel控件的電子表格。我使用網格佈局創建了電子表格，看起來工作正常。但是，我遇到了滾動問題。在網格周圍添加一個ScrollViewer將使整個網格滾動。不過，我希望能夠凍結滾動的一些行和/或列。另外，使用ScrollViewer，水平滾動條覆蓋整個底部。但是，就像在Excel中一樣，我想留出一些空間來添加一些標籤。這可能只是通過重新設置ScrollViewer？

我在http://social.msdn.microsoft.com/Forums/en/wpf/thread/e495a0cb-0104-4475-8627-3b40cd617fc1找到一篇文章，建議在幾個子網格中拆分網格以實現凍結頭文件。但是，如果您有許多列，則效果不佳。此外，這種方法不夠靈活，不允許用戶選擇冰點區域。

來源

2012-12-06 newman

您是否有構建自定義滾動查看器的原因？ –

嗯，我想製作一個更像Excel滾動條的自定義滾動條。 – newman

它的WPF，只是樣式你的滾動條，但你希望它看起來。 –

樣式滾動條可以是一個有點棘手，但我有上手（基於的表達方式），你的風格，你可以刪除你不需要/不想位，改變顏色等

Scollbar風格例如：

<Color x:Key="MainColor">#FF595959</Color> 
<Color x:Key="BlackColor">#FF000000</Color> 
<Color x:Key="WhiteColor">#FFFFFFFF</Color> 

<SolidColorBrush x:Key="NormalBrush" Color="{StaticResource MainColor}" /> 
<SolidColorBrush x:Key="NormalBorderBrush" Color="#FF393939" /> 
<SolidColorBrush x:Key="GlyphBrush" Color="#FFD1D1D1" /> 

<LinearGradientBrush x:Key="PressedBrush" EndPoint="0.5,0.971" StartPoint="0.5,0.042"> 
    <GradientStop Color="#4C000000" Offset="0" /> 
    <GradientStop Color="#26FFFFFF" Offset="1" /> 
    <GradientStop Color="#4C000000" Offset="0.467" /> 
    <GradientStop Color="#26FFFFFF" Offset="0.479" /> 
</LinearGradientBrush> 


<Style TargetType="{x:Type RepeatButton}" BasedOn="{x:Null}"> 
    <Setter Property="Background" Value="{DynamicResource NormalBrush}" /> 
    <Setter Property="BorderBrush" Value="{DynamicResource NormalBorderBrush}" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type RepeatButton}"> 
       <ControlTemplate.Resources> 
        <Storyboard x:Key="HoverOn"> 
         <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="(UIElement.Opacity)"> 
          <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.8"/> 
         </DoubleAnimationUsingKeyFrames> 
        </Storyboard> 
        <Storyboard x:Key="HoverOff"> 
         <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="(UIElement.Opacity)"> 
          <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0.3"/> 
         </DoubleAnimationUsingKeyFrames> 
        </Storyboard> 
        <Storyboard x:Key="PressedOn"> 
         <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="(UIElement.Opacity)"> 
          <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.1"/> 
         </DoubleAnimationUsingKeyFrames> 
        </Storyboard> 
        <Storyboard x:Key="PressedOff"> 
         <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="(UIElement.Opacity)"> 
          <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0.3"/> 
         </DoubleAnimationUsingKeyFrames> 
        </Storyboard> 
       </ControlTemplate.Resources> 
       <Grid> 
        <Border x:Name="Border" BorderThickness="{TemplateBinding BorderThickness}" Opacity="1" /> 
        <ContentPresenter HorizontalAlignment="Center" x:Name="ContentPresenter" VerticalAlignment="Center" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" Opacity="0.3" Height="Auto" /> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsKeyboardFocused" Value="true" /> 
        <Trigger Property="IsMouseOver" Value="true"> 
         <Trigger.ExitActions> 
          <BeginStoryboard Storyboard="{StaticResource HoverOff}" x:Name="HoverOff_BeginStoryboard"/> 
         </Trigger.ExitActions> 
         <Trigger.EnterActions> 
          <BeginStoryboard Storyboard="{StaticResource HoverOn}"/> 
         </Trigger.EnterActions> 
        </Trigger> 
        <Trigger Property="IsPressed" Value="true"> 
         <Trigger.ExitActions> 
          <BeginStoryboard Storyboard="{StaticResource PressedOff}" x:Name="PressedOff_BeginStoryboard"/> 
         </Trigger.ExitActions> 
         <Trigger.EnterActions> 
          <BeginStoryboard Storyboard="{StaticResource PressedOn}" x:Name="PressedOn_BeginStoryboard"/> 
         </Trigger.EnterActions> 
        </Trigger> 
        <Trigger Property="IsEnabled" Value="false"> 
         <Setter Property="Opacity" TargetName="ContentPresenter" Value="0.1"/> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

<Style x:Key="NuclearThumbStyle" TargetType="{x:Type Thumb}" BasedOn="{x:Null}"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Thumb}"> 
       <ControlTemplate.Resources> 
        <Storyboard x:Key="HoverOn"> 
         <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="HoverRectangle" Storyboard.TargetProperty="(UIElement.Opacity)"> 
          <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.8"/> 
         </DoubleAnimationUsingKeyFrames> 
        </Storyboard> 
        <Storyboard x:Key="HoverOff"> 
         <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="HoverRectangle" Storyboard.TargetProperty="(UIElement.Opacity)"> 
          <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0.3"/> 
         </DoubleAnimationUsingKeyFrames> 
        </Storyboard> 
        <Storyboard x:Key="PressedOn"> 
         <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PressedRectangle" Storyboard.TargetProperty="(UIElement.Opacity)"> 
          <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.1"/> 
         </DoubleAnimationUsingKeyFrames> 
        </Storyboard> 
        <Storyboard x:Key="PressedOff"> 
         <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PressedRectangle" Storyboard.TargetProperty="(UIElement.Opacity)"> 
          <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0.3"/> 
         </DoubleAnimationUsingKeyFrames> 
        </Storyboard> 
       </ControlTemplate.Resources> 
       <Grid Margin="0,0,0,0" x:Name="Grid"> 
        <Rectangle HorizontalAlignment="Stretch" x:Name="HoverRectangle" VerticalAlignment="Stretch" Width="Auto" Height="Auto" RadiusX="3" RadiusY="4" Stroke="{x:Null}" Margin="4.5,-2,4.5,-2" Opacity="0.3" MinHeight="10"> 
         <Rectangle.Fill> 
          <SolidColorBrush Color="{DynamicResource WhiteColor}" /> 
         </Rectangle.Fill> 
        </Rectangle> 
        <Rectangle HorizontalAlignment="Stretch" x:Name="PressedRectangle" VerticalAlignment="Stretch" Width="Auto" Height="Auto" RadiusX="3" RadiusY="4" Stroke="{x:Null}" Margin="4.5,-2,4.5,-2" Opacity="0.3" MinHeight="10"> 
         <Rectangle.Fill> 
          <SolidColorBrush Color="{DynamicResource WhiteColor}" /> 
         </Rectangle.Fill> 
        </Rectangle> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsFocused" Value="True" /> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <Trigger.ExitActions> 
          <BeginStoryboard Storyboard="{StaticResource HoverOff}" x:Name="HoverOff_BeginStoryboard"/> 
         </Trigger.ExitActions> 
         <Trigger.EnterActions> 
          <BeginStoryboard Storyboard="{StaticResource HoverOn}"/> 
         </Trigger.EnterActions> 
        </Trigger> 
        <Trigger Property="IsEnabled" Value="False" > 
         <Setter Property="Opacity" TargetName="Grid" Value="0.1"/> 
        </Trigger> 
        <Trigger Property="IsDragging" Value="True"> 
         <Trigger.ExitActions> 
          <BeginStoryboard Storyboard="{StaticResource PressedOff}" x:Name="PressedOff_BeginStoryboard"/> 
         </Trigger.ExitActions> 
         <Trigger.EnterActions> 
          <BeginStoryboard Storyboard="{StaticResource PressedOn}" x:Name="PressedOn_BeginStoryboard"/> 
         </Trigger.EnterActions> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

<Style x:Key="NuclearScrollRepeatButtonStyle" TargetType="{x:Type RepeatButton}"> 
    <Setter Property="Background" Value="Transparent" /> 
    <Setter Property="BorderBrush" Value="Transparent" /> 
    <Setter Property="IsTabStop" Value="false" /> 
    <Setter Property="Focusable" Value="false" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type RepeatButton}"> 
       <Grid> 
        <Rectangle Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}" /> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

<Style TargetType="{x:Type ScrollBar}"> 
    <Setter Property="Stylus.IsFlicksEnabled" Value="false" /> 
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type ScrollBar}"> 
       <Grid x:Name="GridRoot" Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Background="{DynamicResource NormalBrush}"> 
        <Grid.RowDefinitions> 
         <RowDefinition MaxHeight="18" /> 
         <RowDefinition Height="0.00001*" /> 
         <RowDefinition MaxHeight="18" /> 
        </Grid.RowDefinitions> 
        <RepeatButton x:Name="DecreaseRepeat" Command="ScrollBar.LineUpCommand" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}"> 
         <Grid Margin="0,0,0,0"> 
          <Path Margin="4.742,3.997,4.946,5.327" VerticalAlignment="Stretch" Height="Auto" Fill="{DynamicResource GlyphBrush}" Stretch="Fill" Stroke="{DynamicResource GlyphBrush}" StrokeThickness="1" Data="M5.2422477,11.132184 L11.5544,11.132184 8.6412958,4.4969033 z" x:Name="DecreaseArrow" /> 
         </Grid> 
        </RepeatButton> 
        <Track Grid.Row="1" x:Name="PART_Track" Orientation="Vertical" IsDirectionReversed="true"> 
         <Track.Thumb> 
          <Thumb Style="{DynamicResource NuclearThumbStyle}" Background="{x:Null}" Foreground="{x:Null}" /> 
         </Track.Thumb> 
         <Track.IncreaseRepeatButton> 
          <RepeatButton x:Name="PageUp" Style="{DynamicResource NuclearScrollRepeatButtonStyle}" Command="ScrollBar.PageDownCommand" /> 
         </Track.IncreaseRepeatButton> 
         <Track.DecreaseRepeatButton> 
          <RepeatButton x:Name="PageDown" Style="{DynamicResource NuclearScrollRepeatButtonStyle}" Command="ScrollBar.PageUpCommand" /> 
         </Track.DecreaseRepeatButton> 
        </Track> 
        <RepeatButton Grid.Row="2" x:Name="IncreaseRepeat" Command="ScrollBar.LineDownCommand"> 
         <Grid> 
          <Path Margin="4.742,3.997,4.946,5.327" x:Name="IncreaseArrow" VerticalAlignment="Stretch" Height="Auto" Fill="{DynamicResource GlyphBrush}" Stretch="Fill" Stroke="{DynamicResource GlyphBrush}" StrokeThickness="1" Data="M5.2422477,11.132184 L11.5544,11.132184 8.6412958,4.4969033 z" RenderTransformOrigin="0.5,0.5"> 
           <Path.RenderTransform> 
            <TransformGroup> 
             <ScaleTransform ScaleX="1" ScaleY="1" /> 
             <SkewTransform AngleX="0" AngleY="0" /> 
             <RotateTransform Angle="180" /> 
             <TranslateTransform X="0" Y="0" /> 
            </TransformGroup> 
           </Path.RenderTransform> 
          </Path> 
         </Grid> 
        </RepeatButton> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="Orientation" Value="Horizontal"> 
         <Setter Property="LayoutTransform" TargetName="GridRoot"> 
          <Setter.Value> 
           <RotateTransform Angle="-90" /> 
          </Setter.Value> 
         </Setter> 
         <Setter TargetName="PART_Track" Property="Orientation" Value="Vertical" /> 
         <Setter Property="Command" Value="ScrollBar.LineLeftCommand" TargetName="DecreaseRepeat" /> 
         <Setter Property="Command" Value="ScrollBar.LineRightCommand" TargetName="IncreaseRepeat" /> 
         <Setter Property="Command" Value="ScrollBar.PageLeftCommand" TargetName="PageDown" /> 
         <Setter Property="Command" Value="ScrollBar.PageRightCommand" TargetName="PageUp" /> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style>

風格：

enter image description here

來源

2012-12-07 03:53:23

感謝您的風格。實際上，我並不擔心滾動條的外觀。它實際上歸結爲兩個問題：1.如何從滾動中凍結網格的一部分（例如網格標題，但可能不止是標題）。 2.如何在Excel中的選項卡上添加水平滾動條旁邊的額外內容。看着圍繞Grid的ScrollViewer，我無法弄清楚如何做這兩件事。 – newman

WPF：如何使用ScrollBar滾動Grid？

回答

相關問題