バーコードをスキャンする[2ページ目]

書き出される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>

人気記事トップ10

人気記事ランキングをもっと見る

企画広告も役立つ情報バッチリ! Sponsored

ClickHouse Cloudが実現した広告運用SaaS「ATOM」のデータ基盤革新、パフォーマンスを向上しながら、運用負荷とコストを削減 11月11日 6:20 AIで開発が加速する時代、品質保証はどう変わる? Tricentisが示すAIエージェント活用の実像 11月9日 6:45 悪用までの猶予が「1分」に迫るフロンティアAI時代に開発と本番を貫く脆弱性管理が必要 10月29日 8:30 欧州CRA対応とSBOM運用。AI生成コードのOSS混入問題の対策とは ――スニペット単位で検出する「FossID」「Insignary Clarity」によるSBOM運用 9月16日 6:40 PostgreSQLからTiDBへ、稼働中SaaSで進める段階的DB移行の実践と再設計への展望 9月7日 6:30 機能安全開発におけるGoogleTestの活用を支援!「Parasoft C/C++test CT」で実現する効率化&AI連携 4月14日 6:30 【CNDW2025】Grafanaが明かす「オブザーバビリティの哲学」ー最小限の労力で実用的なインサイトを得るには 1月23日 6:30 【CNDW2025】プロダクト急増に備える基盤刷新 ーウェルスナビがECSからEKSへの移行で得た知見とは 1月15日 6:30 【CNDW2025】250環境を5人で運用、構築時間は30分に ーKINTOテクノロジーズが語るインフラ基盤組織の作り方 2025年12月18日 6:30 新たな自動化で熱視線! AIエージェントの「推論能力」を支える2つのコンポーネントとは? 2025年11月28日 6:30