QRコードメーカ

WindowsPhone7の標準で組み込まれているQRコードリーダは良くできてるなー、自分のアプリから使用するにはどうすればいいんだろう．．．とうい疑問から始まりましたが、ひとまず自分のアプリからQRコードを表示する方法を試してみました。

QRコード表示して何に使うか！は夢が広がりますが、やっぱりリーダも使えないと中途半端かな。
まぁいずれ解決されるでしょう。それはさておき


QRコードを表示するアプリを作る
他力本願なアプローチでなるべく簡単にします。
まずプロジェクトを作って、MainPageに

1. TextBox
2. Button
3. Image

を配置します。 Image のSourceに以下のURLを指定します

http://chart.apis.google.com/chart?chs=300x300&cht=qr&choe=Shift_JIS&chl=http://nextgate.blogspot.com/

XAMLは下記のようになりました

view plainprint?
<!--ContentPanel - 追加コンテンツをここに入力します-->  
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" Grid.RowSpan="2">  
    <Grid.RowDefinitions>  
        <RowDefinition Height="Auto"/>  
        <RowDefinition Height="0.817*"/>  
    </Grid.RowDefinitions>  
    <StackPanel>  
        <TextBox x:Name="textBox1" Text="" AcceptsReturn="True" InputScope="Url" TextWrapping="Wrap" />  
        <Button Content="作成" Click="Button_Click" />  
    </StackPanel>  
    <Image Margin="0" x:Name="image1" Stretch="Fill" d:LayoutOverrides="GridBox" Grid.Row="1" HorizontalAlignment="Center" Width="300" Height="300" Source="http://chart.apis.google.com/chart?chs=300x300&amp;cht=qr&amp;choe=Shift_JIS&amp;chl=http%3A%2F%2Fnextgate.blogspot.com%2F" />  
</Grid>  
<!--ContentPanel - 追加コンテンツをここに入力します-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" Grid.RowSpan="2">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="0.817*"/>
    </Grid.RowDefinitions>
    <StackPanel>
        <TextBox x:Name="textBox1" Text="" AcceptsReturn="True" InputScope="Url" TextWrapping="Wrap" />
        <Button Content="作成" Click="Button_Click" />
    </StackPanel>
    <Image Margin="0" x:Name="image1" Stretch="Fill" d:LayoutOverrides="GridBox" Grid.Row="1" HorizontalAlignment="Center" Width="300" Height="300" Source="http://chart.apis.google.com/chart?chs=300x300&amp;cht=qr&amp;choe=Shift_JIS&amp;chl=http%3A%2F%2Fnextgate.blogspot.com%2F" />
</Grid>

という感じでUrlを指定します。

こんな感じになります。
なんかもうQRコードが表示されてて、完成したみたいです。

これだけだと使い道がないので、ユーザーが指定した文字列のQRコードを表示するようにしてみます。

”作成”ボタンを押したときのコードを記述します。ボタンをダブルクリックして以下のようにコードを追加します

view plainprint?

1. private void Button_Click(object sender, RoutedEventArgs e)  
2. {  
3.     string url_base = "http://chart.apis.google.com/chart?chs=300x300&cht=qr&choe=Shift_JIS&chl={0}";  
4.   
5.     string url = string.Format(url_base, Uri.EscapeDataString(textBox1.Text));  
6.   
7.     image1.Source = new BitmapImage(new Uri(string.Format(url_base, textBox1.Text), UriKind.Absolute));  
8.   
9. }  

private void Button_Click(object sender, RoutedEventArgs e)
{
    string url_base = "http://chart.apis.google.com/chart?chs=300x300&cht=qr&choe=Shift_JIS&chl={0}";

    string url = string.Format(url_base, Uri.EscapeDataString(textBox1.Text));

    image1.Source = new BitmapImage(new Uri(string.Format(url_base, textBox1.Text), UriKind.Absolute));

}

GoogleChart APIにテキストボックスの文字列を追加したURLを作成して、Imageのソースとして設定するコードです

これで完成

プロジェクトファイル QRMaker.zip