Windows Phone 7'de bir ListBox'un kaydırma çubuklarının rengini değiştirme

Question

Beyaz bir arka plana sahip bir <ListBox> ürünüm var, kaydırma çubuklarını, kullanıcı öğeleri kaydırdığında görünebilecekleri şekilde değiştirmek istiyorum.

Bunu nasıl başarabilirim?

Answer 1

Scrolling durumunun VisualState'unu değiştirebilirsiniz. ListBox'un ScrollViewer's VerticalScrollBar şablonunu düzenlemek istiyorsunuz. Örneğin, bu tarz% 100 donukluk ve kırmızı:

<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> 

ve (verticalScrollBar şablona yukarıda kullanır) ListBox's tarzı şu şekildedir:

<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> 

Sen XAML zanaat Expression Blend kullanabilirsiniz çok daha verimli olduğu gibi.

Answer 2

Kaydırıcı için şablonu geçersiz kıl.