WPF滾動條風格

我用下面的風格像滾動的蘋果： WPF滾動條風格

    <Track x:Name="PART_Track" Grid.Row="0" IsDirectionReversed="true" Focusable="false"> 
         <Track.Thumb> 
          <Thumb x:Name="Thumb" Background="{TemplateBinding Foreground}" Style="{DynamicResource ScrollThumbs}" /> 
         </Track.Thumb> 
         <Track.IncreaseRepeatButton> 
          <RepeatButton x:Name="PageUp" Command="ScrollBar.PageDownCommand" Opacity="0" Focusable="false" /> 
         </Track.IncreaseRepeatButton> 
         <Track.DecreaseRepeatButton> 
          <RepeatButton x:Name="PageDown" Command="ScrollBar.PageUpCommand" Opacity="0" Focusable="false" /> 
         </Track.DecreaseRepeatButton> 
        </Track> 
       </Grid> 

       <ControlTemplate.Triggers> 
        <Trigger SourceName="Thumb" Property="IsMouseOver" Value="true"> 
         <Setter Value="{DynamicResource ButtonSelectBrush}" TargetName="Thumb" Property="Background" /> 
        </Trigger> 
        <Trigger SourceName="Thumb" Property="IsDragging" Value="true"> 
         <Setter Value="{DynamicResource DarkBrush}" TargetName="Thumb" Property="Background" /> 
        </Trigger> 

        <Trigger Property="IsEnabled" Value="false"> 
         <Setter TargetName="Thumb" Property="Visibility" Value="Collapsed" /> 
        </Trigger> 
        <Trigger Property="Orientation" Value="Horizontal"> 
         <Setter TargetName="GridRoot" Property="LayoutTransform"> 
          <Setter.Value> 
           <RotateTransform Angle="-90" /> 
          </Setter.Value> 
         </Setter> 
         <Setter TargetName="PART_Track" Property="LayoutTransform"> 
          <Setter.Value> 
           <RotateTransform Angle="-90" /> 
          </Setter.Value> 
         </Setter> 
         <Setter Property="Width" Value="Auto" /> 
         <Setter Property="Height" Value="8" /> 
         <Setter TargetName="Thumb" Property="Tag" Value="Horizontal" /> 
         <Setter TargetName="PageDown" Property="Command" Value="ScrollBar.PageLeftCommand" /> 
         <Setter TargetName="PageUp" Property="Command" Value="ScrollBar.PageRightCommand" /> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style>

它看起來很棒，只有當這兩個滾動條都在爲問題行動，有一個矩形的地方，不與設計的其餘部分一起去。我不確定那是從哪裏來的，或者我需要做什麼風格改變。正如你可以看到：

有一個白色的矩形在兩個滾動條相遇的角落......我不希望這樣或至少想要能夠控制如何矩形看起來像。我應該改變什麼風格？

來源

2016-07-25 Istiaq Ahmed

您是否試過將包含ScrollBar元素的'Background'顏色設置爲與'ScrollBar.Background'相同的顏色？ – Meloviz

'ScrollViewer'的'ScrollBar'的尺寸在其模板中設置爲相應的'Viewport'尺寸（例如垂直尺寸的'ViewportHeight'）。該大小減去另一個「ScrollBar」的寬度或高度，所以您將始終在該角落留下一個小方塊。 – Meloviz

使用來自@Anonymous Coward的這個答案，您可以查看ScrollViewer的模板，並查看我在評論中所說的內容。只要做一些事情：

using(FileStream stream = new FileStream("ScrollViewerTemplate.xml")) 
using(StreamWriter writer = new StreamWriter(stream)) 
{ 
    writer.WriteLine(System.Windows.Markup.XamlWriter.Save(
     new ScrollViewer() {Content = new TextBlock() {Text = "Template"}})); 
}

您可能需要做一些編輯（添加換行符），但您會得到要點。這將向您顯示ScrollBar s與ScrollViewer的ViewportHeight/ViewportWidth模板綁定，您可以推斷，它是可見內容的大小，不包含任何ScrollBar s。

因此，考慮到所有這一切，我會建議保持該塊內聯與您的設計，只是改變了包含元素的（也許這是一個ScrollViewer？）Background到了ScrollBar的背景。

來源

2016-07-25 15:11:14 Meloviz

WPF滾動條風格

回答

相關問題