画像ビューワを作ってみよう

ということで、基礎的なことばかりやってたのではモチベーションも上がらないので、ここらへんで画像ビューワでもさくっと作ってみようと思います。

まず、プロジェクトを作ります

私の環境で新規作成するとWindowsPhoneApplication9という名前でした。

次に、画面を作ります

画面のイメージとしては、画像を表示する領域があって、そこの場所以外をタップすると画像を選択するダイアログが出てきて、画像を選ぶと画面の真ん中にでで〜んと選んだ画像が表示されるイメージです。

画面は、ScrollViewerとImageコントロールを使います。

<phone:PhoneApplicationPage 
    x:Class="WindowsPhoneApplication9.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="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True" 
    ManipulationStarted="PhoneApplicationPage_ManipulationStarted">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <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="たっぷ Please" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <!-- ここに画像が表示される 水平スクロールと垂直スクロールを必要に応じて表示する -->
            <ScrollViewer Name="scrollViewer1" ManipulationStarted="scrollViewer1_ManipulationStarted" HorizontalScrollBarVisibility="Auto" Background="{StaticResource PhoneAccentBrush}">
                <Image Name="image1" Stretch="None" />
            </ScrollViewer>
        </Grid>
    </Grid>
</phone:PhoneApplicationPage>

背景が真っ黒だと変化がなかったので、PhoneAccentBrushというのを背景に指定します。Visual Studioのプロパティ画面で以下のように選ぶことが出来るので覚えてなくても問題ありません。

コードビハインドを作ります

あとは、タッチのイベントを処理します。Taskというものを使うとアプリの外部のデータをとってきたり、何か外部の処理を呼び出したりできるものがあるみたいです。今回はPhotoChooserTaskというものを使って画像を選ぶようにしてます。

namespace WindowsPhoneApplication9
{
    using System.Windows.Input;
    using System.Windows.Media.Imaging;
    using Microsoft.Phone.Controls;
    using Microsoft.Phone.Tasks;

    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
        }

        private void PhoneApplicationPage_ManipulationStarted(object sender, ManipulationStartedEventArgs e)
        {
            // Microsoft.Phone.Tasks名前空間に色々外部と連携するための
            // 色々なものがつまってます。
            // 今回は、電話内の画像を選ぶタスク
            var task = new PhotoChooserTask();

            // 画像が選ばれるとCompletedイベントが呼ばれる
            task.Completed += (s, a) =>
                {
                    // 処理がOKだったら
                    if (a.TaskResult == TaskResult.OK)
                    {
                        // 画像を読み込んで
                        var image = new BitmapImage();
                        image.SetSource(a.ChosenPhoto);

                        // 画面に画像を表示する
                        image1.Source = image;
                    }
                };
            task.Show();

            // タッチ関連の処理完了
            e.Complete();
            e.Handled = true;
        }

        private void scrollViewer1_ManipulationStarted(object sender, ManipulationStartedEventArgs e)
        {
            // ScrollViewerが押された時には、その下のコントロールには処理をやらせない
            e.Handled = true;
        }
    }
}