Ring Controls v1.0.0の公開

WP7

Windows Phone用のコントロール「Ring Controls」を公開しました。
先日「Ring Clock」というアプリを作成した、というブログを書いてそのアプリで使ったコントロールを公開するといっていましたが、ようやくここにきて公開することができました。Windows Phone 7.x用に作ってあります。8だと動くかしら？？
Ring Controls


Ring Controlsを使えば下の画像のようなドーナツの形状をしたコントロールを使うことができます（このアプリはプロジェクトにサンプルとして含まれています）。

この画像は時計を表していますが、円の中には数字だけでなく画像や動画などのコンテンツはなんでも配置できるので、他にもいろいろな用途に使えると思います。デザインもWindows Phoneに合わせてソリッドな感じになっているので、普通に配置してもデザインを損なわずにむしろ新しいデザインとしてフィットします。手っ取り早くどんな動きをするのか知りたい人は、このRingを使ったアプリ「Ring Clock」を公開しているので、そちらをダウンロードして見てもらうと分かりやすいです（ステマ）。

使い方

使い方を簡単に説明します。

  1. まずはCode Plexにある「Ring Controls」のダウンロードページからバイナリをダウンロードします。
  2. 次にそのファイルを解凍してRingControls.dllをプロジェクトの参照に加えます。
  3. その後に、Ringを使いたいXAML上でnamespaceを追加し、コントロールを配置します。

namespaceの追加：

xmlns:rcontrols="clr-namespace:RingControls;assembly=RingControls"

コントロールの追加：

<rcontrols:Ring
    x:Name="MyRing"
    Max="12"
    Radius="75"
    Thickness="20"
    Foreground="#B9CDE5"
    Highlight="#0070C0"
    IndexChanged="IndexChanged">
</rcontrols:Ring>

Ringコントロールの各プロパティは以下の画像の通りです。

基本的にはこれだけで使えるのですが、ここには書いてないプロパティもあるのでその説明を少し。

プロパティ
  • Indexプロパティ
    • Ringの青い部分はIndexプロパティを変えることで変わってきます。0〜MAXの値で数値を指定すればその位置まで表示されます。
  • IsEnabledTouchWheelプロパティ
    • IsEnabledTouchWheelというプロパティをTrueに設定すればユーザーがタッチホイールの感覚でRingのIndexを変更できます。
  • Cycleプロパティ
    • Cycleプロパティを変更すれば、何周でMAXになるかを調整することができます。例えば、時間を24時間表記からam/pm表記に変更したい場合にこのCycleを2に設定しておくと、2周することで24になります。つまり1周が12になるということです。
サンプルアプリ

円の中心に表示するコンテンツを更新するにはIndexChangedイベントを受け取って、そのIndexに応じてコンテンツを切り替えます。
プロジェクトに含まれるサンプルアプリの時計ではそれぞれ時・分・秒を表すRingをタイマーで更新し（Rxを使ってます）、Indexの更新があったときに起こるIndexChangedイベントを受け取ることで、Ringのコンテンツに時間を設定しています。

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    _disposer = Observable.Timer(TimeSpan.FromSeconds(0), TimeSpan.FromSeconds(1))
        .ObserveOnDispatcher()
        .Subscribe(value =>
        {
            Hour.Index = DateTime.Now.Hour;
            Minute.Index = DateTime.Now.Minute;
            Second.Index = DateTime.Now.Second;
        });
}

private void Hour_IndexChanged(object sender, RingControls.IndexChangedEventArgs args)
{
    Hour.Content = args.Index;
}

private void Minute_IndexChanged(object sender, RingControls.IndexChangedEventArgs args)
{
    Minute.Content = args.Index;
}

private void Second_IndexChanged(object sender, RingControls.IndexChangedEventArgs args)
{
    Second.Content = args.Index;
}

Indexに合わせてコンテンツを変更する場合はこのように設定します。


今後はこのRingを利用して他のコントロールを作成し公開していく予定です。
よろしくお願いします。