【笔记】WPF实现类似安卓ViewPager引导界面效果及问题汇总

  1 namespace UserInterface.UserControls
  2 {
  3     /// <summary>
  4     /// IndicatorControl.xaml 的交互逻辑
  5     /// </summary>
  6     public partial class IndicatorControl : UserControl
  7     {
  8         #region 字段及属性
  9         /// <summary>
 10         /// 单张图片宽度
 11         /// </summary>
 12         private Double _width = 1300;
 13         /// <summary>
 14         /// 触摸起始点
 15         /// </summary>
 16         private TouchPoint _startTouchPoint;
 17         /// <summary>
 18         /// 触摸结束点
 19         /// </summary>
 20         private TouchPoint _endTouchPoint;
 21 
 22         // Using a DependencyProperty as the backing store for ActiveButtonIndex.  This enables animation, styling, binding, etc...
 23         public static readonly DependencyProperty ActiveItemIndexProperty =
 24             DependencyProperty.Register("ActiveItemIndex", typeof(Int32), typeof(IndicatorControl), new UIPropertyMetadata(-1, new PropertyChangedCallback((sender, e) =>
 25             {
 26                 IndicatorControl control = sender as IndicatorControl;
 27                 control.SetActiveItem();
 28             })));
 29 
 30         // Using a DependencyProperty as the backing store for TotalButtonCount.  This enables animation, styling, binding, etc...
 31         public static readonly DependencyProperty TotalItemsCountProperty =
 32             DependencyProperty.Register("TotalItemsCount", typeof(Int32), typeof(IndicatorControl), new UIPropertyMetadata(-1, new PropertyChangedCallback((sender, e) =>
 33             {
 34                 IndicatorControl control = sender as IndicatorControl;
 35                 control.SetItemsByTotalCount();
 36             })));
 37 
 38         // Using a DependencyProperty as the backing store for ImageListProperty.  This enables animation, styling, binding, etc...
 39         public static readonly DependencyProperty ItemsListSourceProperty =
 40             DependencyProperty.Register("ItemsListSource", typeof(IEnumerable<BitmapImage>), typeof(IndicatorControl), new UIPropertyMetadata(null, new PropertyChangedCallback((sender, e) =>
 41             {
 42                 IndicatorControl control = sender as IndicatorControl;
 43                 control.SetItemsList();
 44             })));
 45         /// <summary>
 46         /// 当前处于激活状态的条目索引
 47         /// </summary>
 48         public Int32 ActiveItemIndex
 49         {
 50             get { return (Int32)GetValue(ActiveItemIndexProperty); }
 51             set { SetValue(ActiveItemIndexProperty, value); }
 52         }
 53         /// <summary>
 54         /// 总条目数量
 55         /// </summary>
 56         public Int32 TotalItemsCount
 57         {
 58             get { return (Int32)GetValue(TotalItemsCountProperty); }
 59             set { SetValue(TotalItemsCountProperty, value); }
 60         }
 61         /// <summary>
 62         /// 条目数据源
 63         /// </summary>
 64         public IEnumerable<BitmapImage> ItemsListSource
 65         {
 66             get { return (IEnumerable<BitmapImage>)GetValue(ItemsListSourceProperty); }
 67             set { SetValue(ItemsListSourceProperty, value); }
 68         }
 69         #endregion
 70 
 71         #region 构造函数
 72         public IndicatorControl()
 73         {
 74             InitializeComponent();
 75         }
 76         #endregion
 77 
 78         #region 方法
 79         /// <summary>
 80         /// 设置当前活动的Item项
 81         /// </summary>
 82         public void SetActiveItem()
 83         {
 84             for (int i = 0; i < this.TotalItemsCount; i++)
 85             {
 86                 if (i.Equals(this.ActiveItemIndex))
 87                 {
 88                     (this.buttonStack.Children[i] as RadioButton).IsChecked = true;
 89                 }
 90             }
 91             MoveAnimation(ActiveItemIndex);
 92         }
 93         /// <summary>
 94         /// 设置Item的总数
 95         /// </summary>
 96         public void SetItemsByTotalCount()
 97         {
 98             this.buttonStack.Children.Clear();
 99             for (Int32 i = 0; i < this.TotalItemsCount; i++)
100             {
101                 RadioButton r = new RadioButton();
102                 r.IsEnabled = false;
103                 r.GroupName = "Index";
104                 r.Margin = new Thickness(10);
105                 this.buttonStack.Children.Add(r);
106             }
107         }
108         /// <summary>
109         /// 设置Items数据源
110         /// </summary>
111         public void SetItemsList()
112         {
113             this.imageStack.Children.Clear();
114             for (Int32 i = 0; i < ItemsListSource.Count(); i++)
115             {
116                 Image image = new Image();
117                 image.Source = ItemsListSource.ElementAt(i);
118                 image.Width = _width;
119                 image.Stretch = Stretch.Fill;
120                 this.imageStack.Children.Add(image);
121             }
122         }
123         #endregion
124 
125         #region 事件
126         /// <summary>
127         /// 控件加载时执行一些操作
128         /// </summary>
129         /// <param name="sender"></param>
130         /// <param name="e"></param>
131         private void UserControl_Loaded(object sender, RoutedEventArgs e)
132         {
133             this.ActiveItemIndex = 0;
134             this.imageStack.Width = _width * TotalItemsCount;
135         }
136         /// <summary>
137         /// 触摸按下
138         /// </summary>
139         /// <param name="sender"></param>
140         /// <param name="e"></param>
141         private void imageStack_TouchDown(object sender, TouchEventArgs e)
142         {
143             _startTouchPoint = e.GetTouchPoint(App.Current.MainWindow);
144             e.Handled = true;
145         }
146         /// <summary>
147         /// 长按并移动
148         /// </summary>
149         /// <param name="sender"></param>
150         /// <param name="e"></param>
151         private void imageStack_TouchMove(object sender, TouchEventArgs e)
152         {
153             TouchPoint tempPoint = e.GetTouchPoint(App.Current.MainWindow);
154             //得到前后两点X的平移距离
155             double distance = _startTouchPoint.Position.X - tempPoint.Position.X;
156             //计算相偏移量
157             Double offset = this._width * ActiveItemIndex + distance;
158             //释放属性，使其可以被设置
159             this.imageStack.BeginAnimation(Canvas.LeftProperty, null);
160 
161             Canvas.SetLeft(this.imageStack, -offset);
162             e.Handled = true;
163         }
164         /// <summary>
165         /// 触摸释放
166         /// </summary>
167         /// <param name="sender"></param>
168         /// <param name="e"></param>
169         private void imageStack_TouchUp(object sender, TouchEventArgs e)
170         {
171             _endTouchPoint = e.GetTouchPoint(App.Current.MainWindow);
172             double x_offset = _startTouchPoint.Position.X - _endTouchPoint.Position.X;
173             //当X轴偏移量向右大于100且当前Index小于页总数
174             if (x_offset > 100 && ActiveItemIndex < TotalItemsCount - 1)
175             {
176                 ++ActiveItemIndex;
177             }
178             //当X轴偏移量向左偏移量大于100且当前Index大于1
179             else if (x_offset < -100 && ActiveItemIndex > 0)
180             {
181                 --ActiveItemIndex;
182             }
183             else
184             {
185                 MoveAnimation(ActiveItemIndex);
186             }
187             e.Handled = true;
188         }
189         #endregion
190 
191         #region 动画
192         /// <summary>
193         /// 动画
194         /// </summary>
195         /// <param name="index"></param>
196         private void MoveAnimation(Int32 index)
197         {
198             DoubleAnimation da = new DoubleAnimation();
199             da.Duration = new Duration(TimeSpan.FromMilliseconds(300));
200             da.DecelerationRatio = 0.2;
201             da.AccelerationRatio = 0.2;
202             da.From = Canvas.GetLeft(this.imageStack);
203             da.To = -(index * _width);
204             this.imageStack.BeginAnimation(Canvas.LeftProperty, da);
205         }
206         #endregion
207     }
208 }

1     <Grid>
2         <control:IndicatorControl ItemsListSource="{Binding ImageList}" TotalItemsCount="{Binding ImageList.Count}"></control:IndicatorControl>
3     </Grid>