含蓄惯性的ScrollViewer,scrollView沙漏广告位

ca88会员登录中心 11
ca88会员登录中心

 

  对应的后台依赖属性:

contentContainerStyle

这些样式会应用到一个内层的内容容器上,所有的子视图都会包裹在内容容器内。PS:ScrollView组件的属性不能用style来设置。

三、源码

  本博文分为三个部分,第一部分将描述如何改写TextBox的布局,第二部分则描述如何改写TextBox中的ScrollViewer样式,第三部分则是对自定义样式时产生的不明问题进行修补。

实现的效果

github地址:
https://github.com/yukuifang/KyReactApp.git

ca88会员登录中心 1

1509697628376.jpg

之前学过的知识点今天一点点补回来,使用中才会知道有多少坑等着你,现在总结下最近有关ScrollView的使用的知识点。

  本质上我们只要接管ScrollViewer的滚动逻辑,并且把这个逻辑替换成带有惯性的即可,那么如何去接管呢?这里的关键是先屏蔽ScrollViewer的鼠标滚轮事件:

  为什么把这做为单独的一环来讨论呢?因为前面的代码已经能够完成基本的工作了,而且出现的问题关系也并不是非常大。但是总会不爽,因为它就不那么完善,所以,Fix
It!

属性

  虽然效果很简单,但是网上的一些资料涉及的代码量非常可观,而且效果也不是很理想,滚动的时候没有一个顺滑感。我这里提供的源码一共120多行,就能实现上图的效果。

  然后,分别自定义ScrollBar的样式。以竖向滚动条为例,自定义ControlTemplate,使用Grid作为容器,把滚动条分为三行,第一行为向上按钮、第二行为滚动条、第三行为向下按钮。我这里出于美观考虑,把两个按钮全省略了(实际上我们很少使用按钮来上下滚动,大部分时候用的鼠标中轮和拖动滑块)。

大家好!今天又是个愉快的周五!

二、原理

ca88会员登录中心 2ca88会员登录中心 3ScrollViewer的后台依赖属性

几个已知的滑动或者滑动开始结束的方法:

onScroll:在滚动过程中, 每帧最多调用一次此函数,
调用的频率可以用scrollEventThrottle属性来控制.

onMomentumScrollEnd:当一帧滚动完毕时调用.

onScrollAnimationEnd :ios上的当滚动动画结束时调用.

 

  便可以完美解决鼠标中轮滚动问题。

3、下面就这些方法的顺序做个简单的介绍:

首先在ios上进行测试,测试的结果如下:

ca88会员登录中心 4

image

由上图可以看出执行的顺序,

首先是按下屏幕时触发onTouchStart,

然后手指移动触发onTouchMove,会调用一次或者多次,

如果左右滑动,滑动开始拖动触发onScrollBeginDrag,View开始变化,View成为响应者,

然后onScroll … onTouchMove这两个会触摸多次,

然后手指离开屏幕触发onResponderRelease,

接着触摸结束onTouchEnd

然后是滑动结束拖拽时触发onScrollEndDrag,接着就是一帧滚动的开始onMomentumScrollBegin,它的起始位置和onScrollEndDrag的结束位置重合;

然后是滚动滚动onScroll,

然后是一帧滚动的结束onMomentumScrollEnd,

最后偶尔还会滚动下onScroll,这个有时间不出来,我觉得跟有抖动一样

ca88会员登录中心 ,大家可以自己测试下哦

ca88会员登录中心 5

ca88会员登录中心 6ca88会员登录中心 7消息框基础C#

附上源码:

import React,{Component} from 'react';
import{
   AppRegistry,
   StyleSheet,
   View,
   Image,
    Text,
   ScrollView
}from 'react-native';

let { width,height}  =  require('Dimensions').get('window');

let data = require('../Resource/scrollView/ImageData.json');

let TimerMixin = require('react-timer-mixin');

class KyScrollView extends Component{
    constructor(props){
        super(props);
        mixins: [TimerMixin]
        this.state = {
            dataList:data.data,
            currentPage:0
        }
    }
    render(){
        return(
            <View style={styles.container}>
                <ScrollView ref='scrollViewRef' contentContainerStyle={styles.scollViewStyle}
                            horizontal={true}
                            showsHorizontalScrollIndicator={false}
                            showsVerticalScrollIndicator={false}
                            pagingEnabled={true}
                            bounces={false}
                            onMomentumScrollEnd={(e)=>this._annimationEnd(e)}
                            onScrollBeginDrag = {()=>this._onBeginDrag()}
                            onScrollEndDrag={()=>this._onEndDrag()}>
                    {this._renderContent()}
                </ScrollView>

                <View style={styles.indicatorContentStyle}>
                    {this._renderPagingIndicator()}

                </View>


            </View>
        )
    }
    componentDidMount(){
        this._startTimer();
    }
    componentWillUnmount(){
        clearInterval(this.timer);
    }
    _onBeginDrag(){
        this._startTimer();
    }
    _onEndDrag(){
        clearInterval(this.timer);
    }
    _startTimer(){
        let maxCount =  this.state.dataList.length;
        let scrollView = this.refs.scrollViewRef;
        let that = this;
        this.timer = setInterval(function () {
            if(that.state.currentPage < maxCount-1){
                that.setState({
                    currentPage : that.state.currentPage + 1
                });
            }else {
                that.setState({
                    currentPage : 0
                });
            }
            scrollView.scrollResponderScrollTo({
                x:that.state.currentPage * width,
                y:0,
                animated:true
            });

        },that.props.duration);

    }
    _renderContent(){
        var items = [];
        for (var i =0 ; i < this.state.dataList.length;i++){
            let imageData = this.state.dataList[i];
            items.push(
                <View key={i}>
                    <Image source={{uri:imageData.img}} style={{height:200,width:width}}></Image>
                </View>
            )
        }
        return items;
    }
    _renderPagingIndicator(){
        var indicators  = [];

        for (var i=0;i<this.state.dataList.length;i++){
            let style = this.state.currentPage == i ? {color:'orange'} : {color:'#FFFFFF'};
            indicators.push(
                <Text key={i} style={[{fontSize:25},style]}>&bull;</Text>
            )
        }
        return indicators;
    }
    _annimationEnd(e){
        let offsetX = e.nativeEvent.contentOffset.x;
        this.setState({
            currentPage:offsetX / width
        })
    }


}

KyScrollView.properties = {
    currentPage:React.PropTypes.int
}
KyScrollView.defaultProps = {
     duration:1000
}

const styles = StyleSheet.create({
    container:{

        // backgroundColor:'red',
        position:'relative'
    },
    scollViewStyle:{
        backgroundColor:'black'
    },
    indicatorContentStyle:{
        height:20,
        backgroundColor:'rgba(0,0,0,0.2)',
        position:'absolute',
        bottom:2,
        left:0,
        right:0,
        flexDirection:'row',
        alignItems:'center'


    }
});

module.exports =KyScrollView;

  因为常见的惯性滚动以垂直方向居多,所以我没有写水平方向的逻辑,但也很容易扩展,有兴趣的博友可以下载源代码自己研究。

  另外,如果不是把ScrollViewer的Name设置为“PART_ContentHost”,而是使用<TextBlock
Text=”{TemplateBinding Text}” TextWrapping=”{TemplateBinding
TextWrapping}”
/>放置到ScrollViewer体中,就可以正常滚动。不过这时会导致无法选中文本了,因为TextBlock中的文本是不支持选中的,特别注意到,这时的滚动效率非常低,滚动时画面有明显的迟钝现象。同样如果不把ScrollViewer的Name设置为“PART_ContentHost”,而用<Decorator
Name=”PART_ContentHost”
/>放置到ScrollViewer体中,虽然选中也能支持,但是依然不能滚动。

2、还有其他的一些事件如下,触摸事件里面有携带event,大家可以再下面的方法里面更改一些view操作就可以打印出来这些event携带的信息了

1、onScrollBeginDrag:一个子view滑动开始拖动开始时触发,注意和onMomentumScrollBegin的区别

2、onScrollEndDrag:一个子view滚动结束拖拽时触发,注意和onMomentumScrollEnd的区别

3、onTouchStart:按下屏幕时触发

4、onTouchMove:移动手指时触发

5、onTouchEnd:手指离开屏幕触摸结束时触发

6、onMomentumScrollBegin:当一帧滚动开始时调用.

7、onMomentumScrollEnd:当一帧滚动完毕时调用.

8、onStartShouldSetResponder:触摸开始时是否成为响应者

9、onStartShouldSetResponderCapture:防止子视图在触摸开始时成为应答器

10、onScrollShouldSetResponder:滚动时是否成为响应者

11、onResponderGrant:开始响应时触发

12、onResponderRelease:手指释放后,视图成为响应者

13、onResponderReject:响应拒绝

14、onScroll:滚动时触发,会触发多次

1 protected override void OnMouseWheel(MouseWheelEventArgs e)
2 {
3      e.Handled = true;
4 }

  当然不要忘记,把“_ScrollYAction = ScrollYMethod;”,“_ScrollXAction

ScrollXMethod;”这两条委托初始化语句放到PART_ContentHost_Initialized事件处理函数中去,不然就白写了。

  至此,问题2也修改完毕。

  问题3:自动滚动到底部

  实际上这不是问题,而是一个改善,因为一般的滚动条都没有这个功能。在实用中,假如消息是不停地填写到消息框中,理想中应该是当拖动滚动条时,不会自动把滚动条更新到最近的一条消息,而是锁定到拖动的位置(因为我想看的是拖动到的消息)。另外,如果想实时看新消息,就需要自动滚动到最底部。

  解决方法:

  当滚动条拖动到最底部时,就开启自动滚动,每来一条新消息都滚动一次到最底部。如果滚动条不在最底部就不用自动滚动。实现方法就是为TextBox添加TextChanged=”TextBox_TextChanged”事件,以判断是否需要滚动:

1         private void TextBox_TextChanged(object sender, TextChangedEventArgs e)
2         {
3             if (this.Text != "" && ScrollViewer != null)
4             {
5                 // 如果已经拖到最底端,则固定住
6                 if (ScrollViewer.ScrollableHeight == ScrollViewer.VerticalOffset)
7                     ScrollViewer.ScrollToBottom();
8             }
9         }

  终于码完字了,多想只贴代码啊。放个图,大家看看吧:

ca88会员登录中心 8

  请无视上面的那个蓝色横条,那是我另外一个程序中的GridSplitter。这个自定义控件除了支持TextBox的所有属性外,还可以改变配色(使用公开的属性),另外还有点击清空、关闭按钮的操作实现都不难,不贴了,感兴趣的下载源代码看看吧。

  源代码:ScrollTest.rar

  转载请注明原址:http://www.cnblogs.com/lekko/archive/2013/02/27/2935022.html 

1 protected override void OnMouseWheel(MouseWheelEventArgs e)
2 {
3     if (!IsEnableInertia)
4     {
5         base.OnMouseWheel(e);
6         return;
7     }
8     e.Handled = true;
9 }    

  在构造前台界面时,首先,定义了一个Grid做为容器,并把它分成了四份,分别是内容、竖向滚动条、横向滚动条、空白。其中,内容位于0行、0列,使用ScrollContentPresenter来表示将要显示的内容;竖向滚动条位于0行1列,使用ScrollBar来表示;横向滚动条位于1行0列,使用横向(Orientation=”Horizontal”)的ScrollBar来表示。

 

  然后,自己实现中轮滚动方法,为ScrollViewer添加MouseWheel=”PART_ContentHost_MouseWheel”事件,添加后台响应代码:

1 private static readonly DependencyPropertyKey VerticalOffsetPropertyKey = DependencyProperty.RegisterReadOnly(nameof (VerticalOffset), typeof (double), typeof (ScrollViewer), (PropertyMetadata) new FrameworkPropertyMetadata((object) 0.0));
2 
3 public static readonly DependencyProperty VerticalOffsetProperty = ScrollViewer.VerticalOffsetPropertyKey.DependencyProperty;
 1     /// <summary>
 2         /// 消息体滚动框
 3         /// </summary>
 4         public ScrollViewer ScrollViewer { get; set; }
 5     
 6     // 初始化滚动条
 7         private void PART_ContentHost_Initialized(object sender, EventArgs e)
 8         {
 9             this.ScrollViewer = sender as ScrollViewer;
10         }

  这样一来,ScrollViewer就不会响应滚轮事件了,我们就在这里做文章。首先我们给这个ScrollViewer添加一个属性 IsEnableInertia ,用来控制是否使用惯性,因为萝卜青菜各有所爱,不要想着强制所有人使用惯性,所以滚轮响应方法变为:

  还是把这次写的消息框做成用户控件的形式,首先,前台简单的XAML:

一、先看看效果

  此时的效果如图所示:ca88会员登录中心 9  看起来还不错吧,右上角的关闭按钮由于截图原因不是很清晰,稍后我们可以看到完整版的要好一些。

  最后还有一个冲突问题,当手动拖动滑块或者当用上下文菜单改变滚动条位置时是不能用动画的,因为这时候没有触发 OnMouseWheel ,没关系,这正是我们想要的,但是如果再次触发 OnMouseWheel 就有问题了,因为手动触发滚动的时候我们没有给 CurrentVerticalOffset 和 _totalVerticalOffset 赋值( CurrentVerticalOffset 和 _totalVerticalOffset 只在 OnMouseWheel 中赋值),所以在用动画执行滚动操作前要先判断一下是否需要先更新一下它们俩,如何判断?我们可以用一个私有字段 _isRunning 来维护状态,每当动画开始就给它赋值true,结束则赋值false。这样一来,当 _isRunning = false 时,说明在调用 OnMouseWheel 前,动画已经结束,用户可能已经手动改变了滚动条位置(也可能没有,但这并不影响),所以就要给之前俩兄弟更新一下值了。

  解决方法:

  控制ScrollViewer的垂直滚动可以使用 ScrollViewer.ScrollToVerticalOffset ,横向也一样。为什么不能用 VerticalOffset ?因为 VerticalOffset 在注册的时候就说明了是只读的:

  二、改造ScrollViewer控件

ca88会员登录中心 10

   一般来说,我们在任何文字相关软件上,比如记事本、网页等,只要鼠标左键按下拖动选中文本,如果鼠标超出文本框可显示范围,便会自动向鼠标所在方向滚动文本内容,以实现跨页选中的效果。但是与问题1一样,由于更改了ScrollViewer的Template,导致这个通用功能也需要自己实现了。

  好了,接下来就是怎么在滚轮响应方法中实现惯性运动了,也就是一种减速运动。想到这儿,熟悉动画的博友很快就知道要用WPF的动画来实现了,默认的动画都是一次线性的,要有惯性效果就得用缓动函数,WPF的缓动函数有很多,而 CubicEase 非常适合用来做惯性,它的描述图如下:

 1 namespace FS.PresentationManagement.Controls
 2 {
 3     /// <summary>
 4     /// 文本消息框控件
 5     /// </summary>
 6     public partial class MessageTextBox : TextBox
 7     {
 8         public MessageTextBox()
 9         {
10             InitializeComponent();        
11         }
12     }
13 }

 

  1 <ScrollViewer x:Name="PART_ContentHost">
  2     <ScrollViewer.Template>
  3         <ControlTemplate TargetType="{x:Type ScrollViewer}">
  4             <Grid Background="{Binding Path=ScrollViewerBackground,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type TextBox}}}">
  5                 <Grid.ColumnDefinitions>
  6                     <ColumnDefinition />
  7                     <ColumnDefinition Width="Auto"/>
  8                 </Grid.ColumnDefinitions>
  9                 <Grid.RowDefinitions>
 10                     <RowDefinition/>
 11                     <RowDefinition Height="Auto"/>
 12                 </Grid.RowDefinitions>
 13                 <ScrollContentPresenter Margin="5,5,0,5" />
 14                 <ScrollBar Name="PART_VerticalScrollBar" Grid.Column="1" Value="{TemplateBinding VerticalOffset}" Maximum="{TemplateBinding ScrollableHeight}" ViewportSize="{TemplateBinding ViewportHeight}" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}">
 15                     <ScrollBar.Template>
 16                         <ControlTemplate TargetType="{x:Type ScrollBar}">
 17                             <!-- 竖向滚动条宽度 -->
 18                             <Grid Width="10">
 19                                 <Grid.RowDefinitions>
 20                                     <RowDefinition Height="1" />
 21                                     <RowDefinition />
 22                                     <RowDefinition Height="1" />
 23                                 </Grid.RowDefinitions>
 24                                 <Track x:Name="PART_Track" Grid.Row="1" IsDirectionReversed="True">
 25                                     <Track.DecreaseRepeatButton>
 26                                         <!--上空白-->
 27                                         <RepeatButton Command="ScrollBar.PageUpCommand" Opacity="0.5">
 28                                             <RepeatButton.Template>
 29                                                 <ControlTemplate>
 30                                                     <Border Background="{Binding Path=ScrollBarBackground,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type TextBox}}}" CornerRadius="5,5,0,0" />
 31                                                 </ControlTemplate>
 32                                             </RepeatButton.Template>
 33                                         </RepeatButton>
 34                                     </Track.DecreaseRepeatButton>
 35                                     <Track.Thumb>
 36                                         <!--滑块-->
 37                                         <Thumb>
 38                                             <Thumb.Template>
 39                                                 <ControlTemplate>
 40                                                     <Border Background="{Binding Path=ScrollBarForeground,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type TextBox}}}" CornerRadius="5" />
 41                                                 </ControlTemplate>
 42                                             </Thumb.Template>
 43                                         </Thumb>
 44                                     </Track.Thumb>
 45                                     <Track.IncreaseRepeatButton>
 46                                         <!--下空白-->
 47                                         <RepeatButton Command="ScrollBar.PageDownCommand" Opacity="0.5">
 48                                             <RepeatButton.Template>
 49                                                 <ControlTemplate>
 50                                                     <Border Background="{Binding Path=ScrollBarBackground,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type TextBox}}}" CornerRadius="0,0,5,5" />
 51                                                 </ControlTemplate>
 52                                             </RepeatButton.Template>
 53                                         </RepeatButton>
 54                                     </Track.IncreaseRepeatButton>
 55                                 </Track>
 56                             </Grid>
 57                         </ControlTemplate>
 58                     </ScrollBar.Template>
 59                 </ScrollBar>
 60                 <ScrollBar Name="PART_HorizontalScrollBar" Orientation="Horizontal" Grid.Row="1" Value="{TemplateBinding HorizontalOffset}" Maximum="{TemplateBinding ScrollableWidth}" ViewportSize="{TemplateBinding ViewportWidth}" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}">
 61                     <ScrollBar.Template>
 62                         <ControlTemplate TargetType="{x:Type ScrollBar}">
 63                             <!-- 横向滚动条高度 -->
 64                             <Grid Height="10">
 65                                 <Grid.ColumnDefinitions>
 66                                     <ColumnDefinition Width="1" />
 67                                     <ColumnDefinition />
 68                                     <ColumnDefinition Width="1" />
 69                                 </Grid.ColumnDefinitions>
 70                                 <Track x:Name="PART_Track" Grid.Column="1" IsDirectionReversed="False">
 71                                     <Track.DecreaseRepeatButton>
 72                                         <!--左空白-->
 73                                         <RepeatButton Command="ScrollBar.PageLeftCommand" Opacity="0.5">
 74                                             <RepeatButton.Template>
 75                                                 <ControlTemplate>
 76                                                     <Border Background="{Binding Path=ScrollBarBackground,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type TextBox}}}" CornerRadius="5,0,0,5" />
 77                                                 </ControlTemplate>
 78                                             </RepeatButton.Template>
 79                                         </RepeatButton>
 80                                     </Track.DecreaseRepeatButton>
 81                                     <Track.Thumb>
 82                                         <!--滑块-->
 83                                         <Thumb>
 84                                             <Thumb.Template>
 85                                                 <ControlTemplate>
 86                                                     <Border Background="{Binding Path=ScrollBarForeground,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type TextBox}}}" CornerRadius="5" />
 87                                                 </ControlTemplate>
 88                                             </Thumb.Template>
 89                                         </Thumb>
 90                                     </Track.Thumb>
 91                                     <Track.IncreaseRepeatButton>
 92                                         <!--右空白-->
 93                                         <RepeatButton Command="ScrollBar.PageRightCommand" Opacity="0.5">
 94                                             <RepeatButton.Template>
 95                                                 <ControlTemplate>
 96                                                     <Border Background="{Binding Path=ScrollBarBackground,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type TextBox}}}" CornerRadius="0,5,5,0" />
 97                                                 </ControlTemplate>
 98                                             </RepeatButton.Template>
 99                                         </RepeatButton>
100                                     </Track.IncreaseRepeatButton>
101                                 </Track>
102                             </Grid>
103                         </ControlTemplate>
104                     </ScrollBar.Template>
105                 </ScrollBar>
106             </Grid>
107         </ControlTemplate>
108     </ScrollViewer.Template>
109 </ScrollViewer>

  本文所讨论的控件源码已经在github开源:

  最后,还有一点要解释一下,大家发现许多控件有类似于“PART_***”的名称,这些名称请不要随意更改,这是WPF内置的特殊名称,比如ScrollViewer的“PART_ContentHost”名称,就是表示这个控件是用于装载TextBox的文本内容的,并且经过测试,这个名称只能用于ScrollViewer或者Adorner、Decorator控件。如果没有使用这些特殊名称,可能就无法像你想象中那样自动完成工作了。

  图中,横轴表示时间,纵轴表示运动距离。很明显,中间的 EaseOut 模式就是我们想要的。到了这里思路就清晰了,我们可以定义一个属性 CurrentVerticalOffset ,我们会在它上面实现动画,在它的值回调函数中调用 ScrollViewer.ScrollToVerticalOffset 来更新ScrollViewer的滚动位置。当然我们还需要一个私有字段 _totalVerticalOffset ,这个是用来存放ScrollViewer滚动目标位置的,滚轮向下滚动一个单位我们就给它减去一次 e.Delta ,这里的e是滚轮响应方法传进来的参数,每次给它赋值之后,就可以在 CurrentVerticalOffset 上执行动画了: BeginAnimation(CurrentVerticalOffsetProperty,
animation) ,需要特别注意的是,当一个依赖属性用了动画改变后,再对其赋值则不会生效,原因是在一个动画到达活动期的终点后,时间线默认会保持其进度,直到其父级的活动期和保持期结束为止。如果想在动画结束后还可以手动更改依赖属性的值,则需要把 FillBehavior 设置为Stop。不过这样又会出现一个问题,一旦动画结束,这个依赖属性又会恢复初始值,所以还要给这个动画订阅一个 Completed 事件,在事件响应方法中为 CurrentVerticalOffset 给定目标值,也就是 _totalVerticalOffset 。

  最后,就是编写滚动委托调用的函数了,分别有两个函数,在函数内以100ms为一循环,不停地进行滚动,当滚动到结束或者滚动量已经为0时跳出循环,退出函数执行。

  一、生成自定义TextBox控件

  滚动条是使用的Track控件,它又包含三个区域,分别是上空白、滑块、下空白,我们来看个示例图:

   产生这个问题的原因非常诡异,如果不是修改ScrollViewer的Template来完全改变它,而是使用ScrollViewer.Resources来定义ScrollBar的Style则完全不会产生这种问题,但是这无法使的改变各控件的大小和布局。

ca88会员登录中心 11

ca88会员登录中心 12ca88会员登录中心 13滚动函数体

  首先,为ScrollViewer添加Initialized=”PART_ContentHost_Initialized”事件,后台增加新的属性ScrollViewer以便使用:

  • (e.Delta >> 2));
      }
 1         private void TextBox_SelectionChanged(object sender, RoutedEventArgs e)
 2         {
 3             if (ScrollViewer != null && this.SelectedText != "")
 4             {
 5                 var point = System.Windows.Input.Mouse.GetPosition(ScrollViewer);
 6                 // 纵向位移
 7                 double y = point.Y;
 8                 if (y > 0)
 9                 {
10                     y = y - ScrollViewer.ActualHeight;
11                     if (y < 0) y = 0;
12                 }
13                 _ScrollY = y;
14                 // 横向位移
15                 double x = point.X;
16                 if (x > 0)
17                 {
18                     x = x - ScrollViewer.ActualWidth;
19                     if (x < 0) x = 0;
20                 }
21                 _ScrollX = x;
22             }
23         }

  现在,滚动量已经能更新了,但滚动触发条件还需要考虑。首先,横向和竖向滚动相对于前台界面肯定是异步进行的;其次,已经在滚动时要实时根据滚动量来控制滚动速度;还有,滚动终止条件应该是滚动量为0或者已经滚动到了尽头。好了,目标明确,需要添加两个委托来分别处理横向、竖向滚动,还需要两个异步操作状态来表示滚动是否结束,那么,代码扩展为:

 1 <TextBox x:Class="FS.PresentationManagement.Controls.MessageTextBox"
 2          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="SkyBlue">
 4     <TextBox.Template>
 5         <ControlTemplate TargetType="{x:Type TextBox}">
 6             <Grid Background="{TemplateBinding Background}">
 7                 <Grid.ColumnDefinitions>
 8                     <ColumnDefinition />
 9                     <ColumnDefinition Width="62" />
10                 </Grid.ColumnDefinitions>
11                 <!-- 文本框 -->
12                 <ScrollViewer x:Name="PART_ContentHost">
13                     <!-- 暂时省略 -->
14                 </ScrollViewer>
15                 <!-- 按钮 -->
16                 <Button Name="BTN_Clear" Margin="5" Grid.Column="1" Click="BTN_Clear_Click">
17                     <Button.Template>
18                         <ControlTemplate>
19                             <Image Name="IMG_Clear" Source="../Pic/clear.png"/>
20                             <ControlTemplate.Triggers>
21                                 <Trigger Property="IsMouseOver" Value="True">
22                                     <Setter TargetName="IMG_Clear" Property="Source" Value="../Pic/clear2.png" />
23                                 </Trigger>
24                                 <Trigger Property="Button.IsPressed" Value="True">
25                                     <Setter TargetName="IMG_Clear" Property="Source" Value="../Pic/clear3.png" />
26                                 </Trigger>
27                             </ControlTemplate.Triggers>
28                         </ControlTemplate>
29                     </Button.Template>
30                 </Button>
31                 <Button Name="BTN_Close" Margin="0,-18,-25,0" VerticalAlignment="Top" Width="32" Height="32" Grid.Column="1" Click="BTN_Close_Click">
32                     <Button.Template>
33                         <ControlTemplate>
34                             <Image Name="IMG_Close" Source="../Pic/close.png" />
35                             <ControlTemplate.Triggers>
36                                 <Trigger Property="IsMouseOver" Value="True">
37                                     <Setter TargetName="IMG_Close" Property="Source" Value="../Pic/close2.png" />
38                                 </Trigger>
39                                 <Trigger Property="Button.IsPressed" Value="True">
40                                     <Setter TargetName="IMG_Close" Property="Source" Value="../Pic/close3.png" />
41                                 </Trigger>
42                             </ControlTemplate.Triggers>
43                         </ControlTemplate>
44                     </Button.Template>
45                 </Button>
46             </Grid>
47         </ControlTemplate>
48     </TextBox.Template>
49 </TextBox>
 1         /// <summary>
 2         /// 滚动框背景
 3         /// </summary>
 4         public Brush ScrollViewerBackground
 5         {
 6             get { return (Brush)GetValue(ScrollViewerBackgroundProperty); }
 7             set { SetValue(ScrollViewerBackgroundProperty, value); }
 8         }
 9         public static readonly DependencyProperty ScrollViewerBackgroundProperty =
10             DependencyProperty.Register("ScrollViewerBackground", typeof(Brush), typeof(MessageTextBox), new PropertyMetadata(Brushes.LightBlue));
11 
12         /// <summary>
13         /// 滚动条前景
14         /// </summary>
15         public Brush ScrollBarForeground
16         {
17             get { return (Brush)GetValue(ScrollBarForegroundProperty); }
18             set { SetValue(ScrollBarForegroundProperty, value); }
19         }
20         public static readonly DependencyProperty ScrollBarForegroundProperty =
21             DependencyProperty.Register("ScrollBarForeground", typeof(Brush), typeof(MessageTextBox), new PropertyMetadata(Brushes.RoyalBlue));
22 
23         /// <summary>
24         /// 滚动条背景
25         /// </summary>
26         public Brush ScrollBarBackground
27         {
28             get { return (Brush)GetValue(ScrollBarBackgroundProperty); }
29             set { SetValue(ScrollBarBackgroundProperty, value); }
30         }
31         public static readonly DependencyProperty ScrollBarBackgroundProperty =
32             DependencyProperty.Register("ScrollBarBackground", typeof(Brush), typeof(MessageTextBox), new PropertyMetadata(Brushes.WhiteSmoke));

  问题2:鼠标左键按住拖动不能使ScrollViewer滚动

  这个时候框架大概是,左边将是一个ScrollViewer,用来显示消息,右边则是关闭和清理,两个按钮,至于按钮的样式,也已经进行了更改,每个按钮使用三张图片来表示原始、停靠、按下三种状态,需要注意,上面的XAML中按钮的Source路径是像“../Pic/xxx.png”,这是我把图片放到了当前文件的—>上级目录的—>Pic目录下,所以实际上大家在使用的时候需要把这个属性改成图片所在路径。

  下面介绍本文的核心,如何自定义ScrollViewer控件,当然,我们的目标也不是把它改成什么奇葩,只是想把滚动条变得漂亮一点而已。如果使用WPF比较多的朋友会知道,许多控件都是由很多层一层一层地叠加形成可视化树的,ScrollViewer也不例外,现在通过Template属性可以完全自己定义其结构。

  问题1:鼠标中轮不能使ScrollViewer上下滚动

  首先,给前台的最上层元素TextBox添加SelectionChanged=”TextBox_SelectionChanged”事件,以追踪选中时鼠标所在位置:

  说明一下,_ScrollX和_ScrollY是两个成员属性,它们分别用来记录横向、竖向的鼠标位移,以用于决定是否滚动。只有在超出ScrollViewer的范围时,它们的值才会不为0,当小于0时表示要向上/左滚动,大于0时表示向下/右滚动,它们的绝对值越大,则滚动速度越快。

  解决方法:

 1     // 坚向位移
 2         private double _ScrollY
 3         {
 4             get { return _scrollY; }
 5             set
 6             {
 7                 _scrollY = value;
 8                 // 开启滚动
 9                 if (_scrollY != 0 && (_ScrollYResult == null || _ScrollYResult.IsCompleted))
10                     _ScrollYResult = _ScrollYAction.BeginInvoke(null, null);
11             }
12         }
13         private double _scrollY;
14 
15         // 横向位移
16         private double _ScrollX
17         {
18             get { return _scrollX; }
19             set
20             {
21                 _scrollX = value;
22                 // 开启滚动
23                 if (_scrollX != 0 && (_ScrollXResult == null || _ScrollXResult.IsCompleted))
24                     _ScrollXResult = _ScrollXAction.BeginInvoke(null, null);
25             }
26         }
27         private double _scrollX;
28 
29     // 竖向滚动
30         private Action _ScrollYAction;
31         private IAsyncResult _ScrollYResult;
32     
33         // 横向滚动
34         private Action _ScrollXAction;
35         private IAsyncResult _ScrollXResult;

  三、修正一些问题

  要进行改造的ScrollViewer控件就位于第一部分XAML代码中的省略部分,我现在只贴出这部分代码:

 

ca88会员登录中心 14ca88会员登录中心 15自定义ScrollViewer模版

ca88会员登录中心 16ca88会员登录中心 17滚动委托

ca88会员登录中心 18ca88会员登录中心 19初始化滚动条

  也就是说,在_ScrollX和_ScrollY更新的时候,程序会进行一次判断,如果滚动量不为0,而且委托调用没有开始或者已经结束的时候,就调用委托,开始进行滚动。

ca88会员登录中心 20ca88会员登录中心 21消息框基础XAML

  寒假过完,在家真心什么都做不了,可能年龄大了,再想以前那样能专心坐下来已经不行了。回来第一件事就是改了项目的一个bug,最近又新增了一个新的功能,为程序添加了一个消息栏。消息栏有许多形式,要求是一个不需要历史记录,可以用鼠标选中消息内容的消息栏。我首先想到的就是TextBox,我个人比较喜欢美观的,有点强迫症,所以必须把TextBox中的ScrollViewer给改写了,好吧,开始。

  后台代码此时也非常简单,只是简单地继承了TextBox控件:

  private void PART_ContentHost_MouseWheel(object sender,
System.Windows.Input.MouseWheelEventArgs e)
  {
    ScrollViewer.ScrollToVerticalOffset(ScrollViewer.VerticalOffset

  Track的DecreaseRepeatButton就是上空白、Thumb则是滑块、IncreaseRepeatButton是下空白,分别对这三个控件进行样式自定义即可改变其外观。需要说明的是竖向滚动条需要把Track的IsDirectionReversed属性设置为True,横向则设置为False,不然会出现非常奇怪的现象(原因嘛,大家看属性名的意思就知道了)。

 1     // 竖向
 2     private void ScrollYMethod()
 3         {
 4             double endOffset = 0;
 5             if (_ScrollY < 0)       // 向上滚动
 6                 endOffset = 0;
 7             else                    // 向下滚动
 8                 ScrollViewer.Dispatcher.Invoke((Action)(() => endOffset = ScrollViewer.ScrollableHeight), null);
 9             // 初始位置
10             double offset = 0;
11             ScrollViewer.Dispatcher.Invoke((Action)(() => offset = ScrollViewer.VerticalOffset), null);
12             // 开始滚动
13             while (offset != endOffset && _ScrollY != 0)
14             {
15                 ScrollViewer.Dispatcher.Invoke((Action)(() =>
16                 {
17                     offset = ScrollViewer.VerticalOffset;
18                     ScrollViewer.ScrollToVerticalOffset(ScrollViewer.VerticalOffset + _ScrollY);
19                 }), null);
20                 Thread.Sleep(100);
21             }
22         }
23 
24     // 横向
25     private void ScrollXMethod()
26         {
27             double endOffset = 0;
28             if (_ScrollX < 0)       // 向左滚动
29                 endOffset = 0;
30             else                    // 向右滚动
31                 ScrollViewer.Dispatcher.Invoke((Action)(() => endOffset = ScrollViewer.ScrollableWidth), null);
32             // 初始位置
33             double offset = 0;
34             ScrollViewer.Dispatcher.Invoke((Action)(() => offset = ScrollViewer.HorizontalOffset), null);
35             // 开始滚动
36             while (offset != endOffset && _ScrollX != 0)
37             {
38                 ScrollViewer.Dispatcher.Invoke((Action)(() =>
39                 {
40                     offset = ScrollViewer.HorizontalOffset;
41                     ScrollViewer.ScrollToHorizontalOffset(ScrollViewer.HorizontalOffset + _ScrollX);
42                 }), null);
43                 Thread.Sleep(100);
44             }
45         }

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图