動作確認環境: Silverlight 4、Visual Studio 2010、Microsoft Silverlight 4 Tools for Visual Studio 2010、Windows 7

本コンテンツは書籍「Silverlight 大全」と連動したサンプル コードです

Silverlight を使用したアプリケーションで、ハイパーリンクを使用するユーザー インターフェイスに作成する場合は HyperlinkButton コントロールを使用します。

ここでは、XAML を使用した実装方法を紹介します。Visual Studio を使用した場合は、ツール ボックスにあるコントロールをドラッグ アンド ドロップすることにより、コントロールを使用できます。XAML のコード中に記述されている各プロパティは、Visual Studio のプロパティ ウィンドウからも変更できます。

以下の XAML のコードは、HyperlinkButton コントロールを Grid パネルの中で使用した例です。

XAML
スクリプトの編集|{#scriptcode_dlg.remove_script}
<Grid x:Name="LayoutRoot" Background="White"    <HyperlinkButton Content="HyperlinkButton" Height="23" HorizontalAlignment="Left" Margin="30,20,0,0" Name="hyperlinkButton1" VerticalAlignment="Top" Width="100" /> 
</Grid>

Visual Studio の XAML デザイナー上でみると、このようになっています。

図 1

各コントロールのプロパティの説明です。

Content:
表示される文字列です。
Height:
コントロールの見た目の高さです。
HorizontalAlignment:
パネル内のコントロールの水平方向の位置を、Left、Center、Right、Stretch で表します。ここでは Left が指定されているので、コントロールはパネル内で左寄せされて表示されます。ただし、Margin プロパティが設定されていたときは、その値の分のマージンが設定されます。
Margin:
4 つのパラメーターは、順に左側、上側、右側、下側のマージンを示します。マージンとは、その親となるパネルまたはグリッドの縁からの距離です。主に Grid パネルに貼り付けているときに使用します。
Name:
コントロールの名前です。Visual Basic や C# のコードから呼び出すときに、ここで設定した名前を使用します。
VerticalAlignment:
パネル内のコントロールの垂直方向の位置を、Top、Center、Bottom、Stretch で表します。ここでは Top が指定されているので、コントロールはパネル内で上寄せされて表示されます。ただし、Margin プロパティが設定されていたときは、その値の分のマージンが設定されます。
Width:
コントロールの見た目の幅です。

ハイパーリンクをクリックしたときの動作を設定するには、下記のプロパティを設定します。

NavigateUri:
クリックしたときの飛び先のページを指定します。

これら以外にも、下記のプロパティを設定することにより、見た目を変更できます。ここでは、よく使用されるプロパティを紹介します。

Background:
背景色です。グラデーションをかけたり、イメージを指定することで画像を背景として設定することもできます。
FontFamily:
表示するときに使用するフォント名です。
FontSize:
フォントの大きさです。
FontStyle:
このプロパティを Italic に変更すると、斜体で表示されます。
Foreground:
文字の色です。グラデーションをかけたり、イメージを指定することで画像を背景として設定することもできます。
Visibility:
表示と非表示を切り替えることができます。Visible を指定すると表示し、Collapsed を指定すると表示しなくなります。

以下は、Content プロパティに "Bing を表示" と表示させ、コントロールの大きさや、FontSize、Foreground を変更し、クリックしたときに http://bing.jp を表示させる例です。

XAML
スクリプトの編集|{#scriptcode_dlg.remove_script}
<HyperlinkButton Content="Bing を表示" Height="34" HorizontalAlignment="Left" Margin="30,20,0,0" Name="hyperlinkButton1" VerticalAlignment="Top" Width="158" NavigateUri="http://bing.jp" FontSize="20" />

図 2


Code Recipe Code Recipe

ページのトップへ