WP7自定義控件 評分控件

最近在寫一個新的APP程序，需要使用評分功能，WP的Toolkit里面沒有包含，只能自己寫一個了。

 

評分控件要點

評分控件已經很熟悉了，還是總結一下要點。

1. 由10個（可配置）橫排的五星組成，默認非高亮色（灰色）
2. 得分由從左到右高亮（如紅色，顏色可配置）顯示得分數量的五星，控件能夠提供獲取和設置得分的屬性。
3. 可以點擊其中一個五星修改評分。
4. 為了提高觸摸體驗，支持拖動控件修改得分

 

根據要點設計控件

根據要點1設計控件布局

Horizontal排列的StackPanel（包含在ItemsControl 控件內部） 和 繪制五星的Path 組成。

最上面提供一個透明的Rectangle擴展觸摸空間（WP只能在繪制的控件上觸摸）。

<ItemsControl x:Name="stars"> 
                            <ItemsControl.ItemsPanel> 
                                <ItemsPanelTemplate> 
                                    <StackPanel Orientation="Horizontal" /> 
                                </ItemsPanelTemplate> 
                            </ItemsControl.ItemsPanel> 
                            <ItemsControl.ItemTemplate> 
                                <DataTemplate> 
                                    <Path Data="M16,0 L19.77688,12.223213 L32.000001,12.222913 L22.111121,19.776973 L25.888544,32.000001 L16,24.445454 L6.1114563,32.000001 L9.88888,19.776973 L2.2971745E-08,12.222913 L12.22312,12.223213 z" 
                              Fill="{Binding Fill}" HorizontalAlignment="Left" Height="32" Margin="1,0" Width="32" 
                              Stretch="Fill" VerticalAlignment="Top" /> 
                                </DataTemplate> 
                            </ItemsControl.ItemTemplate> 
                        </ItemsControl> 
                        <Rectangle Fill="#00000000"/>

根據要點1、2設計控件屬性

Brush MarkedFill  選中了的五星刷子

Brush UnMarkedFill 未選中的五星刷子

int MaxStars 最大五星數量

Marked 當前評價值

 

根據要點2設計控件屬性改變行為

很簡單獲取Marked 然后將每個五星都修改一下顏色

private void FillStars(int index) 
        { 
            if (!VerifyValue(index)) return;

            for (int i = 0, length = starItems.Count; i < length; i++) 
            { 
                var star = starItems[i]; 
                if (i > index) 
                { 
                    star.Fill = UnMarkedFill; 
                } 
                else 
                { 
                    star.Fill = MarkedFill; 
                } 
            }

        }

根據要點3、4設計控件觸控行為

將2個要點合並了，實現方法為：

• 滑動前（點中）： 修改為當前X軸的高亮位置
• 滑動中：根據X軸變化高亮位置
• 滑動完成（放開）： 修改為當前X軸的高亮位置，並更新評分Marked 當前評價值

通過五星的寬度可以獲取X軸所在的五星

代碼如下：

protected override void OnManipulationStarted(ManipulationStartedEventArgs e) 
        { 
            e.Handled = true; 
            UpdateStar(e.ManipulationOrigin); 
            base.OnManipulationStarted(e); 
        }

        protected override void OnManipulationDelta(ManipulationDeltaEventArgs e) 
        { 
            e.Handled = true; 
            UpdateStar(e.ManipulationOrigin); 
            base.OnManipulationDelta(e); 
        }

        protected override void OnManipulationCompleted(ManipulationCompletedEventArgs e) 
        { 
            e.Handled = true; 
            var index = UpdateStar(e.ManipulationOrigin); 
            if (VerifyValue(index)) { Marked = index + 1; } 
            base.OnManipulationCompleted(e); 
        }

 

完整代碼

 

using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Diagnostics;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;

namespace KimiStudio.Controls
{
    public class StarMark : Control
    {
        private ItemsControl stars;
        private const int StarSize = 34;
        private ObservableCollection<StarItem> starItems;

        #region DependencyPropertys
        public static readonly DependencyProperty MarkedFillProperty =
           DependencyProperty.Register("MarkedFill", typeof(Brush), typeof(StarMark),
           new PropertyMetadata(new SolidColorBrush(Colors.Red)));

        public static readonly DependencyProperty UnMarkedFillProperty =
            DependencyProperty.Register("UnMarkedFill", typeof(Brush), typeof(StarMark),
            new PropertyMetadata(new SolidColorBrush(Colors.DarkGray)));

        public static readonly DependencyProperty MaxStarsProperty =
            DependencyProperty.Register("MaxStars", typeof(int), typeof(StarMark),
            new PropertyMetadata(10));

        public static readonly DependencyProperty MarkedProperty =
            DependencyProperty.Register("Marked", typeof(int), typeof(StarMark),
            new PropertyMetadata(0, OnMarkedPropertyChanged));

        public int Marked
        {
            get { return (int)GetValue(MarkedProperty); }
            set { SetValue(MarkedProperty, value); }
        }

        public int MaxStars
        {
            get { return (int)GetValue(MaxStarsProperty); }
            set { SetValue(MaxStarsProperty, value); }
        }

        public Brush UnMarkedFill
        {
            get { return (Brush)GetValue(UnMarkedFillProperty); }
            set { SetValue(UnMarkedFillProperty, value); }
        }

        public Brush MarkedFill
        {
            get { return (Brush)GetValue(MarkedFillProperty); }
            set { SetValue(MarkedFillProperty, value); }
        }

        private static void OnMarkedPropertyChanged(DependencyObject o, DependencyPropertyChangedEventArgs args)
        {
            var starMark = o as StarMark;
            if (starMark == null || args.NewValue == args.OldValue) return;

            starMark.SetMarked((int)args.NewValue);
        }

        #endregion

        public StarMark()
        {
            this.DefaultStyleKey = typeof(StarMark);
        }

        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();
            stars = (ItemsControl)GetTemplateChild("stars");


            starItems = new ObservableCollection<StarItem>();
            for (int i = 0, length = MaxStars; i < length; i++)
            {
                starItems.Add(new StarItem { Fill = UnMarkedFill });
            }
            stars.ItemsSource = starItems;
            SetMarked(Marked);
        }

        private void SetMarked(int value)
        {
            if (stars == null) return; ;
            FillStars(value - 1);
        }

        protected override void OnManipulationStarted(ManipulationStartedEventArgs e)
        {
            e.Handled = true;
            UpdateStar(e.ManipulationOrigin);
            base.OnManipulationStarted(e);
        }

        protected override void OnManipulationDelta(ManipulationDeltaEventArgs e)
        {
            e.Handled = true;
            UpdateStar(e.ManipulationOrigin);
            base.OnManipulationDelta(e);
        }

        protected override void OnManipulationCompleted(ManipulationCompletedEventArgs e)
        {
            e.Handled = true;
            var index = UpdateStar(e.ManipulationOrigin);
            if (VerifyValue(index)) { Marked = index + 1; }
            base.OnManipulationCompleted(e);
        }

        private int UpdateStar(Point point)
        {
            int x = (int)point.X;
            int index = x / StarSize;
            FillStars(index);
            return index;
        }
        
        //SL可用
        //protected override void OnMouseLeftButtonUp(MouseButtonEventArgs e)
        //{
        //    int x = (int)e.GetPosition(stars).X;
        //    int index = x / StarSize;
        //    FillStars(index);

        //    if (VerifyValue(index)) { Marked = index + 1; }
        //    base.OnMouseLeftButtonUp(e);
        //}

     
        private bool VerifyValue(int index)
        {
            if (index < 0 || index >= stars.Items.Count) return false;
            return true;
        }


        private void FillStars(int index)
        {
            if (!VerifyValue(index)) return;

            for (int i = 0, length = starItems.Count; i < length; i++)
            {
                var star = starItems[i];
                if (i > index)
                {
                    star.Fill = UnMarkedFill;
                }
                else
                {
                    star.Fill = MarkedFill;
                }
            }

        }




        public class StarItem : INotifyPropertyChanged
        {
            private Brush fill;

            public event PropertyChangedEventHandler PropertyChanged;

            public Brush Fill
            {
                get { return fill; }
                set
                {
                    if (fill == value) return;
                    fill = value;
                    OnPropertyChanged("Fill");
                }
            }

            private void OnPropertyChanged(string propertyName)
            {
                var handler = PropertyChanged;
                if (handler == null) return;
                handler(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}

對應的Generic.xaml

 <Style TargetType="local:StarMark">
        <Setter Property="Width" Value="340"/>
        <Setter Property="Height" Value="35"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:StarMark">
                    <Grid>
                        <ItemsControl x:Name="stars">
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <StackPanel Orientation="Horizontal" />
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <Path Data="M16,0 L19.77688,12.223213 L32.000001,12.222913 L22.111121,19.776973 L25.888544,32.000001 L16,24.445454 L6.1114563,32.000001 L9.88888,19.776973 L2.2971745E-08,12.222913 L12.22312,12.223213 z" 
                              Fill="{Binding Fill}" HorizontalAlignment="Left" Height="32" Margin="1,0" Width="32"
                              Stretch="Fill" VerticalAlignment="Top" />
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                        <Rectangle Fill="#00000000"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>