Express Yourself

Semantic Zoom を簡単に試す - How to try Semantic Zoom easily

2012-11-15T02:58:00Z

連投です。C# + XAML 話になります。

Semantic Zoom を試したいなーと思って Semantic Zoom のタグ <SemanticZoom> を XAML に書いてみたところ、なんかうまく表示されない……という方がいらっしゃると聞きました。ということで簡単にやるコツを紹介します。

まずはグリッドテンプレートを作りましょう。GroupedItemsPage.xaml で試してみます。

以下のような Grid タグがあります。

 <Grid Style="{StaticResource LayoutRootStyle}">
 <Grid.RowDefinitions>
 <RowDefinition Height="140"/>
 <RowDefinition Height="*"/>
 </Grid.RowDefinitions>

この下に Semantic Zoom のタグを書いていきます。

 <SemanticZoom>
 <SemanticZoom.ZoomedInView> 
 </SemanticZoom.ZoomedInView>
 <SemanticZoom.ZoomedOutView>
 </SemanticZoom.ZoomedOutView> 
 </SemanticZoom>

青い波線が出て、値を入れるよう指示されますので、すぐ下にある GridView のタグをそのままコピーしてみましょう。

<SemanticZoom>
 <SemanticZoom.ZoomedInView>
 <GridView
 x:Name="itemGridView" ... 
 </GridView>
 </SemanticZoom.ZoomedInView>
 <SemanticZoom.ZoomedOutView>
 <GridView
 x:Name="itemGridView2" ... 
 </GridView>
 </SemanticZoom.ZoomedOutView>
 </SemanticZoom>

名前が重複するのでふたつめの itemGridView を itemGridView2 とでも直しておきます。

通常はここで実行してみると Semantic Zoom が出てくるはず……と思われると思うのですが、出てきません。

これには理由があって、最初の Grid の定義を見てみると、二つの Row が定義されています。そして今の状態だと Height が 140 に設定されてある、ページ上側の狭い Raw に Semantic Zoom が表示されていることになります。

これを解決するには、Semantic Zoom の RowSpan を設定するだけで OK です。(GridView もよく見るとそうしています)

なので、Semantic Zoom のタグを

<SemanticZoom Grid.RowSpan="2">

... </SemanticZoom>

と RowSpan を設定して実行すると Semantic Zoom がきちんと見えるようになります。

あとは ZoomedOut か ZoomedIn の GridView の ItemTemplace を換えればさらに分かりやすくなると思います。

ということで簡単に Semantic Zoom を試す Tips でした。

GridView の最初に画像などを挿入するには - How to insert XAML / images first in GridView

2012-11-15T02:42:16Z

C# + XAML で GridView を使っているとき、最初に画像などを張り付けたい場合があります。例えばこんな感じで。

（画像は Office.com から取ってきました。）

このような配置を簡単に実現するには、GridView の Header を使えば簡単に実現可能です。

 <GridView
 x:Name="itemGridView"
 AutomationProperties.AutomationId="ItemGridView"
 AutomationProperties.Name="Grouped Items"
 Grid.RowSpan="2"
 Padding="116,137,40,46"
 ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
 ItemTemplate="{StaticResource Standard250x250ItemTemplate}"
 SelectionMode="None"
 IsSwipeEnabled="false"
 IsItemClickEnabled="True"
 ItemClick="ItemView_ItemClick">
 <GridView.Header>
 <StackPanel>
 <Image Source="xxx" />
 </StackPanel>
 </GridView.Header>
...

と、GridView.Header の中に XAML を書いていくだけで、最初に画像を置くような、先ほどの配置が可能になります。

大きなニュースなどを最初に置きたい場合は、このように Header を使えば簡単に実現できます。

こんな感じで Tips 記事を連載していければなと思っています。

GridView のスクロールが右端まで到達したかどうかを判別する

2012-10-09T00:56:00Z

Windows Phone の場合、画面をスクロールして一番下まで到達したかどうかの判別を行うことができます。

同様のことを Windows 8 で行う場合、ScrollViewer の ViewChanged イベントを使って実装できます。

ただ、GridView を使う場合、ScrollViewer の ViewChanged を触るためには、以下の方法を使う必要があります。

Grid テンプレートを使う場合、まず GroupedItemPage.xaml を開いていただき、GridView (標準では x:name = ItemGridView となっています) の中にstyle=”{StaticResource GridViewStyle1}” と追記いただき、そのページのリソース部分に、以下のタグをご記入ください。

 <Style x:Key="GridViewStyle1" TargetType="GridView">
 <Setter Property="Padding" Value="0,0,0,10"/>
 <Setter Property="IsTabStop" Value="False"/>
 <Setter Property="TabNavigation" Value="Once"/>
 <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
 <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled"/>
 <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Enabled"/>
 <Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False"/>
 <Setter Property="ScrollViewer.VerticalScrollMode" Value="Disabled"/>
 <Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="False"/>
 <Setter Property="ScrollViewer.ZoomMode" Value="Disabled"/>
 <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False"/>
 <Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True"/>
 <Setter Property="IsSwipeEnabled" Value="True"/>
 <Setter Property="ItemContainerTransitions">
 <Setter.Value>
 <TransitionCollection>
 <AddDeleteThemeTransition/>
 <ContentThemeTransition/>
 <ReorderThemeTransition/>
 <EntranceThemeTransition IsStaggeringEnabled="False"/>
 </TransitionCollection>
 </Setter.Value>
 </Setter>
 <Setter Property="ItemsPanel">
 <Setter.Value>
 <ItemsPanelTemplate>
 <WrapGrid Orientation="Vertical"/>
 </ItemsPanelTemplate>
 </Setter.Value>
 </Setter>
 <Setter Property="Template">
 <Setter.Value>
 <ControlTemplate TargetType="GridView">
 <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
 <ScrollViewer x:Name="ScrollViewer" BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}" IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" TabNavigation="{TemplateBinding TabNavigation}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}" ViewChanged="OnViewChanged" >
 <ItemsPresenter HeaderTemplate="{TemplateBinding HeaderTemplate}" Header="{TemplateBinding Header}" HeaderTransitions="{TemplateBinding HeaderTransitions}" Padding="{TemplateBinding Padding}"/>
 </ScrollViewer>
 </Border>
 </ControlTemplate>
 </Setter.Value>
 </Setter>
 </Style>

これはGridViewのテンプレートを、ハイライトの部分だけ変更したものになります。

(GridView のテンプレートを確認するには、Blend を開いていただき、itemGridView を右クリックして [テンプレートの編集] -> [コピーして編集] で確認いただけます)

次に ViewChangedイベントを取って以下のように処理することで右端まで行ったかどうかを判別することができます。

 private async void OnViewChanged(object sender, ScrollViewerViewChangedEventArgs e)
 {
 var sv = GetChild<ScrollViewer>(itemGridView);
 
 if (sv != null)
 {
 var horizontalOffset = sv.HorizontalOffset;
 var maxhorizontalOffset = sv.ExtentWidth - sv.ViewportWidth;
 
 if (maxhorizontalOffset < 0 || horizontalOffset == maxhorizontalOffset)
 {
 pageTitle.Text = "右端まで行きました";
 }
 }
 }
 
 private T GetChild<T>(DependencyObject obj) where T : FrameworkElement
 {
 var count = VisualTreeHelper.GetChildrenCount(obj);
 for (int i = 0; i < count; i++)
 {
 var child = VisualTreeHelper.GetChild(obj, i);
 if (child is T)
 {
 return child as T;
 }
 
 var result = GetChild<T>(child);
 if (result != null)
 {
 return result;
 }
 }
 return null;
 }

以上です。

Windows 8 のインストールのためにパーティションを切る (How to install Windows 8 by creating a new partition)

2012-10-03T06:35:00Z

こんにちは。

Windows 8、皆さんインストールされていますでしょうか。「まだ」という方のために、パーティションを切ってインストールする方法を解説させていただきます。OS インストール済みのハードディスクからパーティションを新たに作成することによって、現行の OS と環境を維持したまま、新たなパーティションに Windows 8 をインストールできるようになります。

今回の記事ではパーティションの切り方を説明させていただきます。またこの方法は Windows Vista 以降の Windows で可能です。スクリーンショットは Windows 7 で撮っています。

1. Windows キーを押し、スタートメニューを出して、「パーティション」と入力します。すると「ハードディスクパーティションの作成とフォーマット」というプログラムが出てきますので、クリックします。

2. [ディスクの管理] が起動します。

3. C ドライブを右クリックし、[ボリュームの縮小] を選択します。

4. ウィザードが起動します。縮小後のサイズを指定します。現在の半分以下にはできないので、ご注意ください。またできるだけ大きめのサイズにしてください。少なくとも 20GB は確保する必要があります。

5. サイズが決まれば [縮小] ボタンを押します。縮小作業には少し時間がかかります。

6. すると [未割当の領域] が作成されます。

7. 右クリックして [新しいシンプルボリューム] を選択します。

8. 新しいシンプルボリュームウィザードが開始されますので、[次へ] をクリックします。

9. ボリュームサイズを指定します。最大にしておいてください。[次へ] をクリックします。

10. ドライブを割り当てます。E: など、標準で指定されているものにしてください。[次へ] をクリックします。

11. ボリュームをフォーマットします。[NTFS]、[規定値] になっていることを確認して、[クイックフォーマット] のチェックボックスにチェックが入っていることを確認してください。[次へ] をクリックします。

12. ウィザードが完了します。[完了] ボタンを押します。

13. フォーマットが完了すると元の画面に戻ります。

あとは再起動して、新しく作ったドライブに Windows 8 をインストールすれば OK です。

本ブログの Windows 8 アプリが公開されました

2012-09-25T16:44:00Z

このブログ Express Yourself を表示する Widows 8 アプリが公開されました。

http://apps.microsoft.com/webpdp/ja-JP/app/express-yourself/0131c5bb-0a19-48c4-ad96-99d52a442496

このアプリケーションは、Windows 8 アプリ開発体験テンプレートの「NewsReader テンプレート XAML/C# 用 Version 1.4」を使って作りました。（皆様の作成の際には、最新版のテンプレートをご利用ください）

本アプリケーションのサポートや問い合わせは、こちらのエントリのコメント欄に書いていただけますと幸いです。

今後アップデートしていければと思いますので、何卒宜しくお願い申し上げます。

予定

2012-09-25T05:07:08Z

2 年ぶりのブログの投稿で恐縮です。

2012 年 7 月から Windows 8 担当になりました。

今後本ブログでは Windows 8 に関する情報を書いていきたいと思います。取り急ぎでは、開発の際に参考になる本などを紹介できればと考えています。

宜しくお願い致します。

Visual Studio 2010 いよいよ登場 ! /未来はコードで創られていく/

2010-04-20T16:58:00Z

Visual Studio 2010 日本語版が完成し、明日 21 日より MSDN Subscription 会員様への先行提供が開始となります。

(21日9時追記：先ほど公開されました)

MSDN Subscription 会員の皆様はぜひこの機会に Visual Studio 2010 をいち早くダウンロードいただき、さらに進化した開発ツールをご堪能ください。

Visual Studio 2010 は、設計から、開発、テスト、配置までアプリケーションライフサイクルを広範囲にカバーし、品質の高いアプリケーションを、高い生産性を保ちながら構築するための機能を提供する最新の開発ツールです。
最新のプラットフォームであるクラウド開発や Windows Phone 開発に対応するだけではなく、アプリケーションのデバッグ実行を履歴として記録し、デバッグ中に状態をさかのぼって確認できる IntelliTrace や UML 準拠のモデル図、アーキテクチャ設計を支援する各種モデル図の描画機能など、開発者の皆様の生産性向上を支援する様々な新機能が搭載されています。
Visual Studio 2010 の最新機能の概要は Visual Studio の Web サイトで動画付きでご紹介していますので、ぜひご覧ください。

Visual Studio 2010 日本語版の評価版、および無償版の Visual Studio 2010 Express の一般公開は 2010 年 4 月 28 日 (水) を予定しています。また、パッケージの販売は 6 月 18 日 (金) の予定です。

【関連情報】

Windows Azure のビジネス情報を紹介するセッションと資料の公開。Tech Days 2010 のセッションを無償で提供開始です。

2010-04-06T06:49:00Z

Tech Days 2010 Japan (2/23, 24) のセッション資料が、すべての皆様に無償で入手いただけるようになりました。

Windows Azure の情報が満載ですので、ぜひ技術者の皆様はこれを機会に Tech Days 2010 のおさらいや、Windows Azure に関する技術の学習にお役立てください。

http://www.microsoft.com/japan/events/techdays/2010/

私は Windows Azure のビジネスセッションを担当しました。Azure トラックではなく、タブの一番右側の「スポンサーランチトラック」に入っています（ランチの時間帯にやっていました）。Windows Azure のビジネス面をまとめ上げ、こうしてセッションという形でみなさんに提供できて本当に良かったです。

LS-205

開発者やアーキテクトにも知っておいてもらいたい Windows Azure の価格、SLA、ビジネス～すぐそこにあるクラウドへの準備として～

実はセッション中にしかお見せできない資料があり、その部分については割愛させていただいています。いろいろな数字を使った説明部分に関してはセッションにご参加された方だけの特典ということでご容赦いただけますと幸いです。

それでは、マイクロソフトのクラウドをぜひお楽しみください。

無償の Windows Azure のセミナー、全国各地で開催 - Let's Start Cloud Computing

2010-03-18T08:44:00Z

関田さんのブログからのコピペになりますが…。

Windows Azure のセミナーを全国 7 都市で行います。東京の Tech Days にご参加できなかった皆様、ぜひこのセミナーを生かして、Windows Azure と Tech Days のエッセンスをつかんでください。

日程は以下の通りです。

2010年3月11日(木) 大阪終了いたしました

2010年4月20日(火) 広島詳細・お申し込み

2010年5月19日(水) 仙台詳細・お申し込み

2010年5月20日(木) 福岡詳細・お申し込み

2010年5月25日(火) 高崎詳細・お申し込み

2010年5月31日(月) 札幌詳細・お申し込み

2010年6月1日(火) 名古屋詳細・お申し込み

時間は共通で、13:30～17:00（13:00受付開始）です。詳細はWindows Azure で始めるクラウドコンピューティング～ Windows Azure 概要と開発手法～のページまで。

Visual Studio 2010 ラウンチツアー、全国行脚の Future Technology Days へぜひご参加ください

2010-03-18T08:32:00Z

Visual Studio 2010 のリリースが近づいてきております。（最近は Visual Studio 系の仕事ばかりです。）

Visual Studio 2010 では Visual Studio Test Professional などの新しい製品ラインナップも取りそろえ、さらに強力になったアプリケーション開発環境になっています。ぜひご期待ください。

おかげさまで 4 月 13 日のラウンチイベントはもうそろそろ満席です。まだ登録されてない方は本当に今すぐご登録ください。（※満席になったため、登録を締め切らせていただきました。多数のご応募、ありがとうございました。）

もちろんイベントは東京だけではありません。

以下の日程で全国各所で Visual Studio 2010 のセミナーが開催されます。こちらも無償となっておりますので、ぜひ皆様ご参加ください。

大阪：2010 年 4 月 15 日 ( 木 )

名古屋：2010 年 4 月 23 日 ( 金 )

札幌：2010 年 5 月 10 日 ( 月 )

九州：2010 年 5 月 14 日 ( 金 )

詳細・登録は Visual Studio 2010 ラウンチツアーのページをご覧ください。