【发布时间】:2013-07-27 19:00:56
【问题描述】:
我尝试在 WPF 中自定义 ScrollBar 的外观和感觉 DataGrid,只需在 ScrollBar 上应用新样式即可。此样式将ScrollBar 的Template 更改为新样式。几乎可以正常工作,除了我不能在Thumb 上按住鼠标并拖动滚动,我只能点击RepeatButtons(Line buttons 和Page buttons 都可以)滚动。
我还是 WPF 的新手,我不知道这里可能存在什么问题。代码如下:
<DataGrid HorizontalAlignment="Left" VerticalAlignment="Top" ItemsSource="{Binding}" SnapsToDevicePixels="True">
<DataGrid.Resources>
<Style TargetType="ScrollBar">
<Style.Resources>
<ControlTemplate x:Key="verRepeat" TargetType="RepeatButton">
<Border CornerRadius="4" BorderBrush="Green" BorderThickness="1" Background="Yellow">
<ContentPresenter Width="18" Height="18"/>
</Border>
</ControlTemplate>
<ControlTemplate x:Key="midRepeat" TargetType="RepeatButton">
<Border Background="Transparent">
<ContentPresenter/>
</Border>
</ControlTemplate>
<ControlTemplate x:Key="verScroll" TargetType="ScrollBar">
<Grid>
<Grid.RowDefinitions>
<RowDefinition MaxHeight="18"/>
<RowDefinition/>
<RowDefinition MaxHeight="18"/>
</Grid.RowDefinitions>
<Border Grid.RowSpan="3"/>
<RepeatButton Grid.Row="0" Width="18" Command="ScrollBar.LineUpCommand" Template="{StaticResource verRepeat}">
</RepeatButton>
<Track Grid.Row="1" IsDirectionReversed="True">
<Track.DecreaseRepeatButton>
<RepeatButton Command="ScrollBar.PageUpCommand" Template="{StaticResource midRepeat}">
</RepeatButton>
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Margin="2,0,2,0">
<Thumb.Template>
<ControlTemplate TargetType="Thumb">
<Border Background="Green"/>
</ControlTemplate>
</Thumb.Template>
</Thumb>
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Command="ScrollBar.PageDownCommand" Template="{StaticResource midRepeat}">
</RepeatButton>
</Track.IncreaseRepeatButton>
</Track>
<RepeatButton Grid.Row="2" Command="ScrollBar.LineDownCommand" Template="{StaticResource verRepeat}">
</RepeatButton>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="horScroll" TargetType="ScrollBar">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MaxWidth="18"/>
<ColumnDefinition Width="0.00001*"/>
<ColumnDefinition MaxWidth="18"/>
</Grid.ColumnDefinitions>
<Border Grid.ColumnSpan="3"/>
<RepeatButton Grid.Column="0" Height="18" Command="ScrollBar.LineLeftCommand" Template="{StaticResource verRepeat}">
</RepeatButton>
<Track Grid.Column="1" IsDirectionReversed="False" Focusable="False">
<Track.DecreaseRepeatButton>
<RepeatButton Command="ScrollBar.PageLeftCommand" Template="{StaticResource midRepeat}">
</RepeatButton>
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb>
<Thumb.Template>
<ControlTemplate TargetType="Thumb">
<Grid>
<Border Background="Green" Margin="0,1,0,1"/>
<ContentPresenter Width="18" Height="18"/>
</Grid>
</ControlTemplate>
</Thumb.Template>
</Thumb>
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Command="ScrollBar.PageRightCommand" Template="{StaticResource midRepeat}">
</RepeatButton>
</Track.IncreaseRepeatButton>
</Track>
<RepeatButton Grid.Column="2" Command="ScrollBar.LineRightCommand" Template="{StaticResource verRepeat}">
</RepeatButton>
</Grid>
</ControlTemplate>
</Style.Resources>
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Style.Triggers>
<Trigger Property="Orientation" Value="Horizontal">
<Setter Property="Template" Value="{StaticResource horScroll}"/>
</Trigger>
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="Template" Value="{StaticResource verScroll}"/>
</Trigger>
</Style.Triggers>
</Style>
</DataGrid.Resources>
</DataGrid>
我想我在这里错过了一些东西,Thumb 似乎无法与之交互。
这是网格的截图:
【问题讨论】:
标签: c# wpf xaml datagrid controltemplate