0

Youtube 对投票有很好的控制，如下面的截图，

Youtube 火花棒

WPF中是否已经有类似的东西，或者如果我需要自己做，该怎么做？我是 WPF、XAML 和所有的新手，所以我有这个问题。

4

1 回答 1

2

我不熟悉已经存在类似的东西，在一些专有控件（例如 Telerik RadControls）中有 Sparkline 控件，但与 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将标签放置到第一行和最后一行。可以使用StackPanel放置最后一行中的图标，或者只是创建更多列，随心所欲。这里的一切都很容易。

问题是火花线，我建议您创建两个相互重叠的矩形。两者都应该进入第二行，并跨越所有列，您可以使用Grid.ColumnSpan属性来实现这一点。第一个矩形代表背景，所以为它选择一种浅色。第二个代表实际的投票计数器，应根据票数显示为红色或绿色。

为所有元素命名，然后您就完成了 XAML（除了较小的更正，例如边距和水平或垂直对齐方式）。

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

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

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

请注意，我将总和加倍，以保持浮点数的百分比（或者你总是会得到一个零）。从这里开始，您需要做的就是将矩形的宽度重新缩放到适当的百分比，考虑到背景矩形跨越 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事件。

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

http://wpftutorial.net

于 2013-01-22T09:17:00.463 回答