如何在WPF中更改滚动条的宽度?

时间:2014-05-19 12:14:11

标签: c# wpf wpf-controls pixelsense

在我的WPF应用程序中,我需要更改SurfaceScrollViewer的宽度大小。目前我使用此代码没有成功。

知道怎么做这个吗?

<Window.Resources>
    <Style TargetType="ScrollBar">
        <Setter Property="Width" Value="25"/>
    </Style>
</Window.Resources>

1 个答案:

答案 0 :(得分:0)

您需要做的是基于SurfaceListBox(或用于保存可滚动项目的任何元素)创建样式。

这将生成一个(非常详细的)完整的元素列表,包括SurfaceScrollViewer及其相关属性。在这里,您可以找到滚动条元素并进行更改。

如果您不确定我的意思,请查看有关重定位WPF复选框的教程,因为它应该为您提供一些上下文。

我在下面附上了一个示例布局:

<UserControl.Resources>
<!-- Base Grid style for 55 dpi -->
        <Style TargetType="{x:Type Control}" x:Key="ControlBaseStyle">
            <Setter Property="FocusVisualStyle" 
                Value="{x:Null}"/>
            <Setter Property="SnapsToDevicePixels"
                Value="False"/>
            <Setter Property="FontFamily"
                Value="Segoe360"/>
            <Setter Property="FontWeight"
                Value="Normal"/>
            <Setter Property="FontSize"
                Value="17"/>
            <Setter Property="Padding"
                Value="6,2,10,10"/>
            <Setter Property="MinHeight"
                Value="38"/>
            <Setter Property="MinWidth"
                Value="38"/>
            <Setter Property="Margin"
                Value="1"/>
            <Setter Property="HorizontalContentAlignment"
                Value="Left"/>
            <Setter Property="VerticalContentAlignment"
                Value="Top"/>
            <Setter Property="BorderThickness"
                Value="2"/>
        </Style>

<!-- public section -->
        <SolidColorBrush x:Key="ControlHitAreaBrush"    
            Color="#00FFFFFF"/>

        <Style x:Key="UnstyledContainer" TargetType="{x:Type controls:SurfaceListBoxItem}" BasedOn="{StaticResource ControlBaseStyle}">
            <Setter Property="Foreground" Value="{DynamicResource {x:Static controls:SurfaceColors.ListBoxItemForegroundBrushKey}}"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type controls:SurfaceListBoxItem}">
                        <Grid x:Name="Grid" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Margin="10,0">
                            <Border  x:Name="ButtonBody"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                            <Border x:Name="PressOverlay"    
                                Opacity="0" 
                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                            <ContentPresenter   x:Name="Content"                                        
                                Margin="{TemplateBinding Padding}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"                                                     
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <!-- Minimum HitArea Base Style for 55 dpi-->
        <Style x:Key="SurfaceHitAreaBaseStyle"
            TargetType="{x:Type Control}">
            <Setter Property="SnapsToDevicePixels"
                Value="False"/>
            <Setter Property="Background"
                Value="{StaticResource ControlHitAreaBrush}"/>
            <Setter Property="IsTabStop"
                Value="False"/>
            <Setter Property="Focusable"
                Value="False"/>
            <Setter Property="FocusVisualStyle"
                Value="{x:Null}"/>
            <Setter Property="MinWidth"
                Value="40" />
            <Setter Property="MinHeight"
                Value="40" />
        </Style>
        <Style x:Key="SurfaceVertScrollBarRepeatButton"
            TargetType="{x:Type controls:SurfaceRepeatButton}" >
            <Setter Property="Interval"
                Value="150" />
            <Setter Property="BorderBrush"
                Value="{x:Null}" />
            <Setter Property="Background"
                Value="{StaticResource ControlHitAreaBrush}" />
            <Setter Property="OverridesDefaultStyle" Value="true"/>
            <Setter Property="Focusable" Value="false"/>
            <Setter Property="IsTabStop" Value="false"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type controls:SurfaceRepeatButton}">
                        <Grid Width="40" Background="{TemplateBinding Background}">
                            <Rectangle  HorizontalAlignment="Center" 
                                x:Name="Line"
                                MinWidth="2"
                                Fill="{DynamicResource {x:Static controls:SurfaceColors.TrackBackgroundBrushKey}}"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled"
                                Value="False">
                                <Setter Property="Fill"   
                                    TargetName="Line"                             
                                    Value="{DynamicResource {x:Static controls:SurfaceColors.ThumbDisabledBrushKey}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <!-- ScrollBar Vert Thumb -->
        <Style x:Key="SurfaceScrollBarThumbStyle"
            TargetType="{x:Type controls:SurfaceThumb}"
            BasedOn="{StaticResource SurfaceHitAreaBaseStyle}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type controls:SurfaceThumb}">
                        <ControlTemplate.Resources>
                            <Storyboard x:Key="Touch">
                                <DoubleAnimation Duration="0:0:0.05"
                                    Storyboard.TargetName="Thumb"
                                    Storyboard.TargetProperty="Width" 
                                    To="16"/>
                                <ThicknessAnimation Duration="0:0:0.05"
                                    Storyboard.TargetName="Thumb"
                                    Storyboard.TargetProperty="Margin"
                                    To="-1,0,-1,0" />
                            </Storyboard>
                            <Storyboard x:Key="Release">
                                <DoubleAnimation Duration="0:0:0.1"
                                    Storyboard.TargetName="Thumb" 
                                    Storyboard.TargetProperty="Width"
                                    To="14"/>
                                <ThicknessAnimation Duration="0:0:0.1"
                                    Storyboard.TargetName="Thumb"
                                    Storyboard.TargetProperty="Margin" 
                                    To="0,0,0,0" />
                            </Storyboard>
                        </ControlTemplate.Resources>
                        <Grid   x:Name="Grid"
                            Background="{TemplateBinding Background}"
                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
                            <Rectangle  x:Name="Thumb"
                                Height="Auto"
                                Width="14" 
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Stretch"
                                Fill="{DynamicResource {x:Static controls:SurfaceColors.ThumbEnabledBrushKey}}" />
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="controls:TouchExtensions.AreAnyInputDevicesCapturedWithin"
                                Value="True">
                                <Trigger.EnterActions>
                                    <BeginStoryboard Storyboard="{StaticResource Touch}"/>
                                </Trigger.EnterActions>
                                <Trigger.ExitActions>
                                    <BeginStoryboard Storyboard="{StaticResource Release}"/>
                                </Trigger.ExitActions>
                            </Trigger>
                            <Trigger  Property="IsEnabled"
                                Value="False">
                                <Setter Property="Fill"
                                    TargetName="Thumb"
                                    Value="{DynamicResource {x:Static controls:SurfaceColors.ThumbDisabledBrushKey}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <!-- ScrollBar RepeatButton -->
        <Style x:Key="SurfaceHorzScrollBarRepeatButton"
            TargetType="{x:Type controls:SurfaceRepeatButton}" >
            <Setter Property="Interval"
                Value="150" />
            <Setter Property="BorderBrush"
                Value="{x:Null}" />
            <Setter Property="Background"
                Value="{StaticResource ControlHitAreaBrush}" />
            <Setter Property="OverridesDefaultStyle" Value="true"/>
            <Setter Property="Focusable" Value="false"/>
            <Setter Property="IsTabStop" Value="false"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type controls:SurfaceRepeatButton}">
                        <Grid Height="40" Background="{TemplateBinding Background}">
                            <Rectangle VerticalAlignment="Center"
                                x:Name="Line"
                                MinHeight="2"
                                Fill="{DynamicResource {x:Static controls:SurfaceColors.TrackBackgroundBrushKey}}"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled"
                                Value="False">
                                <Setter Property="Fill"   
                                    TargetName="Line"                             
                                    Value="{DynamicResource {x:Static controls:SurfaceColors.ThumbDisabledBrushKey}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="SurfaceScrollBarHorizThumbStyle"
            TargetType="{x:Type controls:SurfaceThumb}"
            BasedOn="{StaticResource SurfaceHitAreaBaseStyle}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type controls:SurfaceThumb}">
                        <ControlTemplate.Resources>
          <!-- Vertical orientation -->
                            <Storyboard x:Key="Touch">
                                <DoubleAnimation Duration="0:0:0.05"
                                    Storyboard.TargetName="Thumb"
                                    Storyboard.TargetProperty="Height" 
                                    To="16"/>
                                <ThicknessAnimation Duration="0:0:0.05"
                                    Storyboard.TargetName="Thumb"
                                    Storyboard.TargetProperty="Margin"
                                    To="0,-1,0,-1" />
                            </Storyboard>
                            <Storyboard x:Key="Release">
                                <DoubleAnimation Duration="0:0:0.1"
                                    Storyboard.TargetName="Thumb" 
                                    Storyboard.TargetProperty="Height"
                                    To="14"/>
                                <ThicknessAnimation Duration="0:0:0.1"
                                    Storyboard.TargetName="Thumb"
                                    Storyboard.TargetProperty="Margin" 
                                    To="0,0,0,0" />
                            </Storyboard>
                        </ControlTemplate.Resources>
                        <Grid x:Name="Grid"
                            Background="{TemplateBinding Background}"
                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" >
                            <Rectangle  x:Name="Thumb"
                                Width="Auto"
                                Height="14"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Stretch"  
                                Fill="{DynamicResource {x:Static controls:SurfaceColors.ThumbEnabledBrushKey}}" />
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="controls:TouchExtensions.AreAnyInputDevicesCapturedWithin"
                                Value="True">
                                <Trigger.EnterActions>
                                    <BeginStoryboard Storyboard="{StaticResource Touch}"/>
                                </Trigger.EnterActions>
                                <Trigger.ExitActions>
                                    <BeginStoryboard Storyboard="{StaticResource Release}"/>
                                </Trigger.ExitActions>
                            </Trigger>
                            <Trigger Property="IsEnabled"
                                Value="False">
                                <Setter Property="Fill"
                                    TargetName="Thumb"
                                    Value="{DynamicResource {x:Static controls:SurfaceColors.ThumbDisabledBrushKey}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    <!-- ScrollBar -->
        <Style x:Key="SurfaceScrollBarStyle"
            TargetType="{x:Type controls:SurfaceScrollBar}"
         >
            <Style.Resources>
                <System:Double x:Key="{x:Static SystemParameters.VerticalScrollBarButtonHeightKey}">38</System:Double>
                <System:Double x:Key="{x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}">38</System:Double>
            </Style.Resources>
            <Setter Property="Stylus.IsPressAndHoldEnabled"
                Value="False"/>
            <Setter Property="Stylus.IsFlicksEnabled"
                Value="False"/>
            <Setter Property="Width"
                Value="38"/>
            <Setter Property="Height"
                Value="Auto"/>
            <Setter Property="Template">
                <Setter.Value>
      <!-- vertical scroll bar -->
                    <ControlTemplate TargetType="{x:Type controls:SurfaceScrollBar}">
                        <Grid x:Name="GridRoot" Background="{TemplateBinding Background}">
                            <Border x:Name="Track"
                                VerticalAlignment="Stretch"
                                HorizontalAlignment="Stretch">
                                <Track x:Name="PART_Track"
                                    IsDirectionReversed="True">
                                    <Track.IncreaseRepeatButton>
                                        <controls:SurfaceRepeatButton x:Name="IncreaseRepeat"
                                            Background="{TemplateBinding Background}"
                                            HorizontalAlignment="Center"
                                            Style="{StaticResource SurfaceVertScrollBarRepeatButton}"
                                            Command="ScrollBar.PageDownCommand"/>
                                    </Track.IncreaseRepeatButton>
                                    <Track.DecreaseRepeatButton>
                                        <controls:SurfaceRepeatButton x:Name="DecreaseRepeat"
                                            Background="{TemplateBinding Background}"
                                            HorizontalAlignment="Center"
                                            Style="{StaticResource SurfaceVertScrollBarRepeatButton}"
                                            Command="ScrollBar.PageUpCommand"/>
                                    </Track.DecreaseRepeatButton>
                                    <Track.Thumb>
                                        <controls:SurfaceThumb  Style="{StaticResource SurfaceScrollBarThumbStyle}"
                                            Background="{TemplateBinding Background}"
                                            HorizontalAlignment="Center" 
                                            x:Name="Thumb"/>
                                    </Track.Thumb>
                                </Track>
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
          <!-- Animates Scrollbar from small to large state -->
                            <Trigger Property="IsEnabled"
                                Value="False">
                                <Setter Property="IsEnabled"
                                    TargetName="PART_Track"
                                    Value="False"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>

            <Style.BasedOn>
                <StaticResource ResourceKey="SurfaceHitAreaBaseStyle"/>
            </Style.BasedOn>

            <Style.Triggers>
    <!-- Horizontal orientation -->
                <Trigger Property="Orientation"   Value="Horizontal">
                    <Setter Property="Width"
                        Value="Auto"/>
                    <Setter Property="Height"
                        Value="38"/>
      <!-- change the whole template -->
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type controls:SurfaceScrollBar}">
                                <Grid x:Name="GridRoot" Background="{TemplateBinding Background}">
                                    <Border x:Name="Track"
                                        VerticalAlignment="Stretch"
                                        HorizontalAlignment="Stretch">
                                        <Track x:Name="PART_Track">
                                            <Track.DecreaseRepeatButton>
                                                <controls:SurfaceRepeatButton x:Name="DecreaseRepeat"
                                                    Background="{TemplateBinding Background}"
                                                    VerticalAlignment="Center"
                                                    Style="{StaticResource SurfaceHorzScrollBarRepeatButton}"                                                   
                                                    Command="ScrollBar.PageLeftCommand" />
                                            </Track.DecreaseRepeatButton>
                                            <Track.IncreaseRepeatButton>
                                                <controls:SurfaceRepeatButton x:Name="IncreaseRepeat" 
                                                    Background="{TemplateBinding Background}"
                                                    VerticalAlignment="Center"
                                                    Style="{StaticResource SurfaceHorzScrollBarRepeatButton}"
                                                    Command="ScrollBar.PageRightCommand"/>
                                            </Track.IncreaseRepeatButton>
                                            <Track.Thumb>
                                                <controls:SurfaceThumb  Style="{StaticResource SurfaceScrollBarHorizThumbStyle}"    
                                                    Background="{TemplateBinding Background}"
                                                    VerticalAlignment="Center" 
                                                    x:Name="Thumb"/>
                                            </Track.Thumb>
                                        </Track>
                                    </Border>
                                </Grid>
                                <ControlTemplate.Triggers>
              <!-- Animates Scrollbar from small to large state -->
                                    <Trigger Property="IsEnabled"
                                        Value="False">
                                        <Setter Property="Opacity"
                                            TargetName="IncreaseRepeat"
                                            Value="0.33"/>
                                        <Setter Property="Opacity"
                                            TargetName="DecreaseRepeat"
                                            Value="0.33"/>
                                        <Setter Property="IsEnabled"
                                            TargetName="PART_Track"
                                            Value="False"/>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>

<!-- ScrollViewerBase -->
        <Style x:Key="SurfaceScrollViewerStyle"
            TargetType="{x:Type controls:SurfaceScrollViewer}">
            <Setter Property="Elasticity"
                Value="0.4,0.4" />
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility"
                Value="Auto" />
            <Setter Property="ScrollViewer.VerticalScrollBarVisibility"
                Value="Auto" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type controls:SurfaceScrollViewer}">
                        <Grid   Background="{TemplateBinding Background}"
                            HorizontalAlignment="Stretch" 
                            VerticalAlignment="Stretch">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <Border x:Name="PART_ElasticBorder"
                                Background="{TemplateBinding Background}">
                                <ScrollContentPresenter 
                                    Margin="-1,-1,-1,-1"
                                    Grid.Column="0"
                                    Grid.ColumnSpan="1"
                                    Grid.Row="0"
                                    Grid.RowSpan="1"
                                    Content="{TemplateBinding Content}"
                                    ContentTemplate="{TemplateBinding ContentTemplate}"
                                    CanContentScroll="{TemplateBinding CanContentScroll}"
                                    CanHorizontallyScroll="False"
                                    CanVerticallyScroll="False"
                                    ScrollViewer.HorizontalScrollBarVisibility="Disabled" />
                            </Border>

                            <controls:SurfaceScrollBar Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
                                x:Name="PART_HorizontalScrollBar"
                                Grid.Column="0"
                                Grid.Row="1"
                                Orientation="Horizontal"
                                Maximum="{TemplateBinding ScrollableWidth}"
                                Minimum="0"
                                Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
                                AutomationProperties.AutomationId="HorizontalScrollBar"
                                Height="Auto"
                                Style="{StaticResource SurfaceScrollBarStyle}"
                                LargeChange="1"
                                ViewportSize="{TemplateBinding ViewportWidth}"
                                ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                                HorizontalContentAlignment="Stretch"
                                VerticalContentAlignment="Stretch"
                                HorizontalAlignment="Stretch"
                                Foreground="{x:Null}"/>
                            <controls:SurfaceScrollBar Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
                                x:Name="PART_VerticalScrollBar"                           
                                Grid.Column="1"
                                Grid.Row="0"
                                Orientation="Vertical"
                                Maximum="{TemplateBinding ScrollableHeight}"
                                Minimum="0"
                                Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
                                AutomationProperties.AutomationId="VerticalScrollBar"
                                Width="Auto"
                                Style="{StaticResource SurfaceScrollBarStyle}"
                                LargeChange="1"
                                ViewportSize="{TemplateBinding ViewportHeight}"
                                ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                                HorizontalContentAlignment="Stretch"
                                VerticalContentAlignment="Stretch"
                                HorizontalAlignment="Stretch"
                                Foreground="{x:Null}"
                                IsEnabled="True"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled"
                                Value="False">
                                <Setter Property="IsEnabled"
                                    TargetName="PART_HorizontalScrollBar"
                                    Value="False" />
                                <Setter Property="IsEnabled"
                                    TargetName="PART_VerticalScrollBar"
                                    Value="False" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

<!-- Listbox ScrollView -->
        <Style x:Key="SurfaceListBoxScrollViewerStyle"
            TargetType="{x:Type controls:SurfaceScrollViewer}"  
            BasedOn="{StaticResource SurfaceScrollViewerStyle}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type controls:SurfaceScrollViewer}">
                        <Grid
                            HorizontalAlignment="Stretch"
                            Margin="{TemplateBinding BorderThickness}"
                            VerticalAlignment="Stretch"
                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <Border x:Name="PART_ElasticBorder"
                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                BorderBrush="Transparent"
                                >
                                <ScrollContentPresenter Margin="{TemplateBinding Padding}"
                                    Content="{TemplateBinding Content}"
                                    ContentTemplate="{TemplateBinding ContentTemplate}"
                                    CanContentScroll="{TemplateBinding CanContentScroll}"
                                    CanHorizontallyScroll="False"
                                    CanVerticallyScroll="False"
                                    Grid.ColumnSpan="1"
                                    Grid.RowSpan="1"
                                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                            </Border>
                            <controls:SurfaceScrollBar Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
                                x:Name="PART_HorizontalScrollBar"
                                Grid.Row="1"
                                Orientation="Horizontal"
                                ViewportSize="{TemplateBinding ViewportWidth}"
                                Maximum="{TemplateBinding ScrollableWidth}"
                                Minimum="0"
                                Background="{TemplateBinding Background}"
                                Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
                                AutomationProperties.AutomationId="HorizontalScrollBar"
                                Height="Auto"                                   
                                Style="{StaticResource SurfaceScrollBarStyle}"                                   
                                LargeChange="1"
                                ClipToBounds="True"
                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                            <controls:SurfaceScrollBar Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
                                x:Name="PART_VerticalScrollBar"
                                Grid.Column="1"
                                Grid.Row="0"
                                Orientation="Vertical"
                                ViewportSize="{TemplateBinding ViewportHeight}"
                                Maximum="{TemplateBinding ScrollableHeight}"
                                Minimum="0"

                                Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
                                AutomationProperties.AutomationId="VerticalScrollBar"
                                Width="Auto"                                   
                                Style="{StaticResource SurfaceScrollBarStyle}"                                   
                                LargeChange="1"
                                ClipToBounds="True"
                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                            <Border x:Name="Container"
                                Grid.Column="1"
                                Grid.Row="1"
                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                BorderBrush="Transparent"
                                />
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled"
                                Value="False">
                                <Setter Property="IsEnabled"
                                    TargetName="PART_HorizontalScrollBar"
                                    Value="False"/>
                                <Setter Property="IsEnabled"
                                    TargetName="PART_VerticalScrollBar"
                                    Value="False"/>
                                <Setter Property="BorderBrush"
                                    TargetName="PART_ElasticBorder"
                                    Value="{DynamicResource {x:Static controls:SurfaceColors.ControlBorderDisabledBrushKey}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

<!-- ListBox -->
        <Style x:Key="UnstyledList"  TargetType="{x:Type controls:SurfaceListBox}"
            BasedOn="{StaticResource ControlBaseStyle}">
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility"
                Value="Auto" />
            <Setter Property="ScrollViewer.VerticalScrollBarVisibility"
                Value="Auto" />
            <Setter Property="ScrollViewer.CanContentScroll"
                Value="False" />
            <Setter Property="controls:SurfaceScrollViewer.Elasticity"
                Value="0,0.4" />
            <Setter Property="MinHeight"
                Value="80" />
            <Setter Property="Foreground"
                Value="{DynamicResource {x:Static controls:SurfaceColors.ButtonForegroundBrushKey}}"/>
            <Setter Property="BorderBrush"
                Value="{DynamicResource {x:Static controls:SurfaceColors.ListBoxBorderBrushKey}}"/>
            <Setter Property="Padding"
                Value="0" />
            <Setter Property="BorderThickness"
                Value="2" />
            <Setter Property="Margin"
                Value="0" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type controls:SurfaceListBox}">
                        <Grid  SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" >
                            <controls:SurfaceScrollViewer
                                Style="{StaticResource SurfaceListBoxScrollViewerStyle}"
                                HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                                Focusable="False"
                                Foreground="{TemplateBinding Foreground}"
                                Width="Auto"
                                Height="Auto"
                                MinHeight="{TemplateBinding MinHeight}"
                                MinWidth="{TemplateBinding MinWidth}"
                                x:Name="scrollViewer"
                                Elasticity="{TemplateBinding controls:SurfaceScrollViewer.Elasticity}">
                                <ItemsPresenter ClipToBounds="False"
                                    MinHeight="{TemplateBinding MinHeight}"
                                    MinWidth="{TemplateBinding MinWidth}"/>
                            </controls:SurfaceScrollViewer>
                            <Border x:Name="Border"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}" />
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsGrouping"
                                Value="True">
                                <Setter Property="ScrollViewer.CanContentScroll"
                                    Value="False" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>



<s:SurfaceListBox x:Name="someList"  Background="{x:Null}" Foreground="{x:Null}" BorderBrush="{x:Null}" ItemContainerStyle="{DynamicResource UnstyledContainer}" Style="{DynamicResource UnstyledList}" />