更改Windows Phone 7上ListBox的滾動條顏色

Question

我有一個白色背景<ListBox>項目，我想更改滾動條顏色，以便在用戶滾動項目時可以看到它們。

我該如何做到這一點？

Answer 1

您可以更改Scrolling狀態的VisualState。您想編輯列表框的ScrollViewer's VerticalScrollBar模板。例如，這種風格是100％不透明度和紅色：

<Style x:Key="ScrollViewerStyle1" TargetType="ScrollViewer"> 
      <Setter Property="VerticalScrollBarVisibility" Value="Auto"/> 
      <Setter Property="HorizontalScrollBarVisibility" Value="Disabled"/> 
      <Setter Property="Background" Value="Transparent"/> 
      <Setter Property="Padding" Value="0"/> 
      <Setter Property="BorderThickness" Value="0"/> 
      <Setter Property="BorderBrush" Value="Transparent"/> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="ScrollViewer"> 
         <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"> 
          <VisualStateManager.VisualStateGroups> 
           <VisualStateGroup x:Name="ScrollStates"> 
            <VisualStateGroup.Transitions> 
             <VisualTransition GeneratedDuration="00:00:00.5"/> 
            </VisualStateGroup.Transitions> 
            <VisualState x:Name="Scrolling"> 
             <Storyboard> 
              <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="VerticalScrollBar"/> 
              <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HorizontalScrollBar"/> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="NotScrolling"/> 
           </VisualStateGroup> 
          </VisualStateManager.VisualStateGroups> 
          <Grid Margin="{TemplateBinding Padding}"> 
           <ScrollContentPresenter x:Name="ScrollContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}"/> 
           <ScrollBar x:Name="VerticalScrollBar" HorizontalAlignment="Right" Height="Auto" IsHitTestVisible="False" IsTabStop="False" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Opacity="0" Orientation="Vertical" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{TemplateBinding VerticalOffset}" ViewportSize="{TemplateBinding ViewportHeight}" VerticalAlignment="Stretch" Width="5" Background="Red"/> 
           <ScrollBar x:Name="HorizontalScrollBar" HorizontalAlignment="Stretch" Height="5" IsHitTestVisible="False" IsTabStop="False" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Opacity="0" Orientation="Horizontal" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{TemplateBinding HorizontalOffset}" ViewportSize="{TemplateBinding ViewportWidth}" VerticalAlignment="Bottom" Width="Auto"/> 
          </Grid> 
         </Border> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 

和ListBox's風格（使用VerticalScrollBar模板以上）是這樣的：

<Style x:Key="ListBoxStyle1" TargetType="ListBox"> 
      <Setter Property="Background" Value="Transparent"/> 
      <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/> 
      <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/> 
      <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/> 
      <Setter Property="BorderThickness" Value="0"/> 
      <Setter Property="BorderBrush" Value="Transparent"/> 
      <Setter Property="Padding" Value="0"/> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="ListBox"> 
         <ScrollViewer x:Name="ScrollViewer" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" Padding="{TemplateBinding Padding}" Style="{StaticResource ScrollViewerStyle1}" > 

          <ItemsPresenter/> 
         </ScrollViewer> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 

您可以使用Expression Blend手藝的XAML因爲它更有效率。

Answer 2

覆蓋scrollviewer的模板。