WPF自定义控件(教程含源码)-轮播控件、仿 layui Carousel 控件

lhyriver

已于 2022-11-22 16:53:29 修改

阅读量1.1k

点赞数

分类专栏： WPF自定义控件文章标签： wpf layui 前端

于 2022-11-18 10:25:47 首次发布

本文链接：https://blog.csdn.net/lhyriver/article/details/127916744

版权

WPF自定义控件专栏收录该内容

7 篇文章 6 订阅

订阅专栏

控件需求

制作一个轮播控件。要求包含左右翻页按钮、索引指示、索引点击跳转。

控件效果

rcarousel

控件基本元素

Button：控制左右滑动。

Button 由一个透明的 Ellispe 和描绘箭头的 Path 公共组成，这里直接重写 Button 的模板即可，xaml代码样式如下：

    <Style x:Key="carouselButton" TargetType="{x:Type Button}">
        <Setter Property="RenderTransformOrigin" Value=".5 .5" />
        <Setter Property="Width" Value="40" />
        <Setter Property="Height" Value="40" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid>
                        <Ellipse Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Fill="#33000000" x:Name="root" />
                        <Path Data="M25,10 L13,20 L25,30" StrokeThickness="2" Stroke="White" />
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter TargetName="root" Property="Fill" Value="#5a000000" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

RWrapPanel：放置内容项目，实现平滑滚动。

参考上一篇文章：实现可以平滑滚动的Panel 控件

RCarouselIndicator：索引显示，索引跳转。

RCarouselIndicator 继承 ListView，新增 Count 属性，通过Count 属性控制圆点个数。使用时间 SelectedIndex 与 RCarousel 的 Index 进行双向绑定。

RCarouselIndicatorSelected 通过传入 SelectedIndex 和 Value（存放在Tag内）控制控件是否选中。

RCarouselIndicator的 xaml 代码和 c# 代码如下：

    <local:RCarouselIndicatorSelected x:Key="RCarouselIndicatorSelected" />

    <Style x:Key="indexPoint" TargetType="Ellipse">
        <Setter Property="Fill" Value="#7dffffff" />
        <Setter Property="Width" Value="14" />
        <Setter Property="Height" Value="14" />
        <Setter Property="Margin" Value="3" />
    </Style>

<Style TargetType="local:RCarouselIndicator">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:RCarouselIndicator">
                    <Border SnapsToDevicePixels="True" Background="#33000000"  VerticalAlignment="Bottom" Margin="0 0 0 15" HorizontalAlignment="Center" MinWidth="14" CornerRadius="13">
                        <WrapPanel VerticalAlignment="Center" Margin="3" IsItemsHost="True" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemContainerStyle">
            <Setter.Value>
                <Style TargetType="ListViewItem">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="ListViewItem">
                                <ContentPresenter />
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Grid>
                        <Ellipse Style="{StaticResource indexPoint}" Tag="{Binding}" Cursor="Hand">
                            <Ellipse.Fill>
                                <MultiBinding Converter="{StaticResource RCarouselIndicatorSelected}">
                                    <Binding Path="SelectedIndex" RelativeSource="{RelativeSource Mode=FindAncestor,AncestorType=local:RCarouselIndicator}" />
                                    <Binding Path="Tag" RelativeSource="{RelativeSource Mode=Self}" />
                                </MultiBinding>
                            </Ellipse.Fill>
                        </Ellipse>
                    </Grid>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    public partial class RCarouselIndicator: ListView {
        static RCarouselIndicator() {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(RCarouselIndicator), new FrameworkPropertyMetadata(typeof(RCarouselIndicator)));
        }

        public static readonly DependencyProperty CountProperty =
            DependencyProperty.Register("Count", typeof(int), typeof(RCarouselIndicator), new FrameworkPropertyMetadata(1, CountChanged));

        static void CountChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) {
            if (d is RCarouselIndicator control) {
                var count = Convert.ToInt32(e.NewValue);
                control.Items.Clear();
                Enumerable.Range(0, count).ToList().ForEach(t => control.Items.Add(t));
            }
        }

        public int Count {
            get => (int)GetValue(CountProperty);
            set => SetValue(CountProperty, value);
        }
    }

    public class RCarouselIndicatorSelected : IMultiValueConverter {
        public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture) {
            if (values.Length == 2 && values[0] is int v1 && values[1] is int v2 && v1 == v2) {
                return Brushes.White;
            } else {
                return new SolidColorBrush(Color.FromArgb(0x7d, 0xff, 0xff, 0xff));
            }
        }

        public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture) {
            throw new NotImplementedException();
        }
    }

将基本元素组合

RCarousel 的 xaml代码

    <Style x:Key="RCarousel_Item" TargetType="ListBoxItem">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <ContentPresenter />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <ControlTemplate x:Key="RCarousel_Template" TargetType="local:RCarousel">
        <Border SnapsToDevicePixels="True" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
            <Grid>
                <ScrollViewer  VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Hidden" CanContentScroll="True">
                    <local:RWrapPanel IsItemsHost="True" x:Name="panel" />
                </ScrollViewer>

                <local:RCarouselIndicator Count="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Items.Count, Mode=OneWay}"
                                          SelectedIndex="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Index, Mode=TwoWay}" />

                <Button Style="{StaticResource carouselButton}" HorizontalAlignment="Left" Margin="15 0 0 0" Visibility="Collapsed" x:Name="btn1"/>
                <Button Style="{StaticResource carouselButton}" HorizontalAlignment="Right" Margin="0 0 15 0" Visibility="Collapsed" x:Name="btn2">
                    <Button.RenderTransform>
                        <RotateTransform Angle="180" />
                    </Button.RenderTransform>
                </Button>
            </Grid>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="true" >
                <Setter TargetName="btn1" Property="Visibility" Value="Visible" />
                <Setter TargetName="btn2" Property="Visibility" Value="Visible" />
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <Style TargetType="local:RCarousel">
        <Setter Property="Template" Value="{StaticResource RCarousel_Template}" />
        <Setter Property="ItemContainerStyle" Value="{StaticResource RCarousel_Item}" />
    </Style>

RCarousel 的 c# 代码

    public partial class RCarousel: ListBox {
        RWrapPanel panel;

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

        public static readonly DependencyProperty IndexProperty =
            DependencyProperty.Register("Index", typeof(int), typeof(RCarousel), new FrameworkPropertyMetadata(0, IndexChanged));

        static void IndexChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) {
            if (d is RCarousel control) {
                var index = Convert.ToInt32(e.NewValue);
                control.panel.SetHorizontalOffset(index * control.ActualWidth);
            }
        }

        public int Index {
            get => (int)GetValue(IndexProperty);
            set => SetValue(IndexProperty, value);
        }

        public override void OnApplyTemplate() {
            base.OnApplyTemplate();

            panel = GetTemplateChild("panel") as RWrapPanel;

            Button btn1 = GetTemplateChild("btn1") as Button;
            Button btn2 = GetTemplateChild("btn2") as Button;

            btn1.Click += Btn1_Click;
            btn2.Click += Btn2_Click;

            var count = this.Items.Count;
        }

        private void Btn1_Click(object sender, RoutedEventArgs e) {
            panel.PageLeft();
            if (Index > 0) Index--;
        }

        private void Btn2_Click(object sender, RoutedEventArgs e) {
            panel.PageRight();
            if (Index < Items.Count - 1) Index++;
        }
    }

在xaml 内调用该控件

<UserControl x:Class="WPFCustomControl.Pages.RCarouselDemo"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:WPFCustomControl.Pages"
             xmlns:cr="clr-namespace:WPFCustomControl.Controls"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <cr:RCarousel x:Name="root" >
            <Border Background="#009688" Width="{Binding ElementName=root, Path=ActualWidth}"  Height="{Binding ElementName=root, Path=ActualHeight}">
                <TextBlock Text="项目1" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center" />
            </Border>
            <Border Background="#5FB878" Width="{Binding ElementName=root, Path=ActualWidth}"  Height="{Binding ElementName=root, Path=ActualHeight}">
                <TextBlock Text="项目2" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center" />
            </Border>
            <Border Background="#009688" Width="{Binding ElementName=root, Path=ActualWidth}"  Height="{Binding ElementName=root, Path=ActualHeight}">
                <TextBlock Text="项目3" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center" />
            </Border>
            <Border Background="#5FB878" Width="{Binding ElementName=root, Path=ActualWidth}"  Height="{Binding ElementName=root, Path=ActualHeight}">
                <TextBlock Text="项目4" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center" />
            </Border>
        </cr:RCarousel>
    </Grid>
</UserControl>