【Windows Phone 8】五角星评价控件

【效果】

【思路】

利用Path绘制五角星，根据Tap事件填充，获取评分

【前台】

<UserControl x:Class="评分控件.StarsControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    d:DesignHeight="480" d:DesignWidth="480" Loaded="UserControl_Loaded_1">

    <Grid Background="#EFEFEF">
        <StackPanel x:Name="LayoutRoot" Orientation="Horizontal">
            <StackPanel Width="40" Height="32" Margin="0,0" Background="#00000000">
                <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"
                              HorizontalAlignment="Center" Height="32"  Width="32"
                              Stretch="Fill" VerticalAlignment="Center" Stroke="#EF8200"/>
            </StackPanel>
            <StackPanel Width="40" Height="32" Margin="0,0" Background="#00000000">
                <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"
                              HorizontalAlignment="Center" Height="32"  Width="32"
                              Stretch="Fill" VerticalAlignment="Center" Stroke="#EF8200"/>
            </StackPanel>
            <StackPanel Width="40" Height="32" Margin="0,0" Background="#00000000">
                <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"
                              HorizontalAlignment="Center" Height="32"  Width="32"
                              Stretch="Fill" VerticalAlignment="Center" Stroke="#EF8200"/>
            </StackPanel>
            <StackPanel Width="40" Height="32" Margin="0,0" Background="#00000000">
                <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"
                              HorizontalAlignment="Center" Height="32"  Width="32"
                              Stretch="Fill" VerticalAlignment="Center" Stroke="#EF8200"/>
            </StackPanel>
            <StackPanel Width="40" Height="32" Margin="0,0" Background="#00000000">
                <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"
                              HorizontalAlignment="Center" Height="32" Width="32"
                              Stretch="Fill" VerticalAlignment="Center" Stroke="#EF8200"/>
            </StackPanel>
        </StackPanel>
    </Grid>
</UserControl>

 

【后台】

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
using System.Windows.Shapes;
using System.Windows.Media;

namespace 评分控件
{
    public partial class StarsControl : UserControl
    {
        #region Variables

        private List<StackPanel> stackPanels = new List<StackPanel>();

        #endregion

        #region Properties

        public int Value
        {
            get { return (int)GetValue(ValueProperty); }
            set { SetValue(ValueProperty, value); }
        }

        public static readonly DependencyProperty ValueProperty =
            DependencyProperty.Register("Value", typeof(int), typeof(StarsControl), new PropertyMetadata(0));
        #endregion

        #region Methods
        public StarsControl()
        {
            InitializeComponent();
        }

        private void UserControl_Loaded_1(object sender, RoutedEventArgs e)
        {
            IEnumerable<UIElement> stars = this.LayoutRoot.Children;

            foreach (var item in stars)
            {
                if (item.GetType() == typeof(StackPanel))
                {
                    stackPanels.Add((StackPanel)item);

                    item.Tap += item_Tap;
                }
            }
        }

        void item_Tap(object sender, System.Windows.Input.GestureEventArgs e)
        {
            for (int i = 0; i < stackPanels.Count; i++)
            {
                if (sender.Equals(stackPanels[i]))
                {
                    Value = i + 1;
                    FillStar(Value);
                }
            }
        }

        private void FillStar(int value)
        {
            for (int i = 0; i < stackPanels.Count; i++)
            {
                Path path = stackPanels[i].Children[0] as Path;
                path.Fill = new SolidColorBrush(System.Windows.Media.Color.FromArgb(0, 0, 0, 0));
            }
            for (int i = 0; i < value; i++)
            {
                Path path = stackPanels[i].Children[0] as Path;
                path.Fill = new SolidColorBrush(System.Windows.Media.Color.FromArgb(255, 239, 130, 0));
            }
        }
        #endregion
    }
}