2013-05-22 71 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