日本地図パズル

こんにちは，いまにゅーです

以前「日本地図パズル」というアプリを作成したので，ご紹介します

工夫した点としては，２つ
・ピースを移動させるときに，半透明のピースを表示する
・BGMを付ける


まず一つ目


ピースを移動させるときに半透明のピースを表示させるところ
これは，StackPanelからGridへ移動する方法です．
まず，XAML内に，Popupを作ります．OverlayPopupという名前にしましょう
Childには，半透明で表示させたいコントロールを指定します．
今回は，ピースが色々複雑なので，ContentControlを作成し，テンプレートを編集しました．
これを，OverlayContentControlとします．

<Popup x:Name="OverlayPopup" Opacity="0.5" IsHitTestVisible="False">
    <ContentControl x:Name="OverlayContentControl" Style="{StaticResource AichiStyle}"/>
    <Popup.RenderTransform>
        <TranslateTransform />
    </Popup.RenderTransform>
</Popup>

次に，パーツに対してManipulationStarted, ManipulationDelta，ManipulationCompletedイベントを付けます．
ManipulationStartedには，

void _ManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e)
{
    // OverlayContentControlにsender情報からStyleやWidthやHeightなどを設定
    // (省略)
    var point = (sender as UIElement).TransformToVisual(this).TransformPoint(e.Position);
    var trans = OverlayPopup.RenderTransform as TranslateTransform;
    trans.X = point.X - (OverlayContentControl.Width / 2);
    trans.Y = point.Y - (OverlayContentControl.Height / 2);
    OverlayPopup.IsOpen = true;
}

ManipulationDeltaには，

void _ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
    var point = (sender as UIElement).TransformToVisual(this).TransformPoint(e.Position);
    var trans = OverlayPopup.RenderTransform as TranslateTransform;
    trans.X = point.X - (OverlayContentControl.Width / 2);
    trans.Y = point.Y - (OverlayContentControl.Height / 2);
}

ManipulationCompletedには，

void _ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
{
    OverlayPopup.IsOpen = false;
    var point = (sender as UIElement).TransformToVisual(TargetGrid).TransformPoint(e.Position);
    // TargetGridとは，ドロップ先のGrid
    // pointをもとに，Marginで設置先を指定
}

あとは，StackPanelから移動させたアイテムを削除するなどして完了です！


２つ目は，BGMを付けるです．


これは，勉強するのが楽しくなるようにと考えつけたものです．
まず，バックグラウンドでずっと再生するものは，XAML内に

<MediaElement x:Name="game_bgm" AudioCategory="BackgroundCapableMedia" AutoPlay="True" IsLooping="True" Source="sounds/game_bgm.mp3" />

と記述することで，ページがロードされた時点で，ループ再生が開始されます．
また，ピースが正しい位置に当てはまった時に鳴らす音は，

MediaElement correct_se = new MediaElement();
var package = Windows.ApplicationModel.Package.Current;
// インストール先を指定
var installedLocation = package.InstalledLocation;
// インストール先から音源を取得する
var storageFile = await installedLocation.GetFileAsync("sounds\\correct_se.mp3");
if (storageFile != null)
{
    var stream = await storageFile.OpenAsync(Windows.Storage.FileAccessMode.Read);
    correct_se = new MediaElement();
    correct_se.AudioCategory = AudioCategory.SoundEffects;
    correct_se.AutoPlay = false;
    correct_se.SetSource(stream, storageFile.ContentType);
}
correct_se.Play();

これで再生することができます．