विंडोज फोन 7 पर एक सूची बॉक्स के स्क्रॉल-बार रंग बदलना

Question

मेरे पास एक सफेद पृष्ठभूमि वाला <ListBox> आइटम है, मैं स्क्रॉल-बार रंग बदलना चाहता हूं ताकि उपयोगकर्ता आइटम को स्क्रॉल करते समय दिखाई दे सकें।

मैं इसे कैसे प्राप्त कर सकता हूं?

Answer 1

आप Scrolling राज्य के VisualState को बदल सकते हैं। आप ListBox के ScrollViewer's वर्टिकलस्क्रोलबार टेम्पलेट को संपादित करना चाहते हैं। उदाहरण के लिए, इस शैली 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> 

आप XAML शिल्प के लिए Expression Blend उपयोग कर सकते हैं क्योंकि यह बहुत अधिक कुशल है।

Answer 2

स्क्रॉलव्यूअर के लिए टेम्पलेट को ओवरराइड करें।