65.9K
CodeProject 正在变化。 阅读更多。
Home

制作一个快速评分用户控件，适用于 Windows Phone 8.1

S.Prateek
starIconstarIconstarIconstarIconstarIcon

5.00/5 (4投票s)

2014 年 10 月 14 日

Ms-PL

5分钟阅读

viewsIcon

24318

downloadIcon

334

快速绘制一个适用于 Windows Phone 8.1 的评分控件

开篇

通常，当有人在开发 Windows Phone 8.1 应用时，尤其是刚从 Windows Phone 8 开发过来的开发者，他们最先想念的便是各种现成的工具包，比如 Windows Phone Toolkit 或 Coding4Fun Toolkits。因此，缺少评分控件并不新鲜。所以，让我们动手来快速制作一个五星评分控件，至少在一定程度上解决我们的问题。

先设计！

好的，为了快速完成这项工作，我们至少需要做一些初步的设计。我将使用 Microsoft Expression Design。你们可以从这里下载免费版本。它非常轻量级，我们可以直接将素材导出到 Visual Studio 的 Blend 中！

那么，让我们打开 Microsoft Expression Blend 并创建一个新文档。尺寸根据你的需求来选择。让我们来画一些星星！要开始，请查看左侧工具栏并选择“多边形”。

选择多边形后，用鼠标指针在画布上拖动以绘制任何你喜欢的形状。现在，它可能是任何类型的多边形，从一个三角形开始，就像下面这个，它有很多点。

为了纠正这一点，我们需要确保它有 5 个点，并且内深度在 40% 以上，接近 50%，这样它看起来才像一个星星。你可以修改你已有的图形，或者设置正确的参数来创建一个新的。要做到这一点，查看右侧的“编辑多边形”对话框，将点数更改为 5，并将内深度调整到 47%。如果你想创建一个新的，你会看到对话框名称是“创建多边形”。你可以选择 45% 到 50% 之间的任何值，我在这里使用了 47%。

现在，使用正确的多边形设置，给它一个黄色的色调，不要边框。然后复制这些星星并将它们并排排列，这样你就可以得到一排 5 颗星星，看起来像一个标准的评分控件。在画布上，它可能看起来非常接近下图所示：

现在，我们想将这些星星放在渐变上，使其更像评分控件。但在我们开始之前，我们需要将这些星星组合成一个复合路径。所以，让我们选中所有星星，然后选择“对象”->“复合路径”->“制作”，这样所有星星就可以作为一个复合路径来工作了。

现在，是时候给它添加渐变了。选择一个从黄色到白色的渐变，并从左到右应用到你的评分控件上。这时会有一个技巧，起初你会看到颜色在中间融化，而在评分控件中，我们需要清晰的颜色差异来确保它看起来像一个整体。 

现在，点击中间的渐变条，在那里添加一个渐变停止点。

现在，拖动中间点（渐变条上的圆点），将它们放在一起，使颜色差异更加明显。

现在，如果我们移动渐变停止点，我们将看到颜色变化更加明显，星星看起来更像评分控件了。

现在，让我们转到 Visual Studio 并创建一个 Windows Phone 8.1 项目。右键点击解决方案名称，然后添加一个用户控件。

现在，让我们选择用户控件并在 Blend 中打开它。选择所有星星，复制它们，然后粘贴到用户控件的网格中。令你惊讶的是，这些东西可以很顺利地复制到 Blend 中。我们将用户控件的高度设置为 40，宽度设置为 200，以获得合适的用户控件比例。我复制了一组星星，并将背景设置为非常浅的灰色，然后将其放在我们最初复制的星星后面，这样即使在白色背景下看起来也更突出一些。

现在，用户控件的 XAML 将如下所示：

<UserControl
    x:Class="RatingControlTest.usercontrol"
    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"
 
    d:DesignHeight="40"
    d:DesignWidth="200">

    <Grid>
        <Path Stretch="Fill"
              Data="M -1346.6,-259.247L -1358.76,-305.451L -1321.61,-335.489L -1369.31,-338.197L -1386.39,-382.816L -1403.71,-338.285L -1451.43,-335.823L -1414.43,-305.594L -1426.83,-259.454L -1386.65,-285.302L -1346.6,-259.247 Z M -1067.9,-259.247L -1080.07,-305.451L -1042.91,-335.489L -1090.61,-338.197L -1107.7,-382.816L -1125.01,-338.285L -1172.73,-335.823L -1135.73,-305.594L -1148.13,-259.453L -1107.95,-285.301L -1067.9,-259.247 Z M -1207.25,-259.247L -1219.41,-305.451L -1182.26,-335.489L -1229.96,-338.197L -1247.05,-382.816L -1264.36,-338.285L -1312.08,-335.823L -1275.08,-305.594L -1287.48,-259.453L -1247.3,-285.301L -1207.25,-259.247 Z M -928.552,-259.247L -940.718,-305.451L -903.562,-335.489L -951.264,-338.197L -968.35,-382.816L -985.666,-338.285L -1033.38,-335.823L -996.382,-305.594L -1008.79,-259.453L -968.602,-285.301L -928.552,-259.247 Z M -789.204,-259.247L -801.369,-305.451L -764.214,-335.489L -811.916,-338.197L -829.002,-382.816L -846.318,-338.285L -894.034,-335.823L -857.033,-305.594L -869.437,-259.453L -829.254,-285.301L -789.204,-259.247 Z "  
              UseLayoutRounding="False"
              HorizontalAlignment="Left"
              VerticalAlignment="Top"
              Height="Auto" Width="Auto" Fill="#FFDEDEDE"/>
        <Path Stretch="Fill"
              Data="M -1346.6,-259.247L -1358.76,-305.451L -1321.61,-335.489L -1369.31,-338.197L -1386.39,-382.816L -1403.71,-338.285L -1451.43,-335.823L -1414.43,-305.594L -1426.83,-259.454L -1386.65,-285.302L -1346.6,-259.247 Z M -1067.9,-259.247L -1080.07,-305.451L -1042.91,-335.489L -1090.61,-338.197L -1107.7,-382.816L -1125.01,-338.285L -1172.73,-335.823L -1135.73,-305.594L -1148.13,-259.453L -1107.95,-285.301L -1067.9,-259.247 Z M -1207.25,-259.247L -1219.41,-305.451L -1182.26,-335.489L -1229.96,-338.197L -1247.05,-382.816L -1264.36,-338.285L -1312.08,-335.823L -1275.08,-305.594L -1287.48,-259.453L -1247.3,-285.301L -1207.25,-259.247 Z M -928.552,-259.247L -940.718,-305.451L -903.562,-335.489L -951.264,-338.197L -968.35,-382.816L -985.666,-338.285L -1033.38,-335.823L -996.382,-305.594L -1008.79,-259.453L -968.602,-285.301L -928.552,-259.247 Z M -789.204,-259.247L -801.369,-305.451L -764.214,-335.489L -811.916,-338.197L -829.002,-382.816L -846.318,-338.285L -894.034,-335.823L -857.033,-305.594L -869.437,-259.453L -829.254,-285.301L -789.204,-259.247 Z "  
              UseLayoutRounding="False"
              HorizontalAlignment="Left"
              VerticalAlignment="Top"
              Height="Auto" Width="Auto">
            <Path.Fill>
                <LinearGradientBrush StartPoint="3.55262e-007,0.500002" EndPoint="1,0.500001">
                    <GradientStop Color="#FFFFCC00" Offset="0.6"/>
                    <GradientStop Color="#06FCFCFC" Offset="0.6"/>
                </LinearGradientBrush>
            </Path.Fill>
        </Path>

    </Grid>
</UserControl>

 

代码来了

现在，如果我们清楚地记得，当我们在 Blend 中移动渐变停止点时，它看起来就像评分条的值正在改变。我们只需要在代码中模拟这一点，就是这样。所以，我们需要做的就是更改 `<Path.Fill>` 中 `LinearGradientBrush` 条目内 `<GradientStop>` 的 `Offset`。所以，我们必须将 offset 从后端数据绑定，这样我们就可以从用户控件访问它。请记住，这必须是 0.0 到 1 的范围，因为这是 offset 值的范围。

我将我的用户控件重命名为 RatingControl，然后返回 RatingControl.xaml 的后端代码。

public partial class RatingControl : UserControl
    {
        public RatingControl()
        {
            this.InitializeComponent();
        }

        DependencyProperty RateValueProperty = DependencyProperty.Register("RateValue", typeof(double), typeof(RatingControl), new PropertyMetadata(0.1, UpdateValue));

        private static void UpdateValue(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            RatingControl control = d as RatingControl;
            control.Value = (double)e.NewValue;
        }

        private double Value
        {
            get { return (double)GetValue(ValueProperty); }
            set { SetValue(ValueProperty, value); }
        }

        private static readonly DependencyProperty ValueProperty =
            DependencyProperty.Register("Value", typeof(double), typeof(RatingControl), new PropertyMetadata(0.1));

        public double RateValue
        {
            get
            {
                return (double)GetValue(RateValueProperty);
            }
            set
            {
                SetValue(RateValueProperty, value);
            }
        }

    }

现在，我们的任务是连接后端提供的 Value。我在这里使用了两个依赖属性而不是一个，因为我们将在 XAML 中使用元素绑定来附加值。第一个依赖属性 `RateValueProperty` 具有 0.1 的 PropertyMetadata，并且附加了一个函数来更新 XAML 控件中的值（更新 XAML 中的 offset）。

而 `Value` 是实际附加到控件的依赖属性，由于它是私有的，只能在内部访问。所以我们通过 `RateValueProperty` 来暴露它，并用 `Value` 依赖属性来更新它。如果你愿意，你也可以只使用 `Value` 并将其暴露出来。

现在我们要做的是在 XAML 中连接它。

给 Rating Control 添加一个名称。在 `UserControl` 标签中添加 `x:Name="UserControl"`。然后将 `GradientStop` 属性 `Offset` 标记为 `ElementName "UserControl"`。所以，让我们修改 `GradientStop` 标签如下：

<Path.Fill>
     <LinearGradientBrush StartPoint="3.55262e-007,0.500002" EndPoint="1,0.500001">
          <GradientStop Color="#FFFFCC00" Offset="{Binding Value, ElementName=UserControl}"/>
          <GradientStop Color="#06FCFCFC" Offset="{Binding Value, ElementName=UserControl}"/>
      </LinearGradientBrush>
</Path.Fill>

瞧！我们完成了！

使用控件

使用这个控件非常简单。在 `page` 标签中添加 `xmlns:local="using:RatingControlTest"`，然后像下面这样使用它：

<Page
    x:Class="RatingControlTest.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:RatingControlTest"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <local:RatingControl Width="200" Height="40" RateValue="0.5"></local:RatingControl>
    </Grid>
</Page>

它看起来会像这样：

希望这有帮助！;)

 

 

© . All rights reserved.