如何在WPF中实现像控件一样的youtube sparkbars

Question

Youtube可以很好地控制投票，例如下面的截图，

WPF中是否有类似的内容，或者我自己需要这样做，怎么做？我是WPF，XAML等新手，所以我有这个问题。

Answer 1

我不熟悉任何与此类似的东西已经存在，一些专有控件中有Sparkline控件，例如Telerik RadControls，但与YouTube投票没有完全相同。

但是使用XAML创建自己的控件应该很容易。

让我们来看看，控件存在于 3个标签，一行显示进度和两个图标。要将此元素放置在WPF用户控件中，您可以使用包含三个行和两个列的网格。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition Width="Auto" />
    </Grid>
</Grid>

然后使用XAML属性 Grid.Row 和 Grid.Column将标签放入第一行和最后一行。最后一行中的图标可以使用< strong> StackPanel 或只创建更多列，按您的意愿执行。这里的一切都很简单。

问题是火花线，我建议你创建两个相互叠加的矩形。两者都应该进入第二行，并跨越所有列，您可以使用 Grid.ColumnSpan 属性实现此目的。第一个矩形表示背景，因此请为其选择浅色。第二个代表实际的投票计数器，应该用红色或绿色，具体取决于投票。

为所有元素命名并完成XAML（小修正除外，例如边距和水平或垂直对齐）。< / p>

在代码中，为用户控件创建三个属性，所有类型都为整数（int）。一个用于查看计数，两个用于向上和向下投票。这些属性可以绑定到XAML中的标签，也可以手动更新值。在此处阅读有关数据绑定的更多信息：http://wpftutorial.net/DataBindingOverview.html

要正确放置显示投票计数器的矩形，您应该根据属性计算upvotes的百分比，请使用以下代码获取帮助：

double percentage = UpvoteCount / (double)(UpvoteCount + DownvoteCount);

请注意，我将总和转换为double，以保持百分比为浮点数（或者您总是得到零）。从这里你需要做的就是将矩形的宽度重新缩放到适当的百分比，考虑到背景矩形跨越100％。您可以使用以下代码执行此操作：

voteProgress.Width = percentage * voteBackground.ActualWidth;

在这种情况下，voteProgress和voteBackground是矩形的名称。 Youtube还使用不同的颜色，您可以根据计算的百分比进行更改：

if (percentage > 0.5)
   voteProgress.Fill = new SolidColorBrush(Colors.Green);
else
   voteProgress.Fill = new SolidColorBrush(Colors.Red);

每当控件的大小发生变化（或投票数）时，必须计算百分比，所以请查看 SizeChanged 事件。

有关更多信息和详细信息，请阅读WPF教程，由Christian Moser提供。

http://wpftutorial.net