UX-TV(11/11/11)で紹介した"しりとり"アプリ

Article
11/10/2011

マイクロソフトの田中達彦です。
2011年11月11日のUX-TVで紹介した、しりとりアプリのプロジェクトを公開します。
UX-TVについては、こちらをご覧ください。
https://msdn.microsoft.com/ja-jp/hh162048

このしりとりアプリは、しりとりを始めるときに最初の1文字を決めるというアプリケーションです。
SilverlightのPivotを使用して、この機能を実現しています。
アプリを起動すると、「しりとりスタート」という画面が表示されます。
その画面で、右か左にフリックすると、ひらがなが1文字表示されます。
その文字が、しりとりを始める文字です。

プログラムはいたって簡単で、2ページのPivotItemで構成されたPivotを使っています。
1ページめには「しりとりスタート」の文字、2ページめには乱数で決定したひらがな1文字が表示されます。

MainPage.xamlと、MainPage.xaml.csの中もいたって単純です。
黄色い部分が、変更または追加した部分です。

[MainPage.xaml (抜粋)]

<Grid x:Name="LayoutRoot" Background="Transparent">
    
    <controls:Pivot>
        
        <controls:PivotItem Name="pivotitem1" MouseLeftButtonDown="pivotitem1_MouseLeftButtonDown">
            <Canvas>
            <TextBlock Height="144" HorizontalAlignment="Left" Name="textBlock1" Text="スタート" VerticalAlignment="Top" Width="440" FontFamily="Yu Gothic" TextAlignment="Center" FontSize="88" Canvas.Left="11" Canvas.Top="327" />
            <TextBlock Height="144" HorizontalAlignment="Left" Name="textBlock1b" Text="しりとり" VerticalAlignment="Top" Width="440" FontFamily="Yu Gothic" TextAlignment="Center" FontSize="88" Canvas.Left="9" Canvas.Top="194" />
            </Canvas>
        </controls:PivotItem>

        
        <controls:PivotItem Name="pivotitem2">
            <TextBlock Name="textblock2" FontSize="400" Text="あ" FontFamily="Yu Gothic" Margin="20,50,28,92" Height="626" />

</controls:PivotItem>
</controls:Pivot>
</Grid>

[MainPage.xaml.cs]
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace PivotApp1
{
    public partial class MainPage : PhoneApplicationPage
    {
        string CharList = "あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわがぎぐげござじずぜぞだでどばびぶべぼぱぴぷぺぽ";

        // コンストラクター
        public MainPage()
        {
            InitializeComponent();

            // ListBox コントロールのデータコンテキストをサンプルデータに設定します
            DataContext = App.ViewModel;
            this.Loaded += new RoutedEventHandler(MainPage_Loaded);
        }

        // ViewModel Items のデータを読み込みます
        private void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            if (!App.ViewModel.IsDataLoaded)
            {
                App.ViewModel.LoadData();
            }
        }

        private void pivotitem1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            Random r = new Random();

            textblock2.Text = CharList.Substring(r.Next(CharList.Length), 1);
        }
    }
}

データの部分を配列にすると、任意の名前を表示できるようになります。
Imageコントロールも使えば、画像データも表示できます。
いろいろ変えてお楽しみください。

マイクロソフト
田中達彦

PivotApp1_Shiritori.zip

UX-TV(11/11/11)で紹介した"しりとり"アプリ

Additional resources