.NET TIPS

[WPF、Silverlight 2]角を丸くして画像を表示するには?[XAML]

デジタルアドバンテージ 遠藤 孝信
2010/01/14

 WPFアプリケーションやSilverlightアプリケーションで画像を表示する際に、角を丸くして表示する方法について解説する。これにはいくつかの手段があるが、Borderコントロールを使用し、その背景として画像を設定するのが簡単な方法だ。

 以下はこの方法により、WPFアプリケーションで角丸画像を表示している例である。


画像の角を丸くして表示(WPFアプリケーション)

 Borderコントロールは、別のコントロールの周囲に境界線(ボーダー)を描画するためのコントロールで、CornerRadiusプロパティに角の半径を設定することにより、角の丸い境界線を描くことができる。

 本稿の場合であれば、Borderコントロールの境界線の太さを0にし、表示したい画像を指定したImageBrushで、その背景を塗ればよい。

 上記の画面を記述したXAMLコードを次に示す。これはWPFアプリケーションのウィンドウ定義であるが、<StackPanel>要素配下の内容はSilverlightでもそのまま記述可能だ。

<Window x:Class="WpfApplication1.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Window1" Height="300" Width="480">

  <StackPanel HorizontalAlignment="Left">

    <Border Margin="20" Width="376" Height="50"
            CornerRadius="10" BorderThickness="0">
      <!-- 背景の設定 -->
      <Border.Background>
        <ImageBrush Stretch="None"
          ImageSource="http://www.atmarkit.co.jp/fdotnet/dotnettips/index/dotnettips_l.jpg">
        </ImageBrush>
      </Border.Background>
    </Border>

    <Border Margin="20" Width="120" Height="120"
            CornerRadius="10" BorderThickness="0">
      <!-- 背景の設定 -->
      <Border.Background>
        <ImageBrush
          Stretch="None"
          ImageSource="http://www.atmarkit.co.jp/fdotnet/dotnettips/index/dotnettips_m.jpg">
        </ImageBrush>
      </Border.Background>
    </Border>

  </StackPanel>
</Window>
角の丸い2つの画像を表示するXAMLコード
<StackPanel>要素配下のコードはWPF、Silverlightの両方で利用可能。

影付きの角丸画像

 Borderコントロールを使った画像の表示では、次の画面のように、角丸画像に簡易的に影を付けることもできる。これは、Borderコントロールの右辺と下辺の境界線のみをグレーで描くことによって実現している。


画像の角を丸くし影付きで表示(WPFアプリケーション)

 この画面のXAMLコードを次に示す。赤字部分が先のコードから修正している点だ。

<Window x:Class="WpfApplication1.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Window1" Height="300" Width="480">

  <StackPanel HorizontalAlignment="Left">

    <Border Margin="20" Width="376" Height="50"
            CornerRadius="10" BorderThickness="0,0,3,3"
            BorderBrush="Gray">
      <!-- 背景の設定 -->
      <Border.Background>
        <ImageBrush Stretch="None"
          ImageSource="http://www.atmarkit.co.jp/fdotnet/dotnettips/index/dotnettips_l.jpg">
        </ImageBrush>
      </Border.Background>
    </Border>

    <Border Margin="20" Width="120" Height="120"
            CornerRadius="10" BorderThickness="0,0,3,3"
            BorderBrush="Gray">
      <!-- 背景の設定 -->
      <Border.Background>
        <ImageBrush
          Stretch="None"
          ImageSource="http://www.atmarkit.co.jp/fdotnet/dotnettips/index/dotnettips_m.jpg">
        </ImageBrush>
      </Border.Background>
    </Border>

  </StackPanel>
</Window>
角の丸い2つの画像を影付きで表示するXAMLコード
<StackPanel>要素配下のコードはWPF、Silverlightの両方で利用可能。

 BorderThickness属性でカンマ区切りにより4つの値を記述した場合には、(左から)左辺、上辺、右辺、下辺の境界線の太さの指定となる。End of Article

カテゴリ:WPF 処理対象:Borderコントロール
カテゴリ:Silverlight 2 処理対象:Borderコントロール
使用ライブラリ:Borderコントロール(System.Windows.Controls名前空間)

この記事と関連性の高い別の.NET TIPS
DataGridViewコントロールの連続する同じ値のセルを1つにまとめるには?
タイトルバーのないダイアログを作成するには?
このリストは、(株)デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw(ジグソー) により自動抽出したものです。
generated by

「.NET TIPS」

@IT Special

- PR -

TechTargetジャパン

Insider.NET フォーラム 新着記事
  • 第2回 簡潔なコーディングのために (2017/7/26)
     ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
     Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回 明瞭なコーディングのために (2017/7/19)
     C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator (2017/7/18)
     Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

イベントカレンダー

PickUpイベント

- PR -

アクセスランキング

もっと見る

ホワイトペーパーTechTargetジャパン

注目のテーマ

Insider.NET 記事ランキング

本日 月間
ソリューションFLASH