wpf 自定义轮播图组件

轮播图组件代码：

[Localizability(LocalizationCategory.None, Readability = Readability.Unreadable)]
[TemplatePart(Name = "Part_Grid",Type= typeof(Grid))]
[TemplatePart(Name = "Part_OldContentControl", Type = typeof(ContentControl))]
[TemplatePart(Name = "Part_NewContentControl", Type = typeof(ContentControl))]
[TemplatePart(Name = "Part_PreButton", Type = typeof(Button))]
[TemplatePart(Name = "Part_NextButton", Type = typeof(Button))]
[TemplatePart(Name = "Part_StackPanel", Type = typeof(StackPanel))]
public class Carousel:ItemsControl
{
#region Private Fields

private const string GridTemplateName = "Part_Grid";
private const string OldContentControlTemplateName = "Part_OldContentControl";
private const string NewContentControlTemplateName = "Part_NewContentControl";
private const string PreButtonTemplateName = "Part_PreButton";
private const string NextButtonTemplateName = "Part_NextButton";
private const string StackPanelTemplateName = "Part_StackPanel";

private DispatcherTimer _timer;
private Grid _grid;
private ContentControl _oldContentControl;
private ContentControl _newContentControl;
private Button _prevButton;
private Button _nextButton;
private StackPanel _stackPanel;
private int _pageIndex = -1;
private bool _templateLoaded;

#endregion
#region Public Properties

public TimeSpan Interval
{
get => (TimeSpan)GetValue(IntervalProperty);
set => SetValue(IntervalProperty, value);
}

public static readonly DependencyProperty IntervalProperty =
DependencyProperty.Register(nameof(Interval), typeof(TimeSpan), typeof(Carousel), new PropertyMetadata(TimeSpan.FromSeconds(3)));
public bool AutoPlay
{
get => (bool)GetValue(AutoPlayProperty);
set => SetValue(AutoPlayProperty, value);
}

public static readonly DependencyProperty AutoPlayProperty =
DependencyProperty.Register(nameof(AutoPlay), typeof(bool), typeof(Carousel), new PropertyMetadata(false,
(o, e) =>
{
if (o is Carousel d)
{
d.TimerSwitch((bool)e.NewValue);
}
}));

public Style PageButtonStyle
{
get => (Style)GetValue(PageButtonStyleProperty);
set => SetValue(PageButtonStyleProperty, value);
}

public static readonly DependencyProperty PageButtonStyleProperty =
DependencyProperty.Register(nameof(PageButtonStyle), typeof(Style), typeof(Carousel), new PropertyMetadata(default));

public int PageIndex
{
get => _pageIndex;
set
{
if(Items.Count==0)
return;

if(_pageIndex==value)
return;

if (value < 0)
_pageIndex = Items.Count - 1;
else if (value >= Items.Count)
_pageIndex = 0;
else
_pageIndex = value;

SwitchPageButton(_pageIndex);
}
}

#endregion

#region Events

public event EventHandler PreButtonClick;
public event EventHandler NextButtonClick;
public event EventHandler PageButtonClick;

#endregion

#region Constructor

static Carousel()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(Carousel),new FrameworkPropertyMetadata(typeof(Carousel)));
}

public Carousel()
{
this.Loaded += (d, e) => SwitchPageButton(-1);
}

#endregion

#region Override Methods

public override void OnApplyTemplate()
{
_grid?.RemoveHandler(ButtonBase.ClickEvent, new RoutedEventHandler(ButtonBaseClick));
_prevButton?.RemoveHandler(ButtonBase.ClickEvent,new RoutedEventHandler(ButtonPreClick));
_nextButton?.RemoveHandler(ButtonBase.ClickEvent, new RoutedEventHandler(ButtonNextClick));

base.OnApplyTemplate();

_templateLoaded = false;
_grid = GetTemplateChild(GridTemplateName) as Grid;
_prevButton = GetTemplateChild(PreButtonTemplateName) as Button;
_nextButton=GetTemplateChild(NextButtonTemplateName) as Button;
_stackPanel=GetTemplateChild(StackPanelTemplateName) as StackPanel;
_oldContentControl = GetTemplateChild(OldContentControlTemplateName) as ContentControl;
_newContentControl=GetTemplateChild(NewContentControlTemplateName) as ContentControl;
_prevButton?.AddHandler(ButtonBase.ClickEvent, new RoutedEventHandler(ButtonPreClick));
_nextButton?.AddHandler(ButtonBase.ClickEvent, new RoutedEventHandler(ButtonNextClick));
_grid?.AddHandler(ButtonBase.ClickEvent, new RoutedEventHandler(ButtonBaseClick));

_templateLoaded = true;
}

#endregion
#region Private Methods

private void TimerSwitch(bool isAutoPlay)
{
if (_timer != null)
{
_timer.Tick -= _timer_Tick;
_timer.Stop();
_timer = null;
}

if(!isAutoPlay)
return;

_timer = new DispatcherTimer(){ Interval = Interval};
_timer.Tick += _timer_Tick; ;
_timer.Start();
}

private void _timer_Tick(object sender, EventArgs e)
{
if(_templateLoaded)
PageIndex++;
}

private void SwitchPageButton(int index)
{
_stackPanel.Children.Clear();

if(Items.Count==0)
return;

for (int i = 0; i < Items.Count; i++)
{
_stackPanel.Children.Add(new RadioButton()
{
Style = PageButtonStyle
});
}

if (index<0)
index = Items.Count-1;

if (index > Items.Count - 1)
index = 0;

if (_stackPanel.Children[index] is RadioButton btn)
{
btn.IsChecked = true;
btn.RaiseEvent(new RoutedEventArgs(ButtonBase.ClickEvent, btn));
SwitchPage();
}
}

private void SwitchPage()
{
if(Items.Count==0)
return;

if (Items[PageIndex] is FrameworkElement currentElement)
{
var oldContent = _newContentControl.Content;
_newContentControl.Content = null;

currentElement.Loaded += async (s, e) =>
{
var element = s as FrameworkElement;
await element.SlideAndFadeInAsync(AnimationSlideInDirection.Right, true,1.0f);
};

currentElement.Unloaded += async (s, e) =>
{
var element = s as FrameworkElement;
await element.SlideAndFadeOutAsync(AnimationSlideInDirection.Left,1.0f);
};
_oldContentControl.Content = oldContent;

Task.Delay((int)(1 * 1000)).ContinueWith((t) =>
{
Application.Current.Dispatcher.Invoke(() => _oldContentControl.Content = null);
});
_newContentControl.Content = currentElement;
}
}

private void ButtonBaseClick(object sender, RoutedEventArgs e)
{
var _selectedButton = e.OriginalSource as RadioButton;

var index = _stackPanel.Children.IndexOf(_selectedButton);
if (index != -1)
{
PageIndex = index;
}

PageButtonClick?.Invoke(sender, e);
}
private void ButtonPreClick(object sender, RoutedEventArgs e)
{
PageIndex--;
PreButtonClick?.Invoke(sender,e);
}

private void ButtonNextClick(object sender, RoutedEventArgs e)
{
PageIndex++;
NextButtonClick?.Invoke(sender,e);
}

#endregion
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
style

<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Part_PreButton" Property="Visibility" Value="Visible" />
<Setter TargetName="Part_NextButton" Property="Visibility" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
使用

Border Grid.Row="0">
<controls:Carousel
x:Name="myCarousel"
AutoPlay="True"
NextButtonClick="MyCarousel_OnNextButtonClick"
PreButtonClick="MyCarousel_OnPreButtonClick">
<controls:Carousel.Items>
<Image Source="/AutoPOS;component/Asset/Images/1.jpg" Stretch="Fill" />
<Image Source="/AutoPOS;component/Asset/Images/2.jpeg" Stretch="Fill" />
<Image Source="/AutoPOS;component/Asset/Images/3.png" Stretch="Fill" />
<MediaElement
LoadedBehavior="Play"
MediaEnded="MediaElement_OnMediaEnded"
MediaOpened="MediaElement_OnMediaOpened"
Source="./Asset/Vedio/单依纯-永不失联的爱.mkv"
Stretch="Fill" />
</controls:Carousel.Items>
</controls:Carousel>
</Border>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
后台代码:

public partial class HomeView : UserControl
{
public HomeView()
{
InitializeComponent();
}

private void MediaElement_OnMediaOpened(object sender, RoutedEventArgs e)
{
myCarousel.AutoPlay=false;
}

private void MediaElement_OnMediaEnded(object sender, RoutedEventArgs e)
{
myCarousel.AutoPlay=true;
}

private void MyCarousel_OnPreButtonClick(object sender, EventArgs e)
{
myCarousel.AutoPlay = true;
}

private void MyCarousel_OnNextButtonClick(object sender, EventArgs e)
{
myCarousel.AutoPlay = true;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
效果图:

注意的事项：
视频资源请指定内容，较新复制选项
可自实现sizechanged，visiblechanged实现变化逻辑
timer请先解除事件绑定和停止计时器，再置为null
carousel组件留出了许多接口，比如在播放视频时希望视频播放完成再去自动播放轮播图。可以注册事件处理。还留出相应的事件如下

public event EventHandler PreButtonClick;
public event EventHandler NextButtonClick;
public event EventHandler PageButtonClick;
1
2
3
也可以使用mvvm绑定到items，autoplay等属性
————————————————
版权声明：本文为CSDN博主「pw8992134」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/pw8992134/article/details/129622176

wpf 自定义轮播图组件的更多相关文章

taro 自定义轮播图组件
1.代码 components/MySwiper/index.js /** * 轮播图组件 */ import Taro, { Component } from '@tarojs/taro'; imp ...
vue自定义轮播图组件 swiper
1.banner 组件 components/Banner.vue  <template> <div class="swiper- ...
原生JS面向对象思想封装轮播图组件
原生JS面向对象思想封装轮播图组件在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...
reactjs-swiper react轮播图组件基于swiper
react轮播图组件基于swiper demo地址:http://reactjs-ui.github.io/reactjs-swiper/simple.html 1. 下载安装 npm install ...
【自定义轮播图】微信小程序自定义轮播图无缝滚动
先试试效果,可以通过设置参数调整样式微信小程序中的轮播图可以直接使用swiper组件,如下: <swiper indicator-dots="{{indicatorDots}}&qu ...
03 uni-app框架学习：轮播图组件的使用
1.轮播图组件的使用参照官方文档 2.在页面上加入这个组件 3.在页面中引去css样式并编写样式 ps:upx单位是什么简单来说就相当于小程序中的rpx 是一个自适应的单位会根据屏幕宽度自动 ...
Vue2 轮播图组件 slide组件
Vue2原生始轮播图组件,支持宽度自适应.高度设置.轮播时间设置.左右箭头按钮控制,圆点按钮切换,以及箭头.圆点按钮是否显示. <v-carousel :slideData="slid ...
vue移动音乐app开发学习（三）：轮播图组件的开发
本系列文章是为了记录学习中的知识点,便于后期自己观看.如果有需要的同学请登录慕课网,找到Vue 2.0 高级实战-开发移动端音乐WebApp进行观看,传送门. 完成后的页面状态以及项目结构如下: 一: ...
使用原生js将轮播图组件化
代码地址如下:http://www.demodashi.com/demo/11316.html 这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explor ...
bootstrap轮播图组件
一.轮播图组件模板(官方文档) <div id="carousel-example-generic" class="carousel slide" dat ...

随机推荐

HarmonyOS开发案例分享：万能卡片也能用来玩游戏
一.前言作为一名开发爱好者,从大了讲,我学习并进行HarmonyOS相关开发是为了能为鸿蒙生态建设尽一份绵薄之力,从小了讲,就是为了自己的兴趣.而万能卡片是一个让我非常感兴趣的东西. 很多时候我跟别 ...
报名开启 | HarmonyOS第一课“营”在暑期系列直播
<HarmonyOS第一课>2023年再次启航! 特邀HarmonyOS布道师云集华为开发者联盟直播间聚焦HarmonyOS 4版本新特性邀您一同学习赢好礼! 你准备好了吗? ↓↓↓预 ...
docker 应用篇————mysql容器[十二]
前言简单介绍一下mysql容器. 正文这里简单介绍一下mysql的容器. hub.docker.io给了我们一个启动的示例. docker run --name some-mysql -e MYS ...
初探Mysql架构和InnoDB存储引擎
前言 mysql相信大家都不陌生了,分享之前我们先思考几个面试题: 1.undo log和redo log了解过吗?它们的作⽤分别是什么? 2.redo log是如何保证事务不丢失的? 3.mysql ...
【笔记】go语言--切片的操作
go语言--切片的操作接上篇切片的概念开始 //Slice添加元素 arr := [...]int{0,1,2,3,4,5,6,7} s1 := arr[2:6] s2 := s1[3:5]//[5 ...
HL7消息结构
HL7消息用于在不同的医疗保健系统之间传输电子数据,每个消息发送相关特定事件(例如患者入院)的信息.HL7消息采用人类可读格式,本节介绍HL7消息的内容以及HL7消息的组织方式. HL7消息由一个或多 ...
剑指offer21(Java)-调整数组顺序使奇数位于偶数前面（简单）
题目: 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有奇数在数组的前半部分,所有偶数在数组的后半部分. 示例: 输入:nums = [1,2,3,4]输出:[1,3,2,4] 注:[ ...
MaxCompute管家详解--管家助力，轻松玩转MaxCompute
精彩视频回顾请点击:MaxCompute管家详解以下是直播内容精华整理,主要包括以下四个方面:1.背景速览:2.功能介绍:3.案例讲解:4.新功能预告. 一.背景速览 MaxCompute(原ODPS ...
好代码实践：基于Redis的轻量级分布式均衡消费队列
简介: 好代码,给人第一个印象的感觉,就像一篇好文章一样,读起来朗朗上口.不同的文章有不同的风格体裁,不同的代码也有不同的编程风格要求.Python有严格的缩进,像诗歌一样工整对仗:C语言面向过程像散 ...
[FAQ] golang-migrate/migrate error: default addr for network '127.0.0.1:3306' unknown
按照项目github文档上所示,在使用 mysql 时你可能会这样写: $ migrate -path db/migrations -database mysql://root:123456@127. ...

wpf 自定义轮播图组件

wpf 自定义轮播图组件的更多相关文章

随机推荐

热门专题