add CoverView

HandyControl/Controls/Base/SimpleItemsControl.cs

@@ -0,0 +1,132 @@
+using System.Collections.ObjectModel;
+using System.Collections.Specialized;
+using System.ComponentModel;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Markup;
+
+namespace HandyControl.Controls
+{
+    [DefaultEvent("OnItemsChanged")]
+    [DefaultProperty("Items")]
+    [ContentProperty("Items")]
+    [TemplatePart(Name = ElementPanel, Type = typeof(Panel))]
+    public class SimpleItemsControl : Control
+    {
+        private const string ElementPanel = "PART_Panel";
+
+        public static readonly DependencyProperty ItemTemplateProperty = DependencyProperty.Register(
+            "ItemTemplate", typeof(DataTemplate), typeof(SimpleItemsControl),
+            new FrameworkPropertyMetadata(default(DataTemplate), OnItemTemplateChanged));
+
+        public static readonly DependencyProperty ItemContainerStyleProperty = DependencyProperty.Register(
+            "ItemContainerStyle", typeof(Style), typeof(SimpleItemsControl),
+            new PropertyMetadata(default(Style), OnItemContainerStyleChanged));
+
+        public SimpleItemsControl()
+        {
+            var items = new ObservableCollection<object>();
+            items.CollectionChanged += OnItemsCollectionChanged;
+            Items = items;
+        }
+
+        [Bindable(true)]
+        [Category("Content")]
+        public Style ItemContainerStyle
+        {
+            get => (Style) GetValue(ItemContainerStyleProperty);
+            set => SetValue(ItemContainerStyleProperty, value);
+        }
+
+        [Bindable(true)]
+        public DataTemplate ItemTemplate
+        {
+            get => (DataTemplate) GetValue(ItemTemplateProperty);
+            set => SetValue(ItemTemplateProperty, value);
+        }
+
+        [DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]
+        [Bindable(true)]
+        public Collection<object> Items { get; }
+
+        internal Panel ItemsHost { get; set; }
+
+        public override void OnApplyTemplate()
+        {
+            ItemsHost?.Children.Clear();
+
+            base.OnApplyTemplate();
+
+            ItemsHost = GetTemplateChild(ElementPanel) as Panel;
+            Refresh();
+        }
+
+        private void OnItemsCollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
+        {
+            Refresh();
+            UpdateItems();
+        }
+
+        protected virtual DependencyObject GetContainerForItemOverride() => new ContentPresenter();
+
+        protected virtual bool IsItemItsOwnContainerOverride(object item) => item is ContentPresenter;
+
+        protected virtual void PrepareContainerForItemOverride(DependencyObject element, object item)
+        {
+            switch (element)
+            {
+                case ContentControl contentControl:
+                    contentControl.Content = item;
+                    contentControl.ContentTemplate = ItemTemplate;
+                    break;
+                case ContentPresenter contentPresenter:
+                    contentPresenter.Content = item;
+                    contentPresenter.ContentTemplate = ItemTemplate;
+                    break;
+            }
+        }
+
+        private static void OnItemTemplateChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            var target = d as SimpleItemsControl;
+            target?.Refresh();
+        }
+
+        private static void OnItemContainerStyleChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            var target = d as SimpleItemsControl;
+            target?.Refresh();
+        }
+
+        protected virtual void Refresh()
+        {
+            if (ItemsHost == null) return;
+
+            ItemsHost.Children.Clear();
+            foreach (var item in Items)
+            {
+                DependencyObject container;
+                if (IsItemItsOwnContainerOverride(item))
+                {
+                    container = item as DependencyObject;
+                }
+                else
+                {
+                    container = GetContainerForItemOverride();
+                    PrepareContainerForItemOverride(container, item);
+                }
+
+                if (container is FrameworkElement element)
+                {
+                    element.Style = ItemContainerStyle;
+                    ItemsHost.Children.Add(element);
+                }
+            }
+        }
+
+        protected virtual void UpdateItems()
+        {
+
+        }
+    }
+}

HandyControl/Controls/CoverView/CoverView.cs

@@ -1,9 +1,219 @@
-using System.Windows.Controls;
+using System.Windows;
+using System.Windows.Data;
+using HandyControl.Data;
 
 namespace HandyControl.Controls
 {
-    public class CoverView : ItemsControl
+    public class CoverView : SimpleItemsControl
     {
-        
+        private readonly CoverViewContent _viewContent;
+
+        private CoverViewItem _selectedItem;
+
+        public CoverView()
+        {
+            _viewContent = new CoverViewContent {ContentHeight = ItemContentHeight};
+
+            AddHandler(CoverViewItem.SelectedEvent, new RoutedEventHandler(CoverViewItem_OnSelected));
+            _viewContent.SetBinding(WidthProperty, new Binding(ActualWidthProperty.Name) { Source = this });
+        }
+
+        private void CoverViewItem_OnSelected(object sender, RoutedEventArgs e)
+        {
+            if (e.OriginalSource is CoverViewItem item)
+            {
+                if (_selectedItem == null)
+                {
+                    item.IsSelected = true;
+                    _selectedItem = item;
+                    if (_viewContent != null)
+                    {
+                        _viewContent.Content = item.Content;
+                        UpdateCoverViewContent(true);
+                    }
+
+                    return;
+                }
+
+                if(!Equals(_selectedItem, item))
+                {
+                    _selectedItem.IsSelected = false;
+                    item.IsSelected = true;
+                    _selectedItem = item;
+                    if (_viewContent != null)
+                    {
+                        _viewContent.Content = item.Content;
+                        UpdateCoverViewContent(true);
+                    }
+
+                    return;
+                }
+
+                if (_viewContent != null)
+                {
+                    _viewContent.Content = null;
+                    UpdateCoverViewContent(false);
+                }
+                _selectedItem.IsSelected = false;
+                _selectedItem = null;
+            }
+        }
+
+        public override void OnApplyTemplate()
+        {
+            base.OnApplyTemplate();
+
+            if (_viewContent.Style == null)
+            {
+                _viewContent.Style = CoverViewContentStyle;
+            }
+
+            if (_selectedItem != null)
+            {
+                UpdateCoverViewContent(_selectedItem != null);
+            }
+        }
+
+        protected override DependencyObject GetContainerForItemOverride() => new CoverViewItem();
+
+        protected override bool IsItemItsOwnContainerOverride(object item) => item is CoverViewItem;
+
+        public static readonly DependencyProperty CoverViewContentStyleProperty = DependencyProperty.Register(
+            "CoverViewContentStyle", typeof(Style), typeof(CoverView), new PropertyMetadata(default(Style)));
+
+        public Style CoverViewContentStyle
+        {
+            get => (Style) GetValue(CoverViewContentStyleProperty);
+            set => SetValue(CoverViewContentStyleProperty, value);
+        }
+
+        public static readonly DependencyProperty ItemWidthProperty = DependencyProperty.Register(
+            "ItemWidth", typeof(double), typeof(CoverView), new PropertyMetadata(ValueBoxes.Double200Box));
+
+        public double ItemWidth
+        {
+            get => (double) GetValue(ItemWidthProperty);
+            set => SetValue(ItemWidthProperty, value);
+        }
+
+        public static readonly DependencyProperty ItemHeightProperty = DependencyProperty.Register(
+            "ItemHeight", typeof(double), typeof(CoverView), new PropertyMetadata(ValueBoxes.Double200Box));
+
+        public double ItemHeight
+        {
+            get => (double) GetValue(ItemHeightProperty);
+            set => SetValue(ItemHeightProperty, value);
+        }
+
+        public static readonly DependencyProperty ItemMarginProperty = DependencyProperty.Register(
+            "ItemMargin", typeof(Thickness), typeof(CoverView), new PropertyMetadata(default(Thickness)));
+
+        public Thickness ItemMargin
+        {
+            get => (Thickness) GetValue(ItemMarginProperty);
+            set => SetValue(ItemMarginProperty, value);
+        }
+
+        internal static readonly DependencyProperty GroupsProperty = DependencyProperty.Register(
+            "Groups", typeof(int), typeof(CoverView), new FrameworkPropertyMetadata(ValueBoxes.Int5Box, FrameworkPropertyMetadataOptions.AffectsMeasure, OnGroupsChanged), IsGroupsValid);
+
+        internal static void OnGroupsChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            if (d is CoverView ctl)
+            {
+                ctl.UpdateCoverViewContent(ctl._viewContent.IsOpen);
+            }
+        }
+
+        private static bool IsGroupsValid(object value)
+        {
+            var v = (int)value;
+            return v >= 1;
+        }
+
+        public int Groups
+        {
+            get => (int)GetValue(GroupsProperty);
+            set => SetValue(GroupsProperty, value);
+        }
+
+        public static readonly DependencyProperty ItemContentHeightProperty = DependencyProperty.Register(
+            "ItemContentHeight", typeof(double), typeof(CoverView), new PropertyMetadata(ValueBoxes.Double300Box));
+
+        public double ItemContentHeight
+        {
+            get => (double) GetValue(ItemContentHeightProperty);
+            set => SetValue(ItemContentHeightProperty, value);
+        }
+
+        protected override void OnRenderSizeChanged(SizeChangedInfo sizeInfo)
+        {
+            base.OnRenderSizeChanged(sizeInfo);
+
+            Groups = (int)(sizeInfo.NewSize.Width / (ItemWidth + ItemMargin.Left + ItemMargin.Right));
+        }
+
+        protected override void Refresh()
+        {
+            if (ItemsHost == null) return;
+
+            ItemsHost.Children.Clear();
+            var index = 0;
+            foreach (var item in Items)
+            {
+                DependencyObject container;
+                if (IsItemItsOwnContainerOverride(item))
+                {
+                    container = item as DependencyObject;
+                }
+                else
+                {
+                    container = GetContainerForItemOverride();
+                    PrepareContainerForItemOverride(container, item);
+                }
+
+                if (container is CoverViewItem element)
+                {
+                    element.Index = index++;
+                    element.Style = ItemContainerStyle;
+                    ItemsHost.Children.Add(element);
+                }
+            }
+        }
+
+        /// <summary>
+        ///     更新内容视图
+        /// </summary>
+        private void UpdateCoverViewContent(bool isOpen)
+        {
+            if (_selectedItem == null) return;
+
+            ItemsHost.Children.Remove(_viewContent);
+
+            var total = Items.Count + 1;
+            var totalRow = total / Groups + (total % Groups > 0 ? 1 : 0);
+            if (total <= Groups)
+            {
+                ItemsHost.Children.Add(_viewContent);
+            }
+            else
+            {
+                var row = _selectedItem.Index / Groups + 1;
+                if (row == totalRow)
+                {
+                    ItemsHost.Children.Add(_viewContent);
+                }
+                else
+                {
+                    ItemsHost.Children.Insert(row * Groups, _viewContent);
+                }
+            }
+
+            _viewContent.UpdatePosition(_selectedItem.Index, Groups, _selectedItem.DesiredSize.Width);
+            if (_viewContent.CanSwitch)
+            {
+                _viewContent.IsOpen = isOpen;
+            }
+        }
     }
 }

HandyControl/Controls/CoverView/CoverViewContent.cs

@@ -0,0 +1,100 @@
+using System.Windows;
+using System.Windows.Controls;
+using HandyControl.Data;
+using HandyControl.Tools;
+using HandyControl.Tools.Extension;
+
+namespace HandyControl.Controls
+{
+    [TemplatePart(Name = ElementTriangle, Type = typeof(FrameworkElement))]
+    [TemplatePart(Name = ElementContent, Type = typeof(FrameworkElement))]
+    internal class CoverViewContent : ContentControl
+    {
+        private const string ElementTriangle = "PART_Triangle";
+
+        private const string ElementContent = "PART_Content";
+
+        private FrameworkElement _triangle;
+
+        private FrameworkElement _content;
+
+        internal bool WaitForUpdate { get; set; }
+
+        private int _index;
+
+        private int _groups;
+
+        private double _itemWidth;
+
+        private bool _isOpen;
+
+        internal bool CanSwitch { get; set; } = true;
+
+        internal bool IsOpen
+        {
+            get => _isOpen;
+            set
+            {
+                if (_isOpen == value) return;
+                _isOpen = value;
+                OpenSwitch(value);
+            }
+        }
+
+        public static readonly DependencyProperty ContentHeightProperty = DependencyProperty.Register(
+            "ContentHeight", typeof(double), typeof(CoverViewContent), new PropertyMetadata(ValueBoxes.Double300Box));
+
+        public double ContentHeight
+        {
+            get => (double) GetValue(ContentHeightProperty);
+            set => SetValue(ContentHeightProperty, value);
+        }
+
+        public override void OnApplyTemplate()
+        {
+            base.OnApplyTemplate();
+
+            _triangle = GetTemplateChild(ElementTriangle) as FrameworkElement;
+            _content = GetTemplateChild(ElementContent) as FrameworkElement;
+
+            if (WaitForUpdate)
+            {
+                _triangle.BeginAnimation(MarginProperty, AnimationHelper.CreateAnimation(new Thickness((_index % _groups + .5) * _itemWidth - _triangle.Width / 2, 0, 0, 0)));
+                OpenSwitch(_isOpen);
+                WaitForUpdate = false;
+            }
+        }
+
+        internal void UpdatePosition(int index, int groups, double itemWidth)
+        {
+            if (_triangle == null)
+            {
+                _index = index;
+                _groups = groups;
+                _itemWidth = itemWidth;
+                WaitForUpdate = true;
+                return;
+            }
+            _triangle.BeginAnimation(MarginProperty, AnimationHelper.CreateAnimation(new Thickness((index % groups + .5) * itemWidth - _triangle.Width / 2, 0, 0, 0)));
+        }
+
+        private void OpenSwitch(bool isOpen)
+        {
+            if (_content == null) return;
+            var animation = AnimationHelper.CreateAnimation(isOpen ? ContentHeight : 0);
+            _triangle.Show(false);
+            this.Show(true);
+            animation.Completed += (s, e) =>
+            {
+                CanSwitch = true;
+                this.Show(IsOpen);
+                if (IsOpen)
+                {
+                    _triangle.Show(true);
+                }
+            };
+            CanSwitch = false;
+            _content.BeginAnimation(HeightProperty, animation);
+        }
+    }
+}

HandyControl/Controls/CoverView/CoverViewItem.cs

@@ -1,9 +1,58 @@
-using System.Windows.Controls;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Input;
+using HandyControl.Data;
 
 namespace HandyControl.Controls
 {
     public class CoverViewItem : HeaderedContentControl
     {
-        
+        private bool _isMouseLeftButtonDown;
+
+        protected override void OnMouseLeave(MouseEventArgs e)
+        {
+            base.OnMouseLeave(e);
+
+            _isMouseLeftButtonDown = false;
+        }
+
+        protected override void OnMouseLeftButtonDown(MouseButtonEventArgs e)
+        {
+            base.OnMouseLeftButtonDown(e);
+
+            _isMouseLeftButtonDown = true;
+        }
+
+        protected override void OnMouseLeftButtonUp(MouseButtonEventArgs e)
+        {
+            base.OnMouseLeftButtonUp(e);
+
+            if (_isMouseLeftButtonDown)
+            {
+                RaiseEvent(new RoutedEventArgs(SelectedEvent, this));
+                _isMouseLeftButtonDown = false;
+            }
+        }
+
+        public static readonly DependencyProperty IsSelectedProperty = DependencyProperty.Register(
+            "IsSelected", typeof(bool), typeof(CoverViewItem), new PropertyMetadata(ValueBoxes.FalseBox));
+
+        public bool IsSelected
+        {
+            internal get => (bool) GetValue(IsSelectedProperty);
+            set => SetValue(IsSelectedProperty, value);
+        }
+
+        public static readonly RoutedEvent SelectedEvent =
+            EventManager.RegisterRoutedEvent("Selected", RoutingStrategy.Bubble,
+                typeof(RoutedEventHandler), typeof(CoverViewItem));
+
+        public event RoutedEventHandler Selected
+        {
+            add => AddHandler(SelectedEvent, value);
+            remove => RemoveHandler(SelectedEvent, value);
+        }
+
+        internal int Index { get; set; }
     }
 }

HandyControl/Controls/Rate/Rate.cs

@@ -1,6 +1,5 @@
 using System.Linq;
 using System.Windows;
-using System.Windows.Controls;
 using System.Windows.Input;
 using System.Windows.Media;
 using HandyControl.Data;
@@ -8,7 +7,7 @@ using HandyControl.Tools;
 
 namespace HandyControl.Controls
 {
-    public class Rate : ItemsControl
+    public class Rate : SimpleItemsControl
     {
         public static readonly DependencyProperty ItemMarginProperty = DependencyProperty.Register(
             "ItemMargin", typeof(Thickness), typeof(Rate), new PropertyMetadata(default(Thickness)));
@@ -179,8 +178,6 @@ namespace HandyControl.Controls
 
         public override void OnApplyTemplate()
         {
-            base.OnApplyTemplate();
-
             if (!_isLoaded)
             {
                 Items.Clear();
@@ -193,6 +190,8 @@ namespace HandyControl.Controls
                     });
                 }
             }
+
+            base.OnApplyTemplate();
         }
 
         protected override void OnMouseLeave(MouseEventArgs e)

HandyControl/Controls/Rate/RateItem.cs

@@ -78,6 +78,7 @@ namespace HandyControl.Controls
             {
                 if (_isHalf == value) return;
                 _isHalf = value;
+                if (_icon == null) return;
                 _icon.Width = value ? ActualWidth / 2 : ActualWidth;
             }
         }
@@ -93,7 +94,7 @@ namespace HandyControl.Controls
         private static void OnIsSelectedChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
         {
             var ctl = (RateItem) d;
-            ctl._icon.Show((bool) e.NewValue);
+            ctl._icon?.Show((bool) e.NewValue);
         }
 
         public event RoutedEventHandler SelectedChanged

HandyControl/Controls/TabControl/TabControl.cs

@@ -6,7 +6,6 @@ using System.Windows.Controls.Primitives;
 using HandyControl.Data;
 using HandyControl.Tools.Extension;
 
-// ReSharper disable once CheckNamespace
 namespace HandyControl.Controls
 {
     [TemplatePart(Name = OverflowButtonKey, Type = typeof(ContextMenuToggleButton))]

HandyControl/Controls/TabControl/TabItem.cs

@@ -8,7 +8,6 @@ using System.Windows.Media.Animation;
 using HandyControl.Interactivity;
 using HandyControl.Tools;
 
-// ReSharper disable once CheckNamespace
 namespace HandyControl.Controls
 {
     public class TabItem : System.Windows.Controls.TabItem

HandyControl/Controls/TabControl/TabPanel.cs

@@ -6,7 +6,6 @@ using System.Windows.Media;
 using HandyControl.Data;
 using HandyControl.Tools;
 
-// ReSharper disable once CheckNamespace
 namespace HandyControl.Controls
 {
     public class TabPanel : Panel

HandyControl/Data/ValueBoxes.cs

@@ -19,6 +19,8 @@
 
         internal static object Double200Box = 200.0;
 
+        internal static object Double300Box = 300.0;
+
         internal static object DoubleNeg1Box = -1.0;
 
         internal static object Int0Box = 0;

HandyControl/HandyControl.csproj

@@ -117,6 +117,8 @@
     <Compile Include="Controls\Attach\LinkElement.cs" />
     <Compile Include="Controls\Attach\PanelElement.cs" />
     <Compile Include="Controls\Attach\VisualElement.cs" />
+    <Compile Include="Controls\Base\SimpleItemsControl.cs" />
+    <Compile Include="Controls\CoverView\CoverViewContent.cs" />
     <Compile Include="Controls\CoverView\CoverViewItem.cs" />
     <Compile Include="Controls\Other\AnimationPath.cs" />
     <Compile Include="Controls\Attach\BackgroundSwitchElement.cs" />
@@ -156,7 +158,7 @@
     <Compile Include="Controls\Input\IDataInput.cs" />
     <Compile Include="Controls\Input\PasswordBox.cs" />
     <Compile Include="Controls\Input\TextBox.cs" />
-    <Compile Include="Controls\Other\ISingleOpen.cs" />
+    <Compile Include="Controls\Base\ISingleOpen.cs" />
     <Compile Include="Controls\Input\NumericUpDown.cs" />
     <Compile Include="Controls\Other\Pagination.cs" />
     <Compile Include="Controls\Attach\IconElement.cs" />
@@ -168,7 +170,7 @@
     <Compile Include="Controls\Loading\LoadingBase.cs" />
     <Compile Include="Controls\Loading\LoadingCircle.cs" />
     <Compile Include="Controls\Loading\LoadingLine.cs" />
-    <Compile Include="Controls\Other\InternalCanvas.cs" />
+    <Compile Include="Controls\Internal\InternalCanvas.cs" />
     <Compile Include="Controls\StepBar\StepBar.cs" />
     <Compile Include="Controls\StepBar\StepBarItem.cs" />
     <Compile Include="Controls\Time\FlipClock\FlipClock.cs" />
@@ -649,6 +651,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="Themes\Styles\SimpleItemsControl.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="Themes\Styles\Slider.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>

HandyControl/Themes/Styles/Base/CoverViewBaseStyle.xaml

@@ -3,11 +3,72 @@
                     xmlns:controls="clr-namespace:HandyControl.Controls">
 
     <Style x:Key="CoverViewItemBaseStyle" TargetType="controls:CoverViewItem">
+        <Setter Property="Margin" Value="{Binding ItemMargin,RelativeSource={RelativeSource FindAncestor, AncestorType=controls:CoverView}}"/>
+        <Setter Property="Width" Value="{Binding ItemWidth,RelativeSource={RelativeSource FindAncestor, AncestorType=controls:CoverView}}"/>
+        <Setter Property="Height" Value="{Binding ItemHeight,RelativeSource={RelativeSource FindAncestor, AncestorType=controls:CoverView}}"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="controls:CoverViewItem">
+                    <Border BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}">
+                        <ContentPresenter ContentSource="Header" Margin="{TemplateBinding Padding}"/>
+                    </Border>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
 
+    <Style x:Key="CoverViewContentBaseStyle" TargetType="controls:CoverViewContent">
+        <Setter Property="Background" Value="{DynamicResource RegionBrush}"/>
+        <Setter Property="BorderThickness" Value="1"/>
+        <Setter Property="BorderBrush" Value="{DynamicResource BorderBrush}"/>
+        <Setter Property="Margin" Value="0,0,0,8"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="controls:CoverViewContent">
+                    <Grid>
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="16"/>
+                            <RowDefinition/>
+                        </Grid.RowDefinitions>
+                        <Border x:Name="PART_Triangle" Visibility="Visible" Grid.Row="0" Width="30" Height="30" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.RowSpan="2">
+                            <Border.RenderTransform>
+                                <TransformGroup>
+                                    <TranslateTransform X="5" Y="5"/>
+                                    <RotateTransform Angle="45"/>
+                                </TransformGroup>
+                            </Border.RenderTransform>
+                        </Border>
+                        <Border x:Name="PART_Content" Height="0" Grid.Row="1" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
+                            <ContentPresenter Margin="{TemplateBinding Padding}"/>
+                        </Border>
+                        <Rectangle SnapsToDevicePixels="True" Visibility="{Binding Visibility,ElementName=PART_Triangle}" Grid.Row="1" VerticalAlignment="Top" HorizontalAlignment="Left" Width="28" Margin="{Binding Margin,ElementName=PART_Triangle}" Height="1" Fill="{TemplateBinding Background}">
+                            <Rectangle.RenderTransform>
+                                <TransformGroup>
+                                    <TranslateTransform X="1"/>
+                                </TransformGroup>
+                            </Rectangle.RenderTransform>
+                        </Rectangle>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
     </Style>
 
     <Style x:Key="CoverViewBaseStyle" TargetType="controls:CoverView">
-        <!--<Setter Property="item"/>-->
+        <Setter Property="ItemContainerStyle" Value="{StaticResource CoverViewItemBaseStyle}"/>
+        <Setter Property="CoverViewContentStyle" Value="{StaticResource CoverViewContentBaseStyle}"/>
+        <Setter Property="ItemMargin" Value="8"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="controls:CoverView">
+                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
+                        <ScrollViewer>
+                            <WrapPanel x:Name="PART_Panel"/>
+                        </ScrollViewer>
+                    </Border>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
     </Style>
 
 </ResourceDictionary>

HandyControl/Themes/Styles/Base/RateBaseStyle.xaml

@@ -60,10 +60,6 @@
         </Setter>
     </Style>
 
-    <ItemsPanelTemplate x:Key="RateHorizontalItemsPanelTemplate">
-        <UniformGrid Rows="1" Margin="-5,0"/>
-    </ItemsPanelTemplate>
-
     <Style x:Key="RateBaseStyle" TargetType="controls:Rate">
         <Setter Property="ItemMargin" Value="5,0"/>
         <Setter Property="HorizontalAlignment" Value="Left"/>
@@ -72,13 +68,12 @@
         <Setter Property="Foreground" Value="{DynamicResource PrimaryBrush}"/>
         <Setter Property="Background" Value="{DynamicResource BackgroundBrush}"/>
         <Setter Property="ItemContainerStyle" Value="{StaticResource RateRateItemBaseStyle}"/>
-        <Setter Property="ItemsPanel" Value="{StaticResource RateHorizontalItemsPanelTemplate}"/>
         <Setter Property="Text" Value="{Binding Value,RelativeSource={RelativeSource Self},StringFormat={}{0:0.0}}"/>
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="controls:Rate">
-                    <StackPanel Background="Transparent" Orientation="Horizontal" x:Name="PART_Panel">
-                        <ItemsPresenter/>
+                    <StackPanel Background="Transparent" Orientation="Horizontal">
+                        <UniformGrid Rows="1" Margin="-5,0" x:Name="PART_Panel"/>
                         <TextBlock Visibility="{TemplateBinding ShowText,Converter={StaticResource Boolean2VisibilityConverter}}" Text="{TemplateBinding Text}" Margin="10,0,0,0" VerticalAlignment="Center"/>
                     </StackPanel>
                 </ControlTemplate>

HandyControl/Themes/Styles/ColorPicker.xaml

@@ -32,7 +32,8 @@
                                 <Border.Background>
                                     <LinearGradientBrush EndPoint="0,0.5" StartPoint="1,0.5">
                                         <GradientStop Color="White" Offset="1"/>
-                                        <GradientStop Color="Transparent"/>
+                                        <GradientStop Color="#80ffffff" Offset=".5"/>
+                                        <GradientStop Color="#00ffffff"/>
                                     </LinearGradientBrush>
                                 </Border.Background>
                             </Border>
@@ -40,9 +41,8 @@
                                 <Border.Background>
                                     <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                         <GradientStop Color="Black" Offset="1"/>
-                                        <GradientStop Color="#aa000000" Offset=".6"/>
-                                        <GradientStop Color="#22000000" Offset=".2"/>
-                                        <GradientStop Color="Transparent"/>
+                                        <GradientStop Color="#80000000" Offset=".5"/>
+                                        <GradientStop Color="#00000000"/>
                                     </LinearGradientBrush>
                                 </Border.Background>
                             </Border>

HandyControl/Themes/Styles/CoverView.xaml

@@ -1,4 +1,10 @@
 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    
+                    xmlns:controls="clr-namespace:HandyControl.Controls">
+
+    <ResourceDictionary.MergedDictionaries>
+        <ResourceDictionary Source="Base/CoverViewBaseStyle.xaml"/>
+    </ResourceDictionary.MergedDictionaries>
+
+    <Style BasedOn="{StaticResource CoverViewBaseStyle}" TargetType="controls:CoverView"/>
+
 </ResourceDictionary>

HandyControl/Themes/Styles/SimpleItemsControl.xaml

@@ -0,0 +1,17 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:controls="clr-namespace:HandyControl.Controls">
+
+    <Style TargetType="controls:SimpleItemsControl">
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="controls:SimpleItemsControl">
+                    <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
+                        <StackPanel x:Name="PART_Panel" />
+                    </Border>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+</ResourceDictionary>

HandyControlDemo/HandyControlDemo.csproj

@@ -685,6 +685,16 @@
       <Generator>TextTemplatingFileGenerator</Generator>
       <LastGenOutput>MessageToken.cs</LastGenOutput>
     </Content>
+    <Resource Include="Resources\Img\Album\1.jpg" />
+    <Resource Include="Resources\Img\Album\10.jpg" />
+    <Resource Include="Resources\Img\Album\2.jpg" />
+    <Resource Include="Resources\Img\Album\3.jpg" />
+    <Resource Include="Resources\Img\Album\4.jpg" />
+    <Resource Include="Resources\Img\Album\5.jpg" />
+    <Resource Include="Resources\Img\Album\6.jpg" />
+    <Resource Include="Resources\Img\Album\7.jpg" />
+    <Resource Include="Resources\Img\Album\8.jpg" />
+    <Resource Include="Resources\Img\Album\9.jpg" />
     <Resource Include="Resources\Img\LeftMainContent\DetailDataView_16x.png" />
     <Resource Include="Resources\Img\LeftMainContent\Panel_16x.png" />
     <Resource Include="Resources\Img\LeftMainContent\Shield_16x.png" />

HandyControlDemo/UserControl/Controls/CoverViewDemoCtl.xaml

@@ -2,12 +2,90 @@
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:controls="clr-namespace:HandyControl.Controls;assembly=HandyControl"
-             xmlns:interactivity="clr-namespace:HandyControl.Interactivity;assembly=HandyControl"
+             xmlns:langs="clr-namespace:HandyControlDemo.Properties.Langs"
              Background="{DynamicResource RegionBrush}">
     <controls:TransitioningContentControl>
-        <StackPanel Margin="32" VerticalAlignment="Center">
-            <TextBlock Text="Under construction" Style="{StaticResource TextBlockLargeBold}"/>
-            <Button Margin="0,32,0,0" Content="Target" Style="{StaticResource ButtonPrimary}" Width="180" Command="interactivity:ControlCommands.OpenLink" controls:LinkElement.Link="https://dribbble.com/shots/1538492-iTunes-Redesign/attachments/233957"/>
-        </StackPanel>
+        <controls:CoverView Margin="27" Width="880" Height="432" ItemWidth="160" ItemHeight="160">
+            <controls:CoverViewItem>
+                <controls:CoverViewItem.Header>
+                    <Image Source="/HandyControlDemo;component/Resources/Img/Album/1.jpg"/>
+                </controls:CoverViewItem.Header>
+                <Border Margin="10" Height="300" Background="{DynamicResource SuccessBrush}">
+                    <TextBlock Text="{x:Static langs:Lang.ContentDemoStr}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
+                </Border>
+            </controls:CoverViewItem>
+            <controls:CoverViewItem>
+                <controls:CoverViewItem.Header>
+                    <Image Source="/HandyControlDemo;component/Resources/Img/Album/2.jpg"/>
+                </controls:CoverViewItem.Header>
+                <Border Margin="10" Height="300" Background="{DynamicResource PrimaryBrush}">
+                    <TextBlock Text="{x:Static langs:Lang.ContentDemoStr}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
+                </Border>
+            </controls:CoverViewItem>
+            <controls:CoverViewItem>
+                <controls:CoverViewItem.Header>
+                    <Image Source="/HandyControlDemo;component/Resources/Img/Album/3.jpg"/>
+                </controls:CoverViewItem.Header>
+                <Border Margin="10" Height="300" Background="{DynamicResource WarningBrush}">
+                    <TextBlock Text="{x:Static langs:Lang.ContentDemoStr}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
+                </Border>
+            </controls:CoverViewItem>
+            <controls:CoverViewItem>
+                <controls:CoverViewItem.Header>
+                    <Image Source="/HandyControlDemo;component/Resources/Img/Album/4.jpg"/>
+                </controls:CoverViewItem.Header>
+                <Border Margin="10" Height="300" Background="{DynamicResource DangerBrush}">
+                    <TextBlock Text="{x:Static langs:Lang.ContentDemoStr}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
+                </Border>
+            </controls:CoverViewItem>
+            <controls:CoverViewItem>
+                <controls:CoverViewItem.Header>
+                    <Image Source="/HandyControlDemo;component/Resources/Img/Album/5.jpg"/>
+                </controls:CoverViewItem.Header>
+                <Border Margin="10" Height="300" Background="{DynamicResource SuccessBrush}">
+                    <TextBlock Text="{x:Static langs:Lang.ContentDemoStr}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
+                </Border>
+            </controls:CoverViewItem>
+            <controls:CoverViewItem>
+                <controls:CoverViewItem.Header>
+                    <Image Source="/HandyControlDemo;component/Resources/Img/Album/6.jpg"/>
+                </controls:CoverViewItem.Header>
+                <Border Margin="10" Height="300" Background="{DynamicResource PrimaryBrush}">
+                    <TextBlock Text="{x:Static langs:Lang.ContentDemoStr}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
+                </Border>
+            </controls:CoverViewItem>
+            <controls:CoverViewItem>
+                <controls:CoverViewItem.Header>
+                    <Image Source="/HandyControlDemo;component/Resources/Img/Album/7.jpg"/>
+                </controls:CoverViewItem.Header>
+                <Border Margin="10" Height="300" Background="{DynamicResource InfoBrush}">
+                    <TextBlock Text="{x:Static langs:Lang.ContentDemoStr}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
+                </Border>
+            </controls:CoverViewItem>
+            <controls:CoverViewItem>
+                <controls:CoverViewItem.Header>
+                    <Image Source="/HandyControlDemo;component/Resources/Img/Album/8.jpg"/>
+                </controls:CoverViewItem.Header>
+                <Border Margin="10" Height="300" Background="{DynamicResource WarningBrush}">
+                    <TextBlock Text="{x:Static langs:Lang.ContentDemoStr}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
+                </Border>
+            </controls:CoverViewItem>
+            <controls:CoverViewItem>
+                <controls:CoverViewItem.Header>
+                    <Image Source="/HandyControlDemo;component/Resources/Img/Album/9.jpg"/>
+                </controls:CoverViewItem.Header>
+                <Border Margin="10" Height="300" Background="{DynamicResource PrimaryBrush}">
+                    <TextBlock Text="{x:Static langs:Lang.ContentDemoStr}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
+                </Border>
+            </controls:CoverViewItem>
+            <controls:CoverViewItem>
+                <controls:CoverViewItem.Header>
+                    <Image Source="/HandyControlDemo;component/Resources/Img/Album/10.jpg"/>
+                </controls:CoverViewItem.Header>
+                <Border Margin="10" Height="300" Background="{DynamicResource DangerBrush}">
+                    <TextBlock Text="{x:Static langs:Lang.ContentDemoStr}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
+                </Border>
+            </controls:CoverViewItem>
+        </controls:CoverView>
     </controls:TransitioningContentControl>
 </UserControl>

README.md

@@ -6,6 +6,10 @@
 
 ## Latest examples
 
+### CoverView
+
+![CoverView](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/CoverView.gif)
+
 ### WaterfallPanel
 
 ![WaterfallPanel](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/WaterfallPanel.png)
@@ -22,12 +26,12 @@
 
 ![FlipClock](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/FlipClock.gif)
 
+## History publication
+
 ### Shield
 
 ![Shield](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Shield.png)
 
-## History publication
-
 ### OutlineText
 
 ![OutlineText](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/OutlineText.png)