Archive for the ‘Windows 8’ Category

Windows Phone SDK 7.1 を Windows 8 Release Previewにインストールする方法

2012年7月31日

Windows Phone SDK 7.1 をダウンロードします。

Windows Phone SDK には以下が同梱されています。

  • Microsoft Visual Studio 2010 Express for Windows Phone
  • Windows Phone Emulator
  • Windows Phone SDK 7.1 Assemblies
  • Silverlight 4 SDK and DRT
  • Windows Phone SDK 7.1 Extensions for XNA Game Studio 4.0
  • Microsoft Expression Blend SDK for Windows Phone 7
  • Microsoft Expression Blend SDK for Windows Phone OS 7.1
  • WCF Data Services Client for Windows Phone
  • Microsoft Advertising SDK for Windows Phone

インストールを実行すると、Windows Phone SDK 7.1 に対して、[プログラム互換性アシスタント]が表示され、互換性に問題があるという警告ダイアログが表示されます。

image

ここで、[オンラインでヘルプを表示する]を選択すると、Aaron Stebner’s WebLog が表示され、英文ですが、ワークアラウンドが説明されています。ただし、XNA を中心とした説明になっています。XNA Game Studio が必要ない場合は、次の手順でWindows 8 RPにWindows Phone SDK 7.1 をインストール可能です。

[ヘルプ情報を使用せずにプログラムを実行する] を選択します。すると、また[プログラム互換性アシスタント]が表示されます。そこで、もう一度、[ヘルプ情報を使用せずにプルグラムを実行する] を選択します。

すると、セットアップが開始し、次の[ライセンス条項]が表示されます。

image

[同意する]を選択すると、インストールが始まります。

image

途中まで進んだところで、[XNA Game Studio 4.0 and below Microsoft] に対して、、[プログラム互換性アシスタント]が表示され、互換性に問題があるという警告ダイアログが表示されます。

image

ここで、[ヘルプ情報を使用せずにプログラムを実行する] を選択します。

インストールを継続すると、次の[Windows Phone SDK 7.1 – 日本語セットアップ]ダイアログが表示され、[修復または再インストールをもう一度実行して下さい。]というメッセージが表示されます。失敗したコンポーネントは、つぎの3つです。

  • Microsoft XNA Game Studio 4.0 Refresh
  • Windows Phone SDK 7.1 Extensions for XNA Game Studio 4.0
  • XNA Game Studio 4.0 Refresh 言語パック

image

[終了]ボタンを押すと再起動が要求されます。

image

再起動すると、[Microsoft Visual Studio 2010 Express for Windows Phone] を利用できるようになります。

しかし、簡単な Windows Phone アプリをビルドすると、次のエラーが発生します。

image

エラー    1    ターゲット “GetCopyToOutputDirectoryContentProjectItems” はプロジェクト内に存在しません。    PhoneApp1

この問題を回避するには、Aaron Stebner’s WebLog にしたがって、まず、Games for Windows Marketplace を http://www.xbox.com/en-US/LIVE/PC/DownloadClient よりインストールします。

image

次に、もう一度、Windows Phone SDK 7.1 のインストーラを起動し、[修復またはインストール]を選択します。

image

すると、次回はインストールが成功します。

image

そこで、再度簡単な Windows Phone アプリをビルドすると、今回はビルドが成功します。しかし、エミュレータで実行すると、次のエラーが発生します。

image

この回避策は、Windows Phone SDK 7.1.1 更新プログラム (Japanese) をインストールします。

image

以上で、Windows 8 RP 上で、Windows Phone 7.5の開発が可能になります。

広告

Windows 8 でListView と GridView

2012年7月1日

環境 Windows 8 RP + Visual Studio 2012 RC

クイック スタート: ListView コントロールと GridView コントロールの追加

 リストまたはグリッド内の項目をグループ化する方法

デフォルトでは、IsSourceGrouped=”true” となっていて、AllGroups の中身に対して列挙されます。

<CollectionViewSource
    x:Name=”groupedItemsViewSource”
    Source=”{Binding Groups}”
    IsSourceGrouped=”true”
    ItemsPath=”TopItems”
    d:Source=”{Binding AllGroups, Source={d:DesignInstance Type=data:RssDataSource, IsDesignTimeCreatable=True}}”/>

image

これを一段上のAllGroup に対して列挙したい場合は、IsSourceGrouped を false に設定します。

protected override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState)
{
    var sampleDataGroups = RssDataSource.GetGroups(“AllGroups”);
    this.DefaultViewModel[“Groups”] = sampleDataGroups;
}

<CollectionViewSource
    x:Name=”groupedItemsViewSource”
    Source=”{Binding Groups}”
    IsSourceGrouped=”false”
    ItemsPath=”TopItems”
    d:Source=”{Binding AllGroups, Source={d:DesignInstance Type=data:RssDataSource, IsDesignTimeCreatable=True}}”/>

image

難しい・・・

Windows 8 Button Style

2012年7月1日

Windows 8 RP + Visual Studio 2012 RC

XAMLの例

<Button x:Name=”backButton” Click=”GoBack” IsEnabled=”{Binding Frame.CanGoBack, ElementName=pageRoot}” Style=”{StaticResource BackButtonStyle}”/>

StandardStyles.xaml に定義されている Button Style の StaticResource です。

  • TextButtonStyle
  • TextRadioButtonStyle
  • AppBarButtonStyle
  • SkipBackAppBarButtonStyle
  • PlayAppBarButtonStyle
  • PauseAppBarButtonStyle
  • EditAppBarButtonStyle
  • SaveAppBarButtonStyle
  • DeleteAppBarButtonStyle
  • DiscardAppBarButtonStyle
  • RemoveAppBarButtonStyle
  • AddAppBarButtonStyle
  • NoAppBarButtonStyle
  • YesAppBarButtonStyle
  • MoreAppBarButtonStyle
  • RedoAppBarButtonStyle
  • UndoAppBarButtonStyle
  • HomeAppBarButtonStyle
  • OutAppBarButtonStyle
  • NextAppBarButtonStyle
  • PreviousAppBarButtonStyle
  • FavoriteAppBarButtonStyle
  • PhotoAppBarButtonStyle
  • SettingsAppBarButtonStyle
  • VideoAppBarButtonStyle
  • RefreshAppBarButtonStyle
  • DownloadAppBarButtonStyle
  • SearchAppBarButtonStyle
  • HelpAppBarButtonStyle
  • UploadAppBarButtonStyle
  • PinAppBarButtonStyle
  • UnpinAppBarButtonStyle
  • BackButtonStyle

image

image

image

image

image

WebView で、YouTube のフルスクリーンが再生できない

2012年6月30日

環境 Windows 8 Release Preview + Visual Studio 2012 RC

パターン1:

http://www.youtube.com/watch?v=QN6FxatiLEU&feature=youtube_gdata

これは、WebView で、表示できる。また、ie10、メトロスタイルブラウザーでも表示できる。

パターン2:

http://www.youtube.com/v/QN6FxatiLEU

これだと、ie10では表示できるが、WebView 、メトロスタイルブラウザーでは、真っ白になって表示できません。orz

パターン2は、おそらく直接Flash を開こうとするためではないかと思いますが、原因、回避策は現時点でわかりません。

YouTube で HTML5 を有効に設定する方法はこちら

http://www.youtube.com/html5

Windows 8 でブラウザーを起動する

2012年6月28日

Windows RT でだいぶ変わってしまったので、どうすればいいのか、戸惑いますね。

async void ItemView_ItemClick(object sender, ItemClickEventArgs e)
{           
    var itemId = ((RssDataItem)e.ClickedItem).Content;
    await Windows.System.Launcher.LaunchUriAsync(new Uri(itemId));
}

ObservableSyndicationCollection

2012年6月24日

 

Syndication.cs

using System;
using System.Collections.ObjectModel;
using System.Threading.Tasks;
using Windows.Web.Syndication;

namespace uchukamen
{
    public class ObservableSyndicationCollection : ObservableCollection<SyndicationItem>
    {

        public async Task Get(string urlStr)
        {
            SyndicationClient client = new SyndicationClient();
            client.BypassCacheOnRetrieve = true;

            // Although most HTTP servers do not require User-Agent header, others will reject the request or return
            // a different response if this header is missing. Use SetRequestHeader() to add custom headers.
            client.SetRequestHeader(“User-Agent”, “Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0)”);

            Uri uri = new Uri(urlStr);

            SyndicationFeed currentFeed = await client.RetrieveFeedAsync(uri);

            foreach (SyndicationItem item in currentFeed.Items)
            {
                this.Add(item);
            }
        }
    }
}

C# でバインド

uchukamen.ObservableSyndicationCollection synd = new uchukamen.ObservableSyndicationCollection();
await synd.Get(“”);
this.itemGridView.ItemsSource = synd;


 

DataTemplate とStaticResource のBind

2012年6月16日

環境: Windows 8 Release Preview Build 8400 + Visual Studio 2012 RC

image

詳細は、DataTemplate class を参照してください。

<Grid Style=”{StaticResource LayoutRootStyle}”>
    <Grid.Resources>
        <src:Customers x:Key=”customers”/>
        <DataTemplate x:Key=”MyDataTemplate“>
            <Grid HorizontalAlignment=”Left” Width=”250″ Height=”150″>
                <Border Background=”{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}”>
                    <Image Source=”{Binding Image}” Stretch=”UniformToFill”/>
                </Border>
                <StackPanel VerticalAlignment=”Bottom” Background=”{StaticResource ListViewItemOverlayBackgroundThemeBrush}”>
                    <TextBlock Text=”{Binding FirstName}” Foreground=”{StaticResource ListViewItemOverlayForegroundThemeBrush}” Style=”{StaticResource TitleTextStyle}” Height=”60″ Margin=”15,0,15,0″/>
                    <TextBlock Text=”{Binding LastName}” Foreground=”{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}” Style=”{StaticResource CaptionTextStyle}” TextWrapping=”NoWrap” Margin=”15,0,15,10″/>
                    <TextBlock Text=”{Binding Address}” Foreground=”{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}” Style=”{StaticResource CaptionTextStyle}” TextWrapping=”NoWrap” Margin=”15,0,15,10″/>
                </StackPanel>
            </Grid>
        </DataTemplate>
    </Grid.Resources>

    <Grid.RowDefinitions>
        <RowDefinition Height=”140″/>
        <RowDefinition Height=”*”/>
    </Grid.RowDefinitions>

    <!– [戻る] ボタンおよびページ タイトル–>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width=”Auto”/>
            <ColumnDefinition Width=”*”/>
        </Grid.ColumnDefinitions>
        <Button x:Name=”backButton” Click=”GoBack” IsEnabled=”{Binding Frame.CanGoBack, ElementName=pageRoot}” Style=”{StaticResource BackButtonStyle}”/>
        <TextBlock x:Name=”pageTitle” Text=”{StaticResource AppName}” Grid.Column=”1″ Style=”{StaticResource PageHeaderTextStyle}”/>
    </Grid>

    <GridView
        x:Name=”itemGridView”
        AutomationProperties.AutomationId=”ItemGridView”
        AutomationProperties.Name=”Grouped Items”
        Margin=”0,137,0,0″
        Padding=”0,0,0,0″
        HorizontalAlignment=”Left”
        Width=”300″
        ItemsSource=”{Binding Source={StaticResource customers}}”
        ItemTemplate=”{StaticResource MyDataTemplate}”
        ScrollViewer.VerticalScrollBarVisibility=”Auto”
        SelectionMode=”None”
        IsItemClickEnabled=”True”
        ItemClick=”ItemView_ItemClick” Grid.RowSpan=”2″>

        <GridView.ItemsPanel>
            <ItemsPanelTemplate>                       
                <VirtualizingStackPanel Orientation=”Vertical”/>
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>
        <GridView.GroupStyle>
            <GroupStyle>
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                        <Grid Margin=”1,0,0,6″>
                            <Button
                                AutomationProperties.Name=”Group Title”
                                Content=”{Binding Title}”
                                Click=”Header_Click”
                                Style=”{StaticResource TextButtonStyle}”/>
                        </Grid>
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>
                <GroupStyle.Panel>
                    <ItemsPanelTemplate>
                        <VariableSizedWrapGrid Orientation=”Vertical” Margin=”0,0,80,0″/>
                    </ItemsPanelTemplate>
                </GroupStyle.Panel>
            </GroupStyle>
        </GridView.GroupStyle>
    </GridView>


</Grid>

Customers.cs

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace App5
{
    public class Customer
    {
        public String FirstName { get; set; }
        public String LastName { get; set; }
        public String Address { get; set; }

        public Customer(String firstName, String lastName, String address)
        {
            this.FirstName = firstName;
            this.LastName = lastName;
            this.Address = address;
        }
    }

    public class Customers : ObservableCollection<Customer>
    {
        public Customers()
        {
            Add(new Customer(“Michael”, “Anderberg”,
                    “12 North Third Street, Apartment 45”));
            Add(new Customer(“Chris”, “Ashton”,
                    “34 West Fifth Street, Apartment 67”));
            Add(new Customer(“Cassie”, “Hicks”,
                    “56 East Seventh Street, Apartment 89”));
            Add(new Customer(“Guido”, “Pica”,
                    “78 South Ninth Street, Apartment 10”));
            Add(new Customer(“Guido”, “Pica”,
                    “78 South Ninth Street, Apartment 10”));
            Add(new Customer(“Guido”, “Pica”,
                    “78 South Ninth Street, Apartment 10”));
            Add(new Customer(“Guido”, “Pica”,
                    “78 South Ninth Street, Apartment 10”));
            Add(new Customer(“Guido”, “Pica”,
                    “78 South Ninth Street, Apartment 10”));
            Add(new Customer(“Guido”, “Pica”,
                    “78 South Ninth Street, Apartment 10”));
            Add(new Customer(“Guido”, “Pica”,
                    “78 South Ninth Street, Apartment 10”));
        }
    }
}

Standard Templates

2012年6月16日

環境: Windows 8 Release Preview Build 8400 + Visual Studio 2012 RC

標準でStandardStylesに定義されているテンプレートです。

Standard250x250ItemTemplate

image

Standard500x130ItemTemplate

image

Standard130ItemTemplate

image

Standard80ItemTemplate

image

StandardSmallIcon300x70ItemTemplate

image

StandardSmallIcon70ItemTemplate

image

StandardFileWithTooltip190x130ItemTemplate

image

Windows 8 ファイル リソースを読み込む方法

2012年6月16日

環境: Windows 8 Release Preview Build 8400 + Visual Studio 2012 RC

次に説明があります。

ファイル リソースを読み込む方法 (C#/VB/C++ と XAML を使った Metro スタイル アプリ) 

ケース
同じパッケージ内 <Image Source=”images/logo.png” />
同じパッケージ内に格納された、クラス ライブラリからのファイル <Image Source=”/ClassLibraryName/images/logo.png” />
Application State に格納されたファイル <Image Source=”ms-appdata:///local/Relative/File/Path” />
別のパッケージからリソースを読み込む場合 <Image Source=”ms-appx://PackageName/Relative/File/Path” />
ドキュメントと同じスキームを使う場合 <Image Source=”//PackageName/Relative/File/Path” />
識別子から URI スキーム(ms-appx または ms-appx-web)を削除します。
C# コード内からリソースを読み込む場合

var file = Windows.Storage.StorageFile.CreateFromApplicationURIAsync
    (new Windows.Foundation.Uri(“ms-appx://PackageName/Relative/File/Path”));

Windows 8 タイル

2012年6月16日

環境: Windows 8 Release Preview Build 8400 + Visual Studio 2012 RC

タイルに画像を表示する方法

imageimage

これらの画像の設定は、”Package.appxmanifest” ファイルから、ロゴ (150 x 150 ピクセル)、ワイドロゴ(310 x 150 ピクセル)で設定します。

image

タイルに文字を表示する方法

image

タイルに文字を表示するためには、NotificationExtensions を組み込む必要があります。NotificationExtensions の入手方法は、次のサンプルパックをダウンロードします。このサンプルには100以上のサンプルコードが提供されています。

Windows 8 Release Preview Metro style app samples – C#, VB.NET, C++, JavaScript

この中の “App tiles and badges sample” というサンプルを展開します。このプロジェクトの中に、NotificationsExtensions が含まれています。この中から、NotificationsExtensions.winmd をプロジェクトに配置します。配置方法は、次のURLで解説されています。

NotificationsExtensions を使ったバッジ、タイル、トースト テンプレートの設定 (JavaScript と HTML を使った Metro スタイル アプリ)

image

 

image

コードは次の通り。
ITileWideText03 tileContent =TileContentFactory.CreateTileWideText03();

tileContent.TextHeadingWrap.Text = “Hello World! Uchukamen.com”;

ITileSquareText04 squareContent = TileContentFactory.CreateTileSquareText04();
squareContent.TextBodyWrap.Text = “Hello World! Uchukamen.com Square”;
tileContent.SquareContent = squareContent;

TileUpdateManager.CreateTileUpdaterForApplication().Update(tileContent.CreateNotification());

ファイルからタイルの画像を設定する方法

ITileWideImageAndText01 tileContent = TileContentFactory.CreateTileWideImageAndText01();

tileContent.TextCaptionWrap.Text = “Hello World! Uchukamen.com”;
tileContent.Image.Src = “ms-appx:///assets/uchukamen310x150.png”;
tileContent.Image.Alt = “uchukamen310x150”;

ITileSquareImage squareContent = TileContentFactory.CreateTileSquareImage();
tileContent.TextCaptionWrap.Text = “Hello World! Uchukamen.com Square”;
squareContent.Image.Src = “ms-appx:///assets/uchukamen150.png”;
squareContent.Image.Alt = “uchukamen150”;
tileContent.SquareContent = squareContent;

TileUpdateManager.CreateTileUpdaterForApplication().Update(tileContent.CreateNotification());

バッジを表示する方法

バッジとは、次の図のようなタイルの右下の小さな数字で、0-99までの数字を表示できます。

image

コードは次の通りです。

UpdateBadgeWithNumber(99);

void UpdateBadgeWithNumber(int number)
{
    BadgeNumericNotificationContent badgeContent = new BadgeNumericNotificationContent((uint)number);

    BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(badgeContent.CreateNotification());

}

背景色は、”Package.appxmanifest” のタイルの背景色で設定します。

image

ちなみに、バッジに表示できるのは0-99 までですが、99を超えると 99+と表示されるんですね。

image

マイナスや、小数点以下は、BadgeNumericNotificationContentの引数がunsinged int なので、そもそも渡すことができません。