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.RowGrid.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 回答