你听我说-HandyControl手动控制CoverFlow翻页

简介: 你听我说-HandyControl手动控制CoverFlow翻页

6fca9172dd7708ae894ca0b582736fef.png

问题场景

使用HandyControl中[CoverFlow封面流图]https://handyorg.gitee.io/handycontrol/extend_controls/coverFlow/,自动轮播能够点击翻转,手动控制翻转需要如何去处理,请听笔者一步步讲,原始效果如下:

xaml页面:

<Grid>
    <hc:CoverFlow x:Name="CoverFlowMain" Margin="32" Width="500" Height="300"/>
</Grid>

xxx.cs代码:

public MainWindow()
{
    InitializeComponent();
    Init();
}
private void Init()
{
    CoverFlowMain.AddRange(new[]
    {
        new Uri("pack://application:,,,/YonLink.Tool.Authorize;Component/Resources/Imgs/1.png"),
        new Uri("pack://application:,,,/YonLink.Tool.Authorize;Component/Resources/Imgs/2.png"),
        new Uri("pack://application:,,,/YonLink.Tool.Authorize;Component/Resources/Imgs/3.png"),
        new Uri("pack://application:,,,/YonLink.Tool.Authorize;Component/Resources/Imgs/4.png"),
        new Uri("pack://application:,,,/YonLink.Tool.Authorize;Component/Resources/Imgs/5.png"),
        new Uri("pack://application:,,,/YonLink.Tool.Authorize;Component/Resources/Imgs/6.png")
    });
}

解决方案

通过查看Coverflow源码发现,控件本身,并有提供可以直接使用的函数或者方法去手动控制翻转,如果需要手动控制的话,需要直接使用控件的附加属性,进行人为给依赖属性PageIndexProperty设置值,以下为对应的Coverflow源码:

//
// 摘要:
//     页码
public int PageIndex
{
    get
            {
                return (int)GetValue(PageIndexProperty);
            }
    internal set
    {
        SetValue(PageIndexProperty, value);
    }
}

xaml中添加,两个按钮,一个用于控制上一页,一个控制下一页:

<Grid>
    <hc:CoverFlow x:Name="CoverFlowMain" Margin="32" Width="500" Height="300"/>
    <UniformGrid VerticalAlignment="Bottom" Rows="1">
        <Button x:Name="btn_pre" Content="上一个" Click="btn_pre_Click"></Button>
        <Button x:Name="btn_next" Content="下一个" Click="btn_next_Click"></Button>
    </UniformGrid>
</Grid>

xxx.cs事件内容如下:

private void btn_pre_Click(object sender, RoutedEventArgs e)
{
    // 上一页
    int num = CoverFlowMain.PageIndex - 1;
    //设置对应的依赖属性`PageIndexProperty`,用于通知页面变更
    CoverFlowMain.SetValue(CoverFlow.PageIndexProperty, num);
}
private void btn_next_Click(object sender, RoutedEventArgs e)
{
    // 下一页
    int num = CoverFlowMain.PageIndex + 1;
    //设置对应的依赖属性`PageIndexProperty`,用于通知页面变更
    CoverFlowMain.SetValue(CoverFlow.PageIndexProperty, num);
}

最终效果如下:


相关文章
|
2月前
【实现手机端上滑滚动加载列表】判断页面是否滚动到底部或者指定元素位置
【实现手机端上滑滚动加载列表】判断页面是否滚动到底部或者指定元素位置
|
2月前
|
移动开发 前端开发
H5长页面禁止垂直滚动
H5长页面禁止垂直滚动
38 0
|
2月前
|
小程序 JavaScript
小程序自定义弹窗禁止底部内容滚动(滚动穿透问题)
小程序自定义弹窗禁止底部内容滚动(滚动穿透问题)
296 0
|
2月前
|
测试技术
【sgTransfer】自定义组件:带有翻页、页码、分页器的穿梭框组件,支持大批量数据的穿梭显示。
【sgTransfer】自定义组件:带有翻页、页码、分页器的穿梭框组件,支持大批量数据的穿梭显示。
|
10月前
数显仪表盘显示“速度、方向、计数器”的跑马灯
数显仪表盘显示“速度、方向、计数器”的跑马灯
31 0
|
11月前
6.3.2 可翻页检视
6.3.2 可翻页检视
29 0
|
12月前
控制歌词滚动案例
控制歌词滚动案例
62 0
LabVIEW显示控件中内容过长设置自动滚动条
本篇博文分享程序设计时一个细节小技巧,在LabVIEW显示控件中内容过长设置自动滚动条。
|
人工智能 JavaScript 前端开发
小程序实现页面多级来回切换支持滑动和点击操作
想留住粉丝,就必须安排演示: [审核中…]然后开摆!!!!首先通过swiper创建一个简单的多tab页面 通过触发pagechange1方法中的事件对currentIndex来进行赋值,又通过currentIndex的改变使前端wxml对应更改,这个部分对滑动和点击的操作都一样,无非就是使currentIndex对应到各自的位置,通过数字来决定位置 这个部分完整代码如下: wxml wxss js 上一步完成后,下级页面再加一个滑动页面,当内切换结束后,在做切换就是父级的切换操作 在“内容1”的vie
250 0
小程序实现页面多级来回切换支持滑动和点击操作
|
NoSQL 大数据 MongoDB
分页控制|学习笔记
快速学习分页控制
53 0