PR

バーコードをスキャンする

2012年2月10日(金)
PROJECT KySS

書き出されるXAMLコードをリスト1のように編集します。

リスト1 編集されたXAMLコード(MainPage.xaml)

(1)<Image.RenderTransform>プロパティ要素内に、<CompositeTransform> 要素を配置します。CompositeTransformクラスは、1 つのオブジェクトに複数の異なる変換を適用することができるクラスです。CenterXとCenterYプロパティに、読み取られたバーコードの画像を表示する<Image>要素のWidthとHeightの約半分のサイズを指定します。CenterXプロパティでは、CompositeTransform で指定された、すべての変換の中心点の x 座標を設定します。CenterYプロパティでは、CompositeTransform で指定された、すべての変換の中心点の y 座標を設定します。回転を表すRotationに90を指定します。カメラを縦向きで撮った画像もデフォルトでは横向きに表示されるため、90度回転して縦向きに表示されるようにしています。
(2)<Rectangle.Fill>プロパティ要素内に<VideoBrush>要素を配置し、x:NameにmyVideoBrushと指定します。<VideoBrush>要素は、ビデオ コンテンツで領域を塗りつぶす要素です。
(3)<Rectangle.RenderTransform>プロパティ要素内に、<CompositeTransform> 要素を配置します。CompositeTransformクラスは、1 つのオブジェクトに複数の異なる変換を適用することができるクラスです。CenterXとCenterYプロパティに、被写体の表示される<Rectangle>要素のWidthとHeightの約半分のサイズを指定します。回転を表すRotationに90を指定します。カメラを縦向きで被写体を写しても、デフォルトでは横向きに表示されるため、90度回転して縦向きに表示されるようにしています。
(4)<shell:ApplicationBarIconButton>要素の”IconUri”プロパティにImageフォルダ内のrefresh.pngを指定します。ClickイベントにPage_Refreshイベントハンドラを指定します。デザイン画面では、ここで指定したアイコンは表示されませんが、実行時に表示されます。
  <phone:PhoneApplicationPage 
    x:Class="WP71_BarCodeScan.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="696"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True" Language="ja-JP">
 
    <!--LayoutRoot は、すべてのページ コンテンツが配置されるルート グリッドです-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
      </Grid.RowDefinitions>
 
      <!--TitlePanel は、アプリケーション名とページ タイトルを格納します-->
      <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
        <TextBlock x:Name="ApplicationTitle" Text="マイ アプリケーション" Style="{StaticResource PhoneTextNormalStyle}"/>
        <TextBlock x:Name="PageTitle" Text="BarCode Scan" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
      </StackPanel>
 
      <!--ContentPanel - 追加コンテンツをここに入力します-->
      <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <StackPanel Name="barStackPanel" Margin="0,0,0,82">
          <TextBlock Name="numbertextBlock" FontWeight="Bold" HorizontalAlignment="Right" FontSize="36" Height="50" Width="393"/>
          <Image Name="Image1" Height="347" Width="366">
            <Image.RenderTransform> ■(1)
              <CompositeTransform  Rotation="90" CenterY="173" CenterX="183"/> ■(1)
            </Image.RenderTransform> ■(1)
          </Image>
          
        </StackPanel>
        <Button Content="Shutter" Height="76" HorizontalAlignment="Left" Margin="71,459,0,0" Name="shutterButton" VerticalAlignment="Top" Width="303" />
      </Grid>
      <Rectangle Height="400" HorizontalAlignment="Left" Margin="11,23,0,0" Name="Rectangle1" Stroke="Black" StrokeThickness="1" VerticalAlignment="Top" Width="438" Grid.Row="1">
        <Rectangle.Fill> ■(2)
          <VideoBrush x:Name="myVideoBrush" /> ■(2)
        </Rectangle.Fill> ■(2)
        <Rectangle.RenderTransform> ■(3)
          <CompositeTransform Rotation="90" CenterX="219" CenterY="212" /> ■(3)
        </Rectangle.RenderTransform> ■(3)
      </Rectangle>
    </Grid>
    <phone:PhoneApplicationPage.ApplicationBar>
      <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
        <shell:ApplicationBarIconButton IconUri="/Image/refresh.png" Text="リフレッシュ" Click="Page_Refresh"/> ■(4)
      </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>
  
  </phone:PhoneApplicationPage>
  • 「バーコードをスキャンする」サンプルプログラム

四国のSOHO。薬師寺国安(VBプログラマ)と、薬師寺聖(デザイナ、エンジニア)によるコラボレーション・ユニット。1997年6月、Dynamic HTMLとDirectAnimationの普及を目的として結成。共同開発やユニット名義での執筆活動を行う。XMLおよび.NETに関する著書や連載多数。最新刊は「Silverlight実践プログラミング」両名とも、Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。http://www.PROJECTKySS.NET/

連載バックナンバー

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています