チュートリアル
文責：山田奈美最終更新日：2007年10月01日
RoundedCoornersコントロール（AJAX Control Toolkit）
|
 |
|
RoundedCoornersコントロールを使うと、パネルなどのパーツの角を丸めることができるよ。
丸める度合いも自分で設定できるから、やさしい印象、かっちりした印象など、サイトの雰囲気に合わせて変更してみてね。
|
|
|
RoundedCoornersコントロールとは？
RoundedCoornersコントロールでは、パネルなどのパーツの角を丸めることができます。
プロパティの設定値によって、丸める度合いも自由に変更することが可能です。
以下は、RoundedCoornersコントロールを使ったサンプルの実行結果です。
RoundedCoornersサンプル実行結果
RoundedCoornersコントロールの使い方は、とっても簡単。VisualStudio（VisualWebDeveloper）のデザイン画面にRoundedCoornersコントロールを配置して、以下表を参考にプロパティを入力するだけでOKです。プロパティ値がプロパティウィンドウから入力できない場合は、ソース画面から直接入力してください。
RoundedCoornersコントロールのプロパティ
RoundedCoornersコントロールのプロパティは、以下の表のとおりです。
RoundedCoornersコントロールのプロパティ
| プロパティ名 | 概要 |
| TargetControlID | 機能を適用するコントロールのID |
| Radius | 丸める度合い（単位はピクセル）デフォルトは5 |
| Corners | 丸める場所（None, TopLeft, TopRight, BottomRight, BottomLeft, Top, Right, Bottom, Left, All）から選択。複数選択時はカンマ区切りで |
RoundedCoornersコントロールのサンプル
ここではTargetControlIDプロパティにPanel1を、Radiusプロパティに10を、CornersプロパティにAllを、BorderColorプロパティにRedをそれぞれ設定しました。
［RoundedCoorners.aspx］
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</div>
<asp:Panel ID="Panel1" runat="server" Height="103px" Width="274px" HorizontalAlign="Center">
WebDeli<br />
<asp:Image ID="Image1" runat="server" Height="60px" ImageUrl="~/image/linkbanner_l.gif"
Width="234px" /><br />
RoundedCorners使用</asp:Panel>
<br />
<asp:Panel ID="Panel2" runat="server" Height="103px" Width="274px" HorizontalAlign="Center" BorderColor="Red" BorderStyle="Solid" BorderWidth="1px">
WebDeli<br />
<asp:Image ID="Image2" runat="server" Height="60px" ImageUrl="~/image/linkbanner_l.gif"
Width="234px" /><br />
RoundedCorners未使用</asp:Panel>
<cc1:RoundedCornersExtender ID="rce" runat="server" TargetControlID="Panel1"
Radius="10"
Corners="All" BorderColor="Red">
</cc1:RoundedCornersExtender>
実行結果は冒頭の図のとおり。RoundedCoornersを適用した上の図は、すべての角が丸くなっていることが確認できます。
