无法在ListBox的滚动条上应用样式? (Ph！感谢venkatesh解决了！) [英] Not able to apply style on a scrollbar in ListBox? (Phew! Solved Thanks to venkatesh!)
本文介绍了无法在ListBox的滚动条上应用样式? (Ph！感谢venkatesh解决了！)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
背景:目前，我已经为列表框应用了两种样式.
一种样式包含带有边框的控件模板，以使普通的简单ListBox看起来更好.
我的第一个风格:
Background : Currently i have applied two styles for my listbox.
One style contains a control template with border to give a good look to the plain and simple ListBox.
My First Style:
<LinearGradientBrush x:Key="ListBoxBackgroundBrush" StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="LightBlue" Offset="0.3"/>
<GradientStop Color="AliceBlue" Offset="0.5"/>
<GradientStop Color="AntiqueWhite" Offset="0.8"/>
</LinearGradientBrush>
<Style x:Key="ControlListBox" TargetType="ListBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<Border Name="ListBoxBorder" CornerRadius="3" BorderBrush="Crimson" BorderThickness="2"
Background="{StaticResource ListBoxBackgroundBrush}">
<ScrollViewer Focusable="False">
<ItemsPresenter Margin="2" ></ItemsPresenter>
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
另一种样式使用带有边框的控件模板为ListBoxItem设置样式.
我的第二种风格
and another style uses a control template with border to style the ListBoxItem.
My Second Style
<Style x:Key="ControlListBoxItem" TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Name="ListItemBorder" CornerRadius="3" BorderThickness="0.5" BorderBrush="Black">
<ContentPresenter Content="{TemplateBinding Content}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="ListItemBorder" Property="BorderBrush" Value="Blue"/>
<Setter TargetName="ListItemBorder" Property="TextBlock.FontSize" Value="12"/>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="ListItemBorder" Property="TextBlock.Foreground" Value="White"/>
<Setter TargetName="ListItemBorder" Property="BorderBrush" Value="Red"/>
<Setter TargetName="ListItemBorder" Property="Background" Value="Green"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
当前问题:现在，我要设置的也是ListBox的ScrollBar的样式.但是我要在列表框中放置样式，因为我已经使用过两种样式，却不知道将第三种样式放置在哪里(用于滚动条)?
Current problem : now what i want is to Style my ScrollBar of the ListBox too. But where am i going to put the style in the Listbox because i have already used the two styles and dont know where to put the third style(for scrollbar)?
<ListBox style="{DynamicResource ControlListBox}" ItemContainerStyle="{DynamicResource ControlListBoxItem}" and other things />
滚动条的样式是这样的:
这是垂直滚动条的样式.
但我不知道如何在ControlListBox样式中定义的scrollviewer中添加它
well the style for scrollbar is this :
here is the style to style the vertical scrollbar.
but i dont know how to add it in the scrollviewer defined in the ControlListBox style
<Style x:Key="ScrollBarThumbStyle" TargetType="Thumb">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Focusable" Value="False"/>
<Setter Property="Margin" Value="1,0,1,0"/>
<Setter Property="Background" Value="LightBlue"/>
<Setter Property="BorderBrush" Value="Red"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Ellipse Stroke="Cyan" Fill="Gray"></Ellipse>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ScrollBarLineButtonStyle" TargetType="RepeatButton">
<Setter Property="Focusable" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RepeatButton">
<Grid Margin="1">
<Ellipse Name="MyEllipse" StrokeThickness="1"
Stroke="DarkTurquoise"
Fill="Azure">
</Ellipse>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"></ContentPresenter>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="MyEllipse" Property="Fill" Value="Black"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ScrollBarPageButtonStyle" TargetType="RepeatButton">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Focusable" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RepeatButton">
<Border Background="Transparent"></Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition MaxHeight="18"/>
<RowDefinition Height="*"/>
<RowDefinition MaxHeight="18"/>
</Grid.RowDefinitions>
<RepeatButton Grid.Row="0" Height="18" Style="{DynamicResource ScrollBarLineButtonStyle}" Command="ScrollBar.LineUpCommand">
<Path Fill="AliceBlue" Data="M 0 4 L 8 4 L 4 0 Z">
</Path>
</RepeatButton>
<Track Name="Part_Track" Grid.Row="1" IsDirectionReversed="True" ViewportSize="0">
<Track.DecreaseRepeatButton>
<RepeatButton Command="ScrollBar.PageUpCommand" Style="{DynamicResource ScrollBarPageButtonStyle}">
</RepeatButton>
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{DynamicResource ScrollBarThumbStyle}"/>
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Command="ScrollBar.PageDownCommand" Style="{DynamicResource ScrollBarPageButtonStyle}"></RepeatButton>
</Track.IncreaseRepeatButton>
</Track>
<RepeatButton Grid.Row="3" Height="18" Style="{DynamicResource ScrollBarLineButtonStyle}" Command="ScrollBar.LineDownCommand" Content="M 0 0 L 4 4 L 8 0 Z" />
<RepeatButton Grid.Row="3" Height="18" Style="{DynamicResource ScrollBarLineButtonStyle}" Command="ScrollBar.LineDownCommand">
<Path Fill="AliceBlue" Data="M 0 4 L 8 4 L 4 0 Z"/>
</RepeatButton>
</Grid>
</ControlTemplate>
<Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Style.Triggers>
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="Width" Value="18"/>
<Setter Property="Height" Value="Auto"/>
<Setter Property="Template" Value="{StaticResource VerticalScrollBar}"/>
</Trigger>
</Style.Triggers>
</Style>
Please suggest some way where I can put my third style(for scrollbar) in my listbox.
谢谢，
Tarun
Please suggest some way where I can put my third style(for scrollbar) in my listbox.
Thanx,
Tarun
推荐答案
Actually you have set the style for Scrollbar by writing style for the ScrollViewer in the "ControlListBox" style. ScrollViewer has both Horizontal and Vertical scrollbars.
The below is your ListBox Style,
Actually you have set the style for Scrollbar by writing style for the ScrollViewer in the "ControlListBox" style. ScrollViewer has both Horizontal and Vertical scrollbars.
The below is your ListBox Style,
<LinearGradientBrush x:Key="ListBoxBackgroundBrush" StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="LightBlue" Offset="0.3"/>
<GradientStop Color="AliceBlue" Offset="0.5"/>
<GradientStop Color="AntiqueWhite" Offset="0.8"/>
</LinearGradientBrush>
<Style x:Key="ControlListBox" TargetType="ListBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<Border Name="ListBoxBorder" CornerRadius="3" BorderBrush="Crimson" BorderThickness="2"
Background="{StaticResource ListBoxBackgroundBrush}">
<ScrollViewer Focusable="False">
<ItemsPresenter Margin="2" ></ItemsPresenter>
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I have highlighted the ScrollViewer in there. Use Expression Blend, and "Edit a Copy" of the ScrollViewer Template. There you can modify the Vertical or Horizontal Scrollbar style. The below is the style of a Template of a ScrollViewer with Vertical ScrollBar. Here you need to again write a style to change the style of the Vertical Scrollbatr.
I have highlighted the ScrollViewer in there. Use Expression Blend, and "Edit a Copy" of the ScrollViewer Template. There you can modify the Vertical or Horizontal Scrollbar style. The below is the style of a Template of a ScrollViewer with Vertical ScrollBar. Here you need to again write a style to change the style of the Vertical Scrollbatr.
<Style x:Key="MyScrollViewerStyle"
TargetType="{x:Type ScrollViewer}">
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollViewer}">
<Grid x:Name="Grid" Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ScrollContentPresenter x:Name="PART_ScrollContentPresenter" Margin="0,0,0,0" CanHorizontallyScroll="False" CanVerticallyScroll="False"/>
<ScrollBar Style="{StaticResource scrollBarStyle}"
x:Name="PART_VerticalScrollBar"
Grid.Column="1"
Grid.Row="0"
Margin="0,4,4,4"
AutomationProperties.AutomationId="VerticalScrollBar"
Maximum="{TemplateBinding ScrollableHeight}"
Minimum="0"
Value="{Binding Path=VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
ViewportSize="{TemplateBinding ViewportHeight}"
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger SourceName="PART_VerticalScrollBar" Property="Visibility" Value="Visible">
<Setter TargetName="PART_ScrollContentPresenter" Property="Margin" Value="0,0,4,0" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>here is the style to style the vertical scrollbar.
but i dont know how to add it in the scrollviewer defined in the ControlListBox style
here is the style to style the vertical scrollbar.
but i dont know how to add it in the scrollviewer defined in the ControlListBox style
<Style x:Key="ScrollBarThumbStyle" TargetType="Thumb">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Focusable" Value="False"/>
<Setter Property="Margin" Value="1,0,1,0"/>
<Setter Property="Background" Value="LightBlue"/>
<Setter Property="BorderBrush" Value="Red"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Ellipse Stroke="Cyan" Fill="Gray"></Ellipse>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ScrollBarLineButtonStyle" TargetType="RepeatButton">
<Setter Property="Focusable" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RepeatButton">
<Grid Margin="1">
<Ellipse Name="MyEllipse" StrokeThickness="1"
Stroke="DarkTurquoise"
Fill="Azure">
</Ellipse>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"></ContentPresenter>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="MyEllipse" Property="Fill" Value="Black"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ScrollBarPageButtonStyle" TargetType="RepeatButton">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Focusable" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RepeatButton">
<Border Background="Transparent"></Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition MaxHeight="18"/>
<RowDefinition Height="*"/>
<RowDefinition MaxHeight="18"/>
</Grid.RowDefinitions>
<RepeatButton Grid.Row="0" Height="18" Style="{DynamicResource ScrollBarLineButtonStyle}" Command="ScrollBar.LineUpCommand">
<Path Fill="AliceBlue" Data="M 0 4 L 8 4 L 4 0 Z">
</Path>
</RepeatButton>
<Track Name="Part_Track" Grid.Row="1" IsDirectionReversed="True" ViewportSize="0">
<Track.DecreaseRepeatButton>
<RepeatButton Command="ScrollBar.PageUpCommand" Style="{DynamicResource ScrollBarPageButtonStyle}">
</RepeatButton>
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{DynamicResource ScrollBarThumbStyle}"/>
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Command="ScrollBar.PageDownCommand" Style="{DynamicResource ScrollBarPageButtonStyle}"></RepeatButton>
</Track.IncreaseRepeatButton>
</Track>
<RepeatButton Grid.Row="3" Height="18" Style="{DynamicResource ScrollBarLineButtonStyle}" Command="ScrollBar.LineDownCommand" Content="M 0 0 L 4 4 L 8 0 Z" />
<RepeatButton Grid.Row="3" Height="18" Style="{DynamicResource ScrollBarLineButtonStyle}" Command="ScrollBar.LineDownCommand">
<Path Fill="AliceBlue" Data="M 0 4 L 8 4 L 4 0 Z"/>
</RepeatButton>
</Grid>
</ControlTemplate>
<Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Style.Triggers>
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="Width" Value="18"/>
<Setter Property="Height" Value="Auto"/>
<Setter Property="Template" Value="{StaticResource VerticalScrollBar}"/>
</Trigger>
</Style.Triggers>
</Style>这篇关于无法在ListBox的滚动条上应用样式? (Ph！感谢venkatesh解决了！)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
