1. 需求

 

也是之前写的控件了，模仿NetFlix的河的设计。

大体要求如下：

1. 横向的ListView

2. 左右按钮，可以左右移动河卡片，左右的滚动条不可见

3. 左右按钮仅在鼠标Hover事件中可见

大家可以看下NetFlix uwp版，国内爱奇艺也是这样设计的，芒果TV之前是，但是新版去掉了这种风格。

 

 

其实我也是一个菜鸟，一开始纠结怎么写这个控件，怎么传递ItemsSource，而且还在SO上发起了提问

 Pieter Nijs 

写的文章https://blog.pieeatingninjas.be/2016/01/17/custom-uwp-control-step-through-listview/

大神的需求和我的类似，见图

 

 

于是膜拜文章，写下了适合我自己的控件见图：

 

 

2. 实现

 

👌好了，下面开始撸代码，先新建一个用户控件，名字叫 StepThroughListView ，看看Xaml的布局，

<Grid>        <ListView              x:Name="ListViewRiver"             HorizontalAlignment="Stretch"             SingleSelectionFollowsFocus="True"             ScrollViewer.VerticalScrollBarVisibility="Hidden"             ScrollViewer.HorizontalScrollBarVisibility="Hidden"             ScrollViewer.VerticalScrollMode="Disabled"             ScrollViewer.HorizontalScrollMode="Disabled"            >                        <ListView.ItemsPanel>                <ItemsPanelTemplate>                    <VirtualizingStackPanel Orientation="Horizontal"/>                </ItemsPanelTemplate>            </ListView.ItemsPanel>                    </ListView>        <Button x:Name="ButtonLeft"/>        <Button x:Name="ButtonRight" HorizontalAlignment="Right"/>    </Grid>

 

这样大体创建了一个这样的横向的ListView，橙色矩形为ListView，灰色圆圈是左右按钮Button，蓝色是ListViewItem

按钮是默认垂直居中

 

 

然后我们需要给ListView赋值ItemsSource、SelectedItem、ItemTemplate，这些需要在C#代码中使用依赖属性来完成。

        public IEnumerable ItemsSource         {             get { return (IEnumerable)GetValue(ItemsSourceProperty); }             set { SetValue(ItemsSourceProperty, value); RaisePropertyChanged(); }         }          public static readonly DependencyProperty ItemsSourceProperty =