2013-08-26 84 views
0

在我们的Metro Style应用程序中,我使用列表框并且想要自定义其滚动条,意味着滚动的高度,宽度和颜色(水平和垂直)。有没有任何例子来完成这项任务?我搜查了很多,但无法得到一个example.please帮助。在Metro应用程序中自定义列表框的滚动条

回答

0

您需要先定制您自己的ScrollViewer,然后将其添加到ListBox的样式中。以下是ListBox的默认样式,之后是ScrollViewer的默认样式。

<Style TargetType="ListBox"> 
    <Setter Property="Foreground" Value="{StaticResource ListBoxForegroundThemeBrush}" /> 
    <Setter Property="Background" Value="{StaticResource ListBoxBackgroundThemeBrush}" /> 
    <Setter Property="BorderBrush" Value="{StaticResource ListBoxBorderThemeBrush}" /> 
    <Setter Property="BorderThickness" Value="{StaticResource ListBoxBorderThemeThickness}" /> 
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" /> 
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" /> 
    <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled" /> 
    <Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="True" /> 
    <Setter Property="ScrollViewer.VerticalScrollMode" Value="Enabled" /> 
    <Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="True" /> 
    <Setter Property="ScrollViewer.ZoomMode" Value="Disabled" /> 
    <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" /> 
    <Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True" /> 
    <Setter Property="IsTabStop" Value="False" /> 
    <Setter Property="TabNavigation" Value="Once" /> 
    <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}" /> 
    <Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}" /> 
    <Setter Property="ItemsPanel"> 
    <Setter.Value> 
     <ItemsPanelTemplate> 
     <VirtualizingStackPanel /> 
     </ItemsPanelTemplate> 
    </Setter.Value> 
    </Setter> 
    <Setter Property="Template"> 
    <Setter.Value> 
     <ControlTemplate TargetType="ListBox"> 
     <Border x:Name="LayoutRoot" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> 
      <VisualStateManager.VisualStateGroups> 
      <VisualStateGroup x:Name="CommonStates"> 
       <VisualState x:Name="Normal" /> 
       <VisualState x:Name="Disabled"> 
       <Storyboard> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Background"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" /> 
        </ObjectAnimationUsingKeyFrames> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="BorderBrush"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxDisabledForegroundThemeBrush}" /> 
        </ObjectAnimationUsingKeyFrames> 
       </Storyboard> 
       </VisualState> 
      </VisualStateGroup> 
      <VisualStateGroup x:Name="FocusStates"> 
       <VisualState x:Name="Focused"> 
       <Storyboard> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Background"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxFocusBackgroundThemeBrush}" /> 
        </ObjectAnimationUsingKeyFrames> 
       </Storyboard> 
       </VisualState> 
       <VisualState x:Name="Unfocused" /> 
      </VisualStateGroup> 
      </VisualStateManager.VisualStateGroups> 
      <ScrollViewer x:Name="ScrollViewer" Padding="{TemplateBinding Padding}" TabNavigation="{TemplateBinding TabNavigation}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"> 
      <ItemsPresenter /> 
      </ScrollViewer> 
     </Border> 
     </ControlTemplate> 
    </Setter.Value> 
    </Setter> 
</Style> 
<Style TargetType="ScrollViewer"> 
    <Setter Property="HorizontalScrollMode" Value="Enabled" /> 
    <Setter Property="VerticalScrollMode" Value="Enabled" /> 
    <Setter Property="IsHorizontalRailEnabled" Value="True" /> 
    <Setter Property="IsVerticalRailEnabled" Value="True" /> 
    <Setter Property="IsTabStop" Value="False" /> 
    <Setter Property="ZoomMode" Value="Enabled" /> 
    <Setter Property="HorizontalContentAlignment" Value="Left" /> 
    <Setter Property="VerticalContentAlignment" Value="Top" /> 
    <Setter Property="VerticalScrollBarVisibility" Value="Visible" /> 
    <Setter Property="Padding" Value="0" /> 
    <Setter Property="BorderThickness" Value="0" /> 
    <Setter Property="BorderBrush" Value="Transparent" /> 
    <Setter Property="Background" Value="Transparent" /> 
    <Setter Property="Template"> 
    <Setter.Value> 
     <ControlTemplate TargetType="ScrollViewer"> 
     <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> 
      <VisualStateManager.VisualStateGroups> 
      <VisualStateGroup x:Name="ScrollingIndicatorStates"> 
       <VisualStateGroup.Transitions> 
       <VisualTransition From="MouseIndicator" To="NoIndicator"> 
        <Storyboard> 
        <FadeOutThemeAnimation TargetName="ScrollBarSeparator" BeginTime="0:0:3" /> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalScrollBar" Storyboard.TargetProperty="IndicatorMode"> 
         <DiscreteObjectKeyFrame KeyTime="0:0:3"> 
         <DiscreteObjectKeyFrame.Value> 
          <ScrollingIndicatorMode>None</ScrollingIndicatorMode> 
         </DiscreteObjectKeyFrame.Value> 
         </DiscreteObjectKeyFrame> 
        </ObjectAnimationUsingKeyFrames> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalScrollBar" Storyboard.TargetProperty="IndicatorMode"> 
         <DiscreteObjectKeyFrame KeyTime="0:0:3"> 
         <DiscreteObjectKeyFrame.Value> 
          <ScrollingIndicatorMode>None</ScrollingIndicatorMode> 
         </DiscreteObjectKeyFrame.Value> 
         </DiscreteObjectKeyFrame> 
        </ObjectAnimationUsingKeyFrames> 
        </Storyboard> 
       </VisualTransition> 
       <VisualTransition From="TouchIndicator" To="NoIndicator"> 
        <Storyboard> 
        <FadeOutThemeAnimation TargetName="ScrollBarSeparator" /> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalScrollBar" Storyboard.TargetProperty="IndicatorMode"> 
         <DiscreteObjectKeyFrame KeyTime="0:0:0.5"> 
         <DiscreteObjectKeyFrame.Value> 
          <ScrollingIndicatorMode>None</ScrollingIndicatorMode> 
         </DiscreteObjectKeyFrame.Value> 
         </DiscreteObjectKeyFrame> 
        </ObjectAnimationUsingKeyFrames> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalScrollBar" Storyboard.TargetProperty="IndicatorMode"> 
         <DiscreteObjectKeyFrame KeyTime="0:0:0.5"> 
         <DiscreteObjectKeyFrame.Value> 
          <ScrollingIndicatorMode>None</ScrollingIndicatorMode> 
         </DiscreteObjectKeyFrame.Value> 
         </DiscreteObjectKeyFrame> 
        </ObjectAnimationUsingKeyFrames> 
        </Storyboard> 
       </VisualTransition> 
       </VisualStateGroup.Transitions> 
       <VisualState x:Name="NoIndicator"> 
       <Storyboard> 
        <FadeOutThemeAnimation TargetName="ScrollBarSeparator" /> 
       </Storyboard> 
       </VisualState> 
       <VisualState x:Name="TouchIndicator"> 
       <Storyboard> 
        <FadeOutThemeAnimation TargetName="ScrollBarSeparator" /> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalScrollBar" Storyboard.TargetProperty="IndicatorMode" Duration="0"> 
        <DiscreteObjectKeyFrame KeyTime="0"> 
         <DiscreteObjectKeyFrame.Value> 
         <ScrollingIndicatorMode>TouchIndicator</ScrollingIndicatorMode> 
         </DiscreteObjectKeyFrame.Value> 
        </DiscreteObjectKeyFrame> 
        </ObjectAnimationUsingKeyFrames> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalScrollBar" Storyboard.TargetProperty="IndicatorMode" Duration="0"> 
        <DiscreteObjectKeyFrame KeyTime="0"> 
         <DiscreteObjectKeyFrame.Value> 
         <ScrollingIndicatorMode>TouchIndicator</ScrollingIndicatorMode> 
         </DiscreteObjectKeyFrame.Value> 
        </DiscreteObjectKeyFrame> 
        </ObjectAnimationUsingKeyFrames> 
       </Storyboard> 
       </VisualState> 
       <VisualState x:Name="MouseIndicator"> 
       <Storyboard> 
        <FadeInThemeAnimation TargetName="ScrollBarSeparator" /> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalScrollBar" Storyboard.TargetProperty="IndicatorMode" Duration="0"> 
        <DiscreteObjectKeyFrame KeyTime="0"> 
         <DiscreteObjectKeyFrame.Value> 
         <ScrollingIndicatorMode>MouseIndicator</ScrollingIndicatorMode> 
         </DiscreteObjectKeyFrame.Value> 
        </DiscreteObjectKeyFrame> 
        </ObjectAnimationUsingKeyFrames> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalScrollBar" Storyboard.TargetProperty="IndicatorMode" Duration="0"> 
        <DiscreteObjectKeyFrame KeyTime="0"> 
         <DiscreteObjectKeyFrame.Value> 
         <ScrollingIndicatorMode>MouseIndicator</ScrollingIndicatorMode> 
         </DiscreteObjectKeyFrame.Value> 
        </DiscreteObjectKeyFrame> 
        </ObjectAnimationUsingKeyFrames> 
       </Storyboard> 
       </VisualState> 
      </VisualStateGroup> 
      </VisualStateManager.VisualStateGroups> 
      <Grid Background="{TemplateBinding Background}"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="*" /> 
       <ColumnDefinition Width="Auto" /> 
      </Grid.ColumnDefinitions> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="*" /> 
       <RowDefinition Height="Auto" /> 
      </Grid.RowDefinitions> 
      <ScrollContentPresenter x:Name="ScrollContentPresenter" Grid.RowSpan="2" Grid.ColumnSpan="2" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}" /> 
      <ScrollBar x:Name="VerticalScrollBar" Grid.Column="1" IsTabStop="False" Maximum="{TemplateBinding ScrollableHeight}" Orientation="Vertical" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{TemplateBinding VerticalOffset}" ViewportSize="{TemplateBinding ViewportHeight}" HorizontalAlignment="Right" /> 
      <ScrollBar x:Name="HorizontalScrollBar" IsTabStop="False" Maximum="{TemplateBinding ScrollableWidth}" Orientation="Horizontal" Grid.Row="1" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{TemplateBinding HorizontalOffset}" ViewportSize="{TemplateBinding ViewportWidth}" /> 
      <Border x:Name="ScrollBarSeparator" Grid.Row="1" Grid.Column="1" BorderThickness="0,0,1,1" Background="{StaticResource ScrollBarTrackBackgroundThemeBrush}" BorderBrush="{StaticResource ScrollBarTrackBorderThemeBrush}" /> 
      </Grid> 
     </Border> 
     </ControlTemplate> 
    </Setter.Value> 
    </Setter> 
</Style>