0

Youtubeには、以下のスクリーンショットのような投票の優れたコントロールがあります。

Youtube Sparkbars

WPFに類似したものはすでにありますか、それとも自分で行う必要がある場合は、どのように行うのですか？私はWPF、XAMLなどすべてに慣れていないので、この質問があります。

4

1 に答える 1

2

Telerik RadControlsなどの独自のコントロールの一部にSparklineコントロールがありますが、YouTubeの投票とまったく同じものはありません。

ただし、XAMLを使用して独自のコントロールを作成するのは簡単なはずです。

見てみましょう。コントロールは3つのラベル、進行状況を示す線、および2つのアイコンから存在します。この要素をWPFユーザーコントロールに配置するには、3行2列のグリッドを使用できます。

<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を使用して配置することも、列をさらに作成することもできます。必要に応じて実行してください。ここのすべては簡単です。

問題はスパークラインです。これは、2つの長方形を重ねて作成することをお勧めします。両方とも2番目の行に入り、すべての列にまたがる必要があります。これは、Grid.ColumnSpan属性を使用して実現できます。最初の長方形は背景を表すため、明るい色を選択します。2つ目は実際の投票カウンターを表し、投票に応じて赤または緑に色付けする必要があります。

すべての要素に名前を付けると、XAMLが完成します（マージンや水平または垂直方向の配置などの小さな修正を除く）。

コードで、ユーザー制御用に3つのプロパティを作成します。すべて、整数（int）型です。1つは視聴回数用、2つは賛成票と反対票用です。これらのプロパティは、XAMLのラベルにバインドすることも、値を手動で更新することもできます。データバインディングの詳細については、http ：//wpftutorial.net/DataBindingOverview.htmlをご覧ください。

投票カウンターを表示する長方形を正しく配置するには、プロパティに基づいて賛成票の割合を計算する必要があります。ヘルプについては、次のコードを使用してください。

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

パーセンテージを浮動小数点数に保つために、合計を2倍にキャストすることに注意してください（または、常にゼロになります）。ここから行う必要があるのは、背景の長方形が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イベントを調べてください。

詳細と詳細については、ChristianMoserの厚意によりWPFチュートリアルをお読みください。

http://wpftutorial.net

于 2013-01-22T09:17:00.463 に答える