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

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

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

（１）<Image.RenderTransform>プロパティ要素内に、<CompositeTransform> 要素を配置します。CompositeTransformクラスは、1 つのオブジェクトに複数の異なる変換を適用することができるクラスです。CenterXとCenterYプロパティに、読み取られたバーコードの画像を表示する<Image>要素のWidthとHeightの約半分のサイズを指定します。CenterXプロパティでは、CompositeTransform で指定された、すべての変換の中心点の x 座標を設定します。CenterYプロパティでは、CompositeTransform で指定された、すべての変換の中心点の y 座標を設定します。回転を表すRotationに90を指定します。カメラを縦向きで撮った画像もデフォルトでは横向きに表示されるため、90度回転して縦向きに表示されるようにしています。
（２）<Rectangle.Fill>プロパティ要素内に<VideoBrush>要素を配置し、x:NameにmyVideoBrushと指定します。<VideoBrush>要素は、ビデオ コンテンツで領域を塗りつぶす要素です。
（３）<Rectangle.RenderTransform>プロパティ要素内に、<CompositeTransform> 要素を配置します。CompositeTransformクラスは、1 つのオブジェクトに複数の異なる変換を適用することができるクラスです。CenterXとCenterYプロパティに、被写体の表示される<Rectangle>要素のWidthとHeightの約半分のサイズを指定します。回転を表すRotationに90を指定します。カメラを縦向きで被写体を写しても、デフォルトでは横向きに表示されるため、90度回転して縦向きに表示されるようにしています。
（４）<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>　■（１）
              <CompositeTransform  Rotation="90" CenterY="173" CenterX="183"/>　■（１）
            </Image.RenderTransform>　■（１）
          </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>　■（２）
          <VideoBrush x:Name="myVideoBrush" />　■（２）
        </Rectangle.Fill>　■（２）
        <Rectangle.RenderTransform>　■（３）
          <CompositeTransform Rotation="90" CenterX="219" CenterY="212" />　■（３）
        </Rectangle.RenderTransform>　■（３）
      </Rectangle>
    </Grid>
    <phone:PhoneApplicationPage.ApplicationBar>
      <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
        <shell:ApplicationBarIconButton IconUri="/Image/refresh.png" Text="リフレッシュ" Click="Page_Refresh"/>　■（４）
      </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>
  
  </phone:PhoneApplicationPage>