2013-05-22 43 views
0

我是WPF的新手。 我想要更改列表框中的滚动查看器的模板。我发现了一个Apple风格的滚动条在这blog更改列表框中的scrollviewer模板

但我不知道如何将滚动查看器模板应用到列表框。谁能帮我? 这里是苹果滚动浏览模板XAML代码:WPF中

<SolidColorBrush x:Key="ScrollBarDisabledBackground" Color="#F4F4F4"/> 
     <Style x:Key="VerticalScrollBarPageButton" TargetType="{x:Type RepeatButton}"> 
      <Setter Property="OverridesDefaultStyle" Value="true"/> 
      <Setter Property="Background" Value="Transparent"/> 
      <Setter Property="Focusable" Value="false"/> 
      <Setter Property="IsTabStop" Value="false"/> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type RepeatButton}"> 
         <Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
     <Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}"> 
      <Setter Property="OverridesDefaultStyle" Value="true"/> 
      <Setter Property="IsTabStop" Value="false"/> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type Thumb}"> 
         <Border Background="#FF868686" BorderThickness="0,0,1,0" Height="Auto" CornerRadius="4" /> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
     <Style x:Key="HorizontalScrollStyle" TargetType="{x:Type ScrollBar}"> 
      <Setter Property="Background" Value="Transparent"/> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type ScrollBar}"> 
         <Grid x:Name="Bg" Background="{TemplateBinding Background}" Height="10" SnapsToDevicePixels="true"> 
          <Grid.RowDefinitions> 
           <RowDefinition /> 
          </Grid.RowDefinitions> 
          <Track x:Name="PART_Track" IsDirectionReversed="true" IsEnabled="{TemplateBinding IsMouseOver}"> 
           <Track.DecreaseRepeatButton> 
            <RepeatButton Command="{x:Static ScrollBar.PageUpCommand}" Style="{StaticResource VerticalScrollBarPageButton}"/> 
           </Track.DecreaseRepeatButton> 
           <Track.IncreaseRepeatButton> 
            <RepeatButton Command="{x:Static ScrollBar.PageDownCommand}" Style="{StaticResource VerticalScrollBarPageButton}"/> 
           </Track.IncreaseRepeatButton> 
           <Track.Thumb> 
            <Thumb Style="{StaticResource ScrollBarThumb}" Cursor="Hand"/> 
           </Track.Thumb> 
          </Track> 
         </Grid> 
         <ControlTemplate.Triggers> 
          <Trigger Property="IsEnabled" Value="false"> 
           <Setter Property="Background" TargetName="Bg" Value="{StaticResource ScrollBarDisabledBackground}"/> 
          </Trigger> 
         </ControlTemplate.Triggers> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
     <Style x:Key="AppleStyleVerticalScrollBarStyle" TargetType="{x:Type ScrollBar}"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type ScrollBar}"> 
         <Grid x:Name="Bg" SnapsToDevicePixels="true" Width="10" HorizontalAlignment="Right" Margin="0"> 
          <Grid.RowDefinitions> 
           <RowDefinition /> 
          </Grid.RowDefinitions> 
          <Track x:Name="PART_Track" IsDirectionReversed="true" IsEnabled="{TemplateBinding IsMouseOver}"> 
           <Track.DecreaseRepeatButton> 
            <RepeatButton Command="{x:Static ScrollBar.PageUpCommand}" Style="{StaticResource VerticalScrollBarPageButton}" /> 
           </Track.DecreaseRepeatButton> 
           <Track.IncreaseRepeatButton> 
            <RepeatButton Command="{x:Static ScrollBar.PageDownCommand}" Style="{StaticResource VerticalScrollBarPageButton}"/> 
           </Track.IncreaseRepeatButton> 
           <Track.Thumb> 
            <Thumb Style="{DynamicResource ScrollBarThumb}" Cursor="Hand"/> 
           </Track.Thumb> 
          </Track> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
     <ControlTemplate x:Key="AppleStyleScrollBarStyle" TargetType="{x:Type ScrollViewer}"> 
      <Grid x:Name="Grid" Background="{TemplateBinding Background}"> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="*"/> 
        <ColumnDefinition Width="Auto"/> 
       </Grid.ColumnDefinitions> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="*"/> 
        <RowDefinition Height="Auto"/> 
       </Grid.RowDefinitions> 
       <Rectangle x:Name="Corner" Grid.Column="1" Fill="{x:Null}" Grid.Row="1"/> 
       <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" 
         CanHorizontallyScroll="False" CanVerticallyScroll="False" 
         ContentTemplate="{TemplateBinding ContentTemplate}" 
         Content="{TemplateBinding Content}" Grid.Column="0" 
         Margin="{TemplateBinding Padding}" Grid.Row="0"/> 
       <ScrollBar x:Name="PART_VerticalScrollBar" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" 
       AutomationProperties.AutomationId="VerticalScrollBar" Cursor="Arrow" Grid.Column="1" 
       Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Grid.Row="0" 
       Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" 
       ViewportSize="{TemplateBinding ViewportHeight}" Style="{DynamicResource AppleStyleVerticalScrollBarStyle}" 
       Background="{x:Null}" Width="Auto" Margin="0"/> 
       <ScrollBar x:Name="PART_HorizontalScrollBar" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" 
       AutomationProperties.AutomationId="HorizontalScrollBar" Cursor="Arrow" Grid.Column="0" 
       Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Orientation="Horizontal" Grid.Row="1" 
       Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" 
       ViewportSize="{TemplateBinding ViewportWidth}" Style="{DynamicResource HorizontalScrollStyle}"/> 
      </Grid> 
     </ControlTemplate> 
+0

我编辑了自己的冠军。请参阅:“[应该在其标题中包含”标签“](http://meta.stackexchange.com/questions/19190/)”,其中的共识是“不,他们不应该”。 –

+0

谢谢约翰桑德斯。 –

+0

你可以将ListBox包装在你的风格ScrollViewer中 –

回答

3

ScrollViewer,像其他一些控制,有一些命名的部分。为了在正确的地方使用,他们需要正确命名。 ScrollViewer造型已在此MSDN网站上解释,但基本上它有3个部分ScrollContentPresenter,HorizontalScrollBarVerticalScrollBar。反过来,每个ScrollBar都将有自己命名的部分风格。并为此去到这个MSDN网站。你的情况,你可以在ScrollViewer这样包住ListBox

<ScrollViewer> 
    <ListBox/> 
</ScrollViewer> 

在这种情况下,你也可以考虑隐藏你ListBox的原滚动条。如果您不对HeightListbox进行任何限制,它将变得适合所有元素,这反过来会导致您的ScrollViewer显示您的自定义滚动条。 或者你也可以改变,例如(MSDN)你ListBox像这样的模板:

<Style TargetType={x:Type ListBox}> 
    <Setter Property="Template"> 
     <Setter.Value> 
     <ControlTemplate TargetType="{x:Type ListBox}"> 
      <ScrollViewer x:Name="ScrollViewer"> 
       <ItemsPresenter/> 
      </ScrollViewer> 
     </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

,然后自定义您的ScrollViewer