您的位置:首页 > Web前端 > CSS

WPF 修改listbox中scollviewer的样式

2014-09-04 16:15 267 查看
1、首先先要明白listbox的原样式,让后修改listbox的样式:

在listbox原样式中可以看到,主要是修改scrollviewer控件的模板。

<Style x:Key="lb_scrollviwer" TargetType="{x:Type ListBox}">

<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>

<Setter Property="BorderBrush" Value="{StaticResource ListBorder}"/>

<Setter Property="BorderThickness" Value="1"/>

<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>

<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>

<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>

<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>

<Setter Property="ScrollViewer.PanningMode" Value="Both"/>

<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>

<Setter Property="VerticalContentAlignment" Value="Center"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type ListBox}">

<Border x:Name="Bd" BorderBrush="Transparent" BorderThickness="0"

Background="{TemplateBinding Background}" SnapsToDevicePixels="true">

<ScrollViewer Focusable="false" Template="{DynamicResource ScrollViewerControlTemplate1}">

<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="Stretch"/>

</ScrollViewer>

</Border>

<ControlTemplate.Triggers>

<MultiTrigger>

<MultiTrigger.Conditions>

<Condition Property="IsGrouping" Value="true"/>

</MultiTrigger.Conditions>

<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>

</MultiTrigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

2、先明白scrollviewer的原样式,在修改scrollviewer的样式:

在scrollvi原样式中可以看到,主要是修改scrollbar控件的样式。

a、滚动条中按钮的样式

<Style x:Key="VerticalScrollBarPageButton" TargetType="{x:Type RepeatButton}">

<Setter Property="OverridesDefaultStyle" Value="true"/>

<Setter Property="Background" Value="Black"/>

<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="5"/>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

b、滚动条的背景部分

<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 x:Name="border" CornerRadius="2" Background="#A5A5A5" BorderBrush="#666666" BorderThickness="1" Width="5">

<!--<Image x:Name="image" Source="Images/bar_center.png" VerticalAlignment="Center"></Image>-->

<ScrollContentPresenter />

</Border>

<ControlTemplate.Triggers>

<Trigger Property="IsDragging" Value="True">

<Setter Property="Background" TargetName="border" Value="#7F7F7F"/>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

c、scrollbar的样式

<Style x:Key="ScrollBarStyle1" TargetType="{x:Type ScrollBar}">

<Setter Property="Background" Value="{StaticResource VerticalScrollBarBackground}"/>

<Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>

<Setter Property="Stylus.IsFlicksEnabled" Value="false"/>

<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>

<Setter Property="Width" Value="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"/>

<Setter Property="MinWidth" Value="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type ScrollBar}">

<Grid x:Name="Bg" Background="{TemplateBinding Background}" SnapsToDevicePixels="true" Width="5">

<Grid.RowDefinitions>

<Track x:Name="PART_Track" IsDirectionReversed="true" IsEnabled="{TemplateBinding IsMouseOver}" Grid.Row="1">

<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}"/>

</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>

这样修改listbox中竖直方向滚动条的样式就行了…………

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: