日別アーカイブ: 2008年3月30日

Silverlight Tutorial Part 6: Using User Controls to Implement Master/Detail Scenarios

コメントを残す

ScottさんのTutorialもようやく6番目まできました。

Silverlight Tutorial Part 6: Using User Controls to Implement Master/Detail Scenarios
http://weblogs.asp.net/scottgu/pages/silverlight-tutorial-part-6-using-user-controls-to-implement-master-detail-scenarios.aspx

今回はちょっとしたダイアログを出して詳細を表示するんですね。よくよく見ていると、ダイアログを出すというよりは表面にあらかじめパネルを用意しておいて、それを非表示。リストを選択したときだけ表示する。。。というやり方のようですが。うーん、やっぱりダイアログみたいなものはウェブではウィンドウを別に出すんだろうかな～。とりあえず、気を取り直してやってみました。

はい、だんだんページに露出するソースの量が減っていっている上にそのままではいかないです。

まず、Page.xamlに追加したStoryDetailsViewを認識させるためにネームスペースを追加します。

xmlns:Digg="clr-namespace:DiggSample;assembly=DiggSample"

そしてDiggSampleクラスのメンバUriの型をstring→Uriへ変えて、Page.xaml.csの

HrefLink = ((string)story.Attribute("link")).Trim(),
を
HrefLink = new Uri((string)story.Attribute("link")),

へ、変更。

ちなみに、私は落としてきたサンプルを見ながらApp.xaml内のスタイルは作ってしまいました。とりあえず、ぺたぺたと

<Style x:Key="DiggPanel" TargetType="StackPanel">
<Setter Property="Margin" Value="10" />
<Setter Property="Width" Value="55" />
<Setter Property="Height" Value="55" />
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0,5,1" StartPoint="0,5,0" >
<GradientStop Color="#FFFFF098" />
<GradientStop Color="#FFFFF9D4" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="NumDigsBlock" TargetType="TextBlock">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="FontSize" Value="18" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Foreground" Value="DarkSlateGray" />
</Style>
<Style x:Key="NumDigsSubBlock" TargetType="TextBlock">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="FontSize" Value="12" />
<Setter Property="Foreground" Value="DarkSlateGray" />
</Style>
<Style x:Key="ThumbnailPreview" TargetType="Image">
<Setter Property="Margin" Value="7,7,5,5" />
<Setter Property="Height" Value="55" />
</Style>
<Style x:Key="TitleBlock" TargetType="TextBlock">
<Setter Property="FontFamily" Value="Trebuchet MS" />
<Setter Property="TextAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
<Style x:Key="CloseButton" TargetType="Button">
<Setter Property="HorizontalAlignment" Value="Right"/>
<Setter Property="Width" Value="50" />
<Setter Property="Height" Value="25" />
</Style>
<Style x:Key="TitleLink" TargetType="HyperlinkButton">
<Setter Property="FontFamily" Value="Trebuchet MS"/>
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="FontSize" Value="28"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Width" Value="500"/>
<Setter Property="Grid.Row" Value="0"/>
<Setter Property="Grid.Column" Value="1"/>
<Setter Property="Grid.ColumnSpan" Value="2"/>
</Style>
<Style x:Key="DiggPanelDetail" TargetType="StackPanel">
<Setter Property="Margin" Value="10"/>
<Setter Property="Width" Value="55"/>
<Setter Property="Height" Value="55"/>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFF098"/>
<GradientStop Color="#FFFFF9D4" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Grid.Row" Value="1"/>
<Setter Property="Grid.Column" Value="0"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Top"/>
</Style>
<Style x:Key="DescriptionBlock" TargetType="TextBlock">
<Setter Property="FontFamily" Value="Trebuchet MS"/>
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="Foreground" Value="white"/>
<Setter Property="Width" Value="380"/>
<Setter Property="Grid.Row" Value="1"/>
<Setter Property="Grid.Column" Value="1"/>
</Style>
<Style x:Key="DetailsThumbNailPreview" TargetType="Image">
<Setter Property="Margin" Value="10, 0, 10, 0"/>
<Setter Property="Width" Value="100"/>
<Setter Property="Grid.Row" Value="1"/>
<Setter Property="Grid.Column" Value="2"/>
</Style>
<Style x:Key="PosterBlock" TargetType="TextBlock">
<Setter Property="Foreground" Value="white"/>
<Setter Property="FontFamily" Value="Trebuchet MS"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
</Style>
<Style x:Key="SubmitDetails" TargetType="StackPanel">
<Setter Property="Grid.Row" Value="2"/>
<Setter Property="Grid.Column" Value="1"/>
<Setter Property="Orientation" Value="Horizontal"/>
</Style>

変更点そのものはたいしてなかったのですが、Uriの所に気付かず、画面が真っ白の状態になってしまって時間をロスしてしまいました。うーむ。

スタイル指定は便利なようで、これくらいのデモを作る分には少し面倒だなぁ。