Thiết kế Web http://www.vietphotoshop.com/forum/index.php Mon, 22 Sep 2008 02:10:23 +0000 30 Code ASP http://www.vietphotoshop.com/forum/index.php?showtopic=19903 Mình có một số đoạn code sau các bạn có thể góp ý cho mình xem tại sao nó không chạy được. Cảm ơn!

Code Trang register.asp:

CODE
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Register</title>
</head>
<body>
<form name = "dk" method = "POST" action = "filetest.asp">
<!--ID: <input type = "text" name = "txtID"> -->
<p>Username: <input type = "text" name = "txtUS" id="txtUS"></p>
<p>Password: <input type = "password" name = "txtPW" id="txtPW"></p>
<p>Confirm Password: <input type = "password" name = "txtRPW" id="txtRPW"></p>
<input name="dk" id="dk" type = "submit" value = "submit" onClick="kiemtra()">   <input name="kdk" type = "reset" id="kdk" value = "Reset">
<p>
</form>
<script language="javascript">
    function kiemtra() {
      if(dk.txtUS.value=="") {
      alert ("Bạn hãy điền đầy đủ thông tin! ");
       dk.txtUS.focus();
         return false;
   }
  
         if(dk.txtPW.value=="") {
      alert ("Bạn hãy điền đầy đủ thông tin! ");
       dk.txtPW.focus();
         return false;
   }
  
         if(dk.txtRPW.value=="") {
      alert ("Bạn hãy điền đầy đủ thông tin! ");
       dk.txtRPW.focus();
         return false;
   }
  
        if(dk.txtPW.value!=dk.txtRPW.value) {
   alert("Mật khẩu nhập lại khác mật khẩu cũ!");
    dk.txtRPW.focus();
    return false;
  }
  
   }
</script>
</body>
</html>


Code Trang filetest.asp

CODE
<%
Dim CN
Dim strConn
Set CN = Server.CreateObject("ADODB.Connection")
strConn= "Provider = Microsoft.Jet.OLEDB.4.0; Data Source = " & _
                     Server.MapPath("database.mdb") & ";"
CN.ConnectionString = strConn
CN.Open



Dim txtUS
Dim txtPW


txtUS = Request.Form("txtUS")
txtPW = Request.Form("txtPW")

Dim sql
Dim adOpenKeyset
Dim adLockOptimistic
Dim RS

sql = "SELECT * FROM USERLIST WHERE USERNAME = '" & txtUS & "'"
RS.Open sql,CN,2,3


If RS.EOF = False Then
   Response.Write "Username nay da co.<br>"
   Response.Write "<a href = 'register.asp'>Click vao day de quay lai</a>"
   Response.End
Else
   RS.AddNew
   RS.Fields("USERNAME") = txtUS
   RS.Fields("PASSWORD") = txtPW
   RS.Update
End If

Response.Write "<h1>Du lieu da duoc them vao.</h1>"
Response.redirect "css.asp"

%>




Code Trang login.asp
CODE
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Login</title>
</head>
<body>
<form method="POST" action="validate.asp">
  <p><font face=".VnTimeH">Nhập Username và Password
  <p><font face=".VnTime" size="4">UserName<input type="text"
name="txtUS" size="20"></font></p>
  <p><font face=".VnTime" size="4">Password <input type="password"
name="txtPW" size="20"></font></p>
  <p><font face=".VnTime" size="4"><input type="submit" value="Login"
name="Login"><input type="reset" value="Clear" name="Clear"></font></p>
</form>
</body>
</html>
</body>
</html>


Code Trang validate.asp

CODE
<%
txtUS=request("txtUS")
txtPW=request("txtPW")
set conn=Server.CreateObject("ADODB.Connection")  
conn.ConnectionString="Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&_
server.mappath("database.mdb")
conn.open
dim sql
dim rs
set rs = Server.CreateObject("ADODB.recordset")
sql="SELECT * FROM USERLIST WHERE USERNAME= '" & txtUS & "' and "&_ "PASSWORD= '" & txtPW &"'"
rs.Open sql, conn,2,3
if not (rs.eof or rs.bof) then
     Response.write  "Ban khong co quyen duoc truy cap trang web nay"
       Response.end
else
     Session("login")="ok"
  Response.redirect "css.asp"
end if
rs.close
set rs=nothing
conn.close
set conn=nothing %>


Code Trang checklogin.asp
CODE
<%
if  not (session("login")="ok" then
     response.write "Ban khong co quyen truy cap trang nay"
     response.redirect "login.asp"
end if
%>


Bảng CSDL mình tạo bằng Access 2003 có tên là database, trong database chỉ có 1 bảng userlist: gồm 2 trường USERNAME và PASSWORD đều để dạng text.
]]> Mon, 22 Sep 2008 02:10:23 +0000 http://www.vietphotoshop.com/forum/index.php?showtopic=19903 cho em hỏi skin! http://www.vietphotoshop.com/forum/index.php?showtopic=19763 http://vipsofts.net cho em xin cái]]> Sat, 13 Sep 2008 09:01:41 +0000 http://www.vietphotoshop.com/forum/index.php?showtopic=19763 Silverlight-công nghệ web tương lai http://www.vietphotoshop.com/forum/index.php?showtopic=19631 Thuộc tính Opacity
Thuộc tính Opacity cho phép bạn kiểm soát độ trong suốt của một đối tượng UIElement. Bạn có thể đặt giá trị cho thuộc tính Opacity từ 0 đến 1. Đối tượng càng trong suốt nếu giá trị càng gần về 0, nếu đặt là 0 thì đối tượng sẽ hoàn toàn trong suốt, giá trị mặc nhiên của thuộc tính này là 1.0.

Ví dụ sau đây sẽ tạo 2 hình họa với các thuộc tính Opacity khác nhau:
CODE
<Canvas Width="300" Height="300"
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  
  <Rectangle Opacity="1.0" Height="100" Width="100" Canvas.Left="30" Canvas.Top="30"
     Stroke="Black" StrokeThickness="10" Fill="SlateBlue"/>
  <Rectangle Opacity="0.6" Height="100" Width="100" Canvas.Left="70" Canvas.Top="70"
     Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />
</Canvas>




Thuộc tính OpacityMask
Thuộc tính OpacityMask cho phép bạn kiểm soát độ trong suốt trong các phần khác nhau của một đối tượng UIElement. Lấy ví dụ, bạn có thể dùng OpacityMask để làm đối tượng mờ dần từ phải sang trái. Thuộc tính OpacityMask nhận vào một đối tượng Brush. Bút vẽ được áp dụng vào đối tượng và kênh alpha (kênh xác định độ trong suốt) sẽ được dùng để xác định độ trong suốt của pixel tương ứng. Nếu một phần nào đó của bút vẽ là trong suốt thì nó cũng sẽ làm cho thành phần tương ứng trong suốt.
Bạn có thể dùng bất kỳ kiểu bút vẽ nào để dùng OpacityMask, tuy nhiên LinearGradientBrush, RadialGradientBrush, và ImageBrush là những kiểu thường dùng nhất.
Ví dụ sau sẽ áp dụng một LinearGradientBrush bản đồ trong suốt vào một đối tượng Rectangle.
CODE
<Canvas Width="300" Height="300"
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Rectangle Height="100" Width="100" Canvas.Left="30" Canvas.Top="30"
     Stroke="Black" StrokeThickness="10" Fill="SlateBlue">
    <Rectangle.OpacityMask>
      <LinearGradientBrush>
        <GradientStop Offset="0.25" Color="#00000000"/>
        <GradientStop Offset="1" Color="#FF000000"/>      
      </LinearGradientBrush>
    </Rectangle.OpacityMask>
  </Rectangle>
</Canvas>




Thuộc tính Clip
Thuộc tính Clip cho phép bạn vẽ các phần của một đối tượng một cách chọn lọc. Để dùng thuộc tính Clip, bạn phải cung cấp một đối tượng Geometry (đối tượng hình học) mô tả phần bạn muốn vẽ. Tất cả những phần nằm bên ngoài hình này đều sẽ bị ẩn đi, hay được gọi là “bị xén”.

Ví dụ sau đây dùng một RectangleGeometry để mô tả vùng xén cho một đối tượng Ellipse. Kết quả là, chỉ có phần nào bên trong vùng được định nghĩa bởi RectangleGeometry được hiển thị, những phần còn lại sẽ bị xén.
CODE
<Canvas Width="300" Height="300"
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  
  <Ellipse Height="200" Width="200" Canvas.Left="30" Canvas.Top="30"
     Stroke="Black" StrokeThickness="10" Fill="SlateBlue">
    <Ellipse.Clip>
      <RectangleGeometry Rect="0, 0, 100, 100"/>
    </Ellipse.Clip>
  </Ellipse>
</Canvas>



Thuộc tính RenderTransform
Thuộc tính RenderTransform cho phép bạn dùng đối tượng Transform để quay (rotate), làm xiên (skew), đổi tỷ lệ (scale) hoặc dịch chuyển (translate) một đối tượng. Danh sách sau sẽ mô tả các đối tượng Transform khác nhau mà bạn có thể dùng với thuộc tính RenderTransform.
- RotateTransform: Quay một đối tượng theo một góc nào đó.
- SkewTransform: Làm xiên đối tượng bởi một khoảng theo chiều X hoặc chiều Y.
- ScaleTransform: Phóng to hoặc thu nhỏ một đối tượng theo chiều cao hoặc chiều rộng bởi một khoảng cho trước.
- TranslateTransform: Dịch chuyển đối tượng theo chiều dọc hoặc chiều ngang bởi một khoảng cho trước.
Ngoài ra còn có một kiểu biến hình đặc biệt, TransformGroup, bạn có thể dùng để áp dụng nhiều phép biến hình lên một đối tượng nào đó. Chẳng hạn bạn có thể quay rồi sau đó làm xiên một đối tượng.
Ví dụ sau đây biểu diễn các đối tượng Transform khác nhau bằng cách áp dụng chúng lên các đối tượng Rectangle khác nhau.
CODE
<Canvas Width="300" Height="300"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  >
  <Rectangle Height="100" Width="100" Canvas.Left="70" Canvas.Top="10"
      Fill="Black">
    <Rectangle.RenderTransform>
      <RotateTransform Angle="45"/>
    </Rectangle.RenderTransform>
  </Rectangle>
  
  <Rectangle Height="100" Width="100" Canvas.Left="130" Canvas.Top="10"
      Fill="red">
    <Rectangle.RenderTransform>
      <SkewTransform AngleX="30"/>
    </Rectangle.RenderTransform>
  </Rectangle>
  
  <Rectangle Height="100" Width="100" Canvas.Left="10" Canvas.Top="190"
      Fill="blue">
    <Rectangle.RenderTransform>
      <ScaleTransform ScaleX="1.3" ScaleY=".5"/>
    </Rectangle.RenderTransform>
  </Rectangle>
  
  <Rectangle Height="100" Width="100" Canvas.Left="160" Canvas.Top="130"
      Fill="Green">
    <Rectangle.RenderTransform>
      <TransformGroup>
        <RotateTransform Angle="45"/>
        <ScaleTransform ScaleX=".5" ScaleY="1.2"/>
        <SkewTransform AngleX="30"/>
      </TransformGroup>
    </Rectangle.RenderTransform>
  </Rectangle>

</Canvas>

]]> Fri, 05 Sep 2008 04:36:23 +0000 http://www.vietphotoshop.com/forum/index.php?showtopic=19631 Silverlight- công nghệ web tương lai http://www.vietphotoshop.com/forum/index.php?showtopic=19613 Các hình họa cơ bản
Silverlight cung cấp ba thành phần hình họa cơ bản: hình ellipse, chữ nhật và đường thẳng.

Đối tượng ellipse mô tả một hình ellipse hay hình tròn. Bạn có thể kiểm soát chiều rộng và chiều cao bằng cách đặt thuộc tính Width và Height.
Đối tượng Rectangle mô tả một hình vuông hoặc một hình chữ nhật, có thể bo tròn góc. Bạn kiểm soát chiều rộng và chiều cao bằng cách đặt giá trị các thuộc tính Width hoặc Height. Bạn cũng có thể dùng thuộc tính RadiusX và RadiusY để xác định độ cong của góc.
Thay vì dùng các thuộc tính Width và Height, bạn kiểm soát kích thước và vị trí của một đường thẳng bằng cách đặt giá trị cho các thuộc tính X1, Y1, X2, Y2 của nó.

Ví dụ sau vẽ một Ellipse, một Rectangle, và một Line trong một Canvas.
CODE
<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Ellipse Height="200" Width="200" Canvas.Left="30" Canvas.Top="30"
      Stroke="Black" StrokeThickness="10" Fill="SlateBlue"/>
  <Rectangle Height="100" Width="100" Canvas.Left="5" Canvas.Top="5"
      Stroke="Black" StrokeThickness="10" Fill="SlateBlue"/>
  <Line X1="280" Y1="10" X2="10" Y2="280"
      Stroke="black" StrokeThickness="5"/>
</Canvas>



Các đối tượng hình họa khác
Ngoài các đối tượng Ellipse, Line, và Rectangle, Silverlght còn cung cấp 3 đối tượng hình họa khác: Polygon, Polyline, và Path. Một Polygon (đa giác) là một hình đóng với một số cạnh, trong khi một PolyLine là một chuỗi các đoạn thẳng nối với nhau, các đoạn thẳng này có thể tạo thành một hình đóng (đa giác) hoặc không. Ví dụ sau sẽ tạo nên một Polygon và một PolyLine:
CODE
<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Polyline Points="150, 150 150, 250 250, 250 250, 150"
      Stroke="Black" StrokeThickness="10"/>
  <Polygon Points="10,10 10,110 110,110 110,10"
      Stroke="Black" StrokeThickness="10" Fill="LightBlue"/>
</Canvas>




Đối tượng Path có thể được dùng để biểu diễn một hình dạng phức tạp bao gồm cả cung và đường cong. Để dùng Path, bạn phải dùng một kiểu cú pháp đặc biệt để đặt thuộc tính Data của nó. Ví dụ sau sẽ tạo nên ba đối tượng Path.
CODE
<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Path Data="M0,0 L11.5,0 11.5,30 5.75,40 0,30z"
      Stroke="Black" Fill="SlateBlue"
      Canvas.Left="10" Canvas.Top="10" />

  <Path Data="M 10,100 C 10,300 300,-200 250,100z"
      Stroke="Red" Fill="Orange"
      Canvas.Left="10" Canvas.Top="10" />
      
  <Path Data="M 0,200 L100,200 50,50z"
      Stroke="Black" Fill="Gray"
      Canvas.Left="150" Canvas.Top="70" />

  </Canvas>



Để có thêm thông tin về cú pháp của Path, hãy xem phần Path Markup Syntax trong bộ Silverlight SDK.

Vẽ hình bằng cách sử dụng bút vẽ
Hầu hết các hình họa đều bao gồm hai phần, đường viền và nền bên trong được kiểm soát bởi các thuộc tính Stroke và Fill. Hình minh họa sau cho bạn thấy phần đường viền và nền của hình chữ nhật ở ví dụ đầu tiên.


Không phải mọi hình đều có đầy đủ nền và viền: một Line (đoạn thẳng) chỉ có đường viền. Đặt giá trí thuộc tính Fill của một Line sẽ không có tác dụng.
Bạn đặt giá trị cho Stroke và Fill bằng cách sử dụng Brush (bút vẽ). Có 5 kiểu đối tượng bút vẽ mà bạn có thể dùng:

- SolidColorBrush
- nearGradientBrush
- RadialGradientBrush
- ImageBrush
- VideoBrush (mô tả trong phần media)

Vẽ dùng một màu với SolidColorBrush
Để vẽ một vùng với một màu nào đó, bạn dùng SolidColorBrush. XAML cung cấp một số cách để tạo SolidColorBrush.
Bạn có thể dùng một số cú pháp để chỉ tên của một màu, kiểu như “Black” hay “Gray”.
Bạn cũng có thể dùng cú pháp thập lục phân để mô tả các thành phần đỏ, xanh lá cây và xanh nước biển, cùng một thành phần tùy chọn chỉ ra độ trong suốt. Có thể dùng những cách sau:
- Ký pháp 6-số: Dạng là #rrggbb, trong đó rr là hai chữ số thập lục phân mô tả thành phần màu đỏ, gg mô tả màu xanh lá cây va bb mô tả màu xanh nước biển. Ví dụ như: #0033FF.
- Ký pháp 8-số: Định dạng tương tự ký pháp 6-số, ngoại trừ có thêm 2 ký tự mở rộng mô tả giá trị alpha, chỉ ra độ trong suốt: #aarrggbb. Ví dụ: #990033FF.
Ngoài ra còn có ký pháp 3 hoặc 4 số cho các màu 8-bit, nhưng ít được sử dụng.
Thay vì dùng các thuộc tính như Stroke và Fill để đặt giá trị cho bút vẽ, bạn cũng có thể tạo một đối tượng SolidColorBrush riêng và đặt thuộc tính Color cho nó, dùng một trong những định dạng màu đã nói ở trên.

Ví dụ sau đây cho thấy một số cách để vẽ một đối tượng bằng màu đen.
CODE
<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Ellipse Height="90" Width="90" Canvas.Left="10" Canvas.Top="10"
      Fill="black"/> <!-- SolidColorBrush by color name. -->
  <Ellipse Height="90" Width="90" Canvas.Left="110" Canvas.Top="10"
      Fill="#000000"/> <!-- SolidColorBrush by 6-digit hexadecimal notation. -->
   <Ellipse Height="90" Width="90" Canvas.Left="10" Canvas.Top="110"
      Fill="#ff000000"/> <!-- SolidColorBrush by 8-digit hexadecimal notation. -->
   <Ellipse Height="90" Width="90" Canvas.Left="110" Canvas.Top="110">
    <Ellipse.Fill>
       <!-- SolidColorBrush by object element syntax. -->
      <SolidColorBrush Color="Black"/>
    </Ellipse.Fill>
  </Ellipse>
</Canvas>




Vẽ hình với gradient dùng LinearGradientBrush và RadialGradientBrush

Silverlight hỗ trợ cả linear và radial gradiant. Gradient có một hoặc nhiều gradient stop mô tả sự chuyển đổi và vị trí của các màu sắc khác nhau trong gradient.
Hầu hết các gradient chỉ cần hai gradient stop, nhưng bạn có thể tạo nhiều hơn nếu muốn.
- LinearGradientBrush vẽ một gradient theo một đường thẳng. Đường thẳng này mặc nhiên sẽ nằm theo đường chéo từ góc trên trái xuống góc dưới phải. Bạn có thể đặt lại giá trị cho thuộc tính StartPoint và EndPoint để thay đổi vị trí của đoạn thẳng này.
- RadialGradientBrush vẽ một gradient dọc theo một đường tròn, mặc nhiên tâm hình tròn này sẽ nằm ở giữa vùng được vẽ. Bạn có thể thay đổi hình thức của gradient bằng cách đặt lại giá trị các thuộc tính GradientOrigin, Center, RadiusX, and RadiusY.
Để thêm gradient stop vào bút vẽ, bạn hãy tạo các đối tượng GradientStop. Đặt lại thuộc tính Offset của một GradientStop thành một giá trị từ 0 đến 1 để đặt lại vị trí tương đối của nó trong gradient. Đặt thuộc tính Color của GradientStop thành một giá trị màu, có thể dùng tên hoặc dùng cú pháp thập lục phân.

Ví dụ sau dùng các đối tượng LinearGradientBrush và RadialGradientBrush để vẽ 4 đối tượng Rectangle.

CODE
<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  
  <!-- Linear gradients -->
  <Rectangle Width="140" Height="70" Canvas.Left="10" Canvas.Top="10">
    <Rectangle.Fill>
      <LinearGradientBrush>
        <GradientStop Color="Yellow" Offset="0.0" />
        <GradientStop Color="Red" Offset="0.25" />
        <GradientStop Color="Blue" Offset="0.75" />
        <GradientStop Color="LimeGreen" Offset="1.0" />
      </LinearGradientBrush>
    </Rectangle.Fill>
  </Rectangle>
  
  <Rectangle Width="140" Height="70" Canvas.Left="155" Canvas.Top="10">
    <Rectangle.Fill>
      <LinearGradientBrush  StartPoint="0,0" EndPoint="1,0">
        <GradientStop Color="Yellow" Offset="0.0" />
        <GradientStop Color="Red" Offset="0.25" />
        <GradientStop Color="Blue" Offset="0.75" />
        <GradientStop Color="LimeGreen" Offset="1.0" />
      </LinearGradientBrush>
    </Rectangle.Fill>
  </Rectangle>
  
  <!-- Radial gradients -->
  <Rectangle Width="140" Height="70" Canvas.Left="10" Canvas.Top="110">
    <Rectangle.Fill>
      <RadialGradientBrush>
        <GradientStop Color="Yellow" Offset="0.0" />
        <GradientStop Color="Red" Offset="0.25" />
        <GradientStop Color="Blue" Offset="0.75" />
        <GradientStop Color="LimeGreen" Offset="1.0" />
      </RadialGradientBrush>
    </Rectangle.Fill>
  </Rectangle>
  
  <Rectangle Width="140" Height="70" Canvas.Left="155" Canvas.Top="110">
    <Rectangle.Fill>
      <RadialGradientBrush GradientOrigin="1,0">
        <GradientStop Color="Yellow" Offset="0.0" />
        <GradientStop Color="Red" Offset="0.25" />
        <GradientStop Color="Blue" Offset="0.75" />
        <GradientStop Color="LimeGreen" Offset="1.0" />
      </RadialGradientBrush>
    </Rectangle.Fill>
  </Rectangle>
</Canvas>




Bạn cũng có thể dùng gradient để vẽ viền của một hình họa.

Hình minh họa sau cho thấy các gradient stop của LinearGradientBrush đầu tiên trong ví dụ trước.


Vẽ ảnh dùng ImageBrush
Một kiểu bút vẽ khác là ImageBrush. Mặc nhiên, hình ảnh sẽ được ép lại sao cho vừa với toàn bộ hình, bạn cũng có thể dùng thuộc tính Stretch để kiểm soát cách bút vẽ ép hình ảnh. Ví dụ sau dùng hai đối tượng ImageBrush với các giá trị Stretch khác nhau để vẽ hai đối tượng Rectangle.
CODE
<Canvas Width="300" Height="300"
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Background="White">
  <Rectangle Height="180" Width="90" Canvas.Left="10" Canvas.Top="10"
      Stroke="Black" StrokeThickness="1">
    <Rectangle.Fill>
      <ImageBrush ImageSource="star.png"/>
    </Rectangle.Fill>
  </Rectangle>
  <Rectangle Height="180" Width="90" Canvas.Left="110" Canvas.Top="10"
      Stroke="Black" StrokeThickness="1">
    <Rectangle.Fill>
      <ImageBrush ImageSource="star.png" Stretch="Uniform"/>
    </Rectangle.Fill>
  </Rectangle>
</Canvas>



]]> Thu, 04 Sep 2008 08:20:16 +0000 http://www.vietphotoshop.com/forum/index.php?showtopic=19613 Silverlight- công nghệ web tương lai http://www.vietphotoshop.com/forum/index.php?showtopic=19610
Thêm một đối tượng vào Canvas
Một Canvas chứa và đặt vị trí cho các đối tượng khác. Để thêm một đối tượng vào Canvas, bạn hãy chèn nó vào giữa cắp thẻ <Canvas>. Ví dụ sau sẽ thêm một hình ellipse và trong một Canvas. Vì Canvas là đối tượng gốc nên tốt hơn hết là bạn nên khai báo các thuộc tính về namespace (xmlns) cần thiết cho nó.

CODE
<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
  <Ellipse
     Height="200" Width="200"
     Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />
</Canvas>




Một Canvas có thể chứa một số bất kỳ các đối tượng khác, thậm chí cả các Canvas khác.
Đặt vị trí cho một đối tượng
Để đặt vị trí cho một đối tượng trong Canvas, bạn đặt các thuộc tính Canvas.Left và Canvas.Top trên đối tượng đó. Thuộc tính Canvas.Left chỉ ra khoảng cách từ đối tượng đế cạnh bên trái của Canvas chứa nó, và Canvas.Top chỉ ra khoảng cách đến cạnh trên của Canvas. Ví dụ sau cũng vẫn dùng đối tượng ellipse trong cùng ví dụ trước như đặt lại ví trí của nó là 30 pixel (điểm trên màn hình) tính từ bên trái và 30 pixel tính từ phía trên của Canvas.
CODE
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Ellipse
Canvas.Left="30" Canvas.Top="30"
Height="200" Width="200"
Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />
</Canvas>


Hình minh họa sau sẽ giúp bạn hiểu hơn về hệ tọa độ được dùng trong Canvas và vị trí của hình ellipse trong ví dụ trước.


z-order
Thuật ngữ z-order được dùng để chỉ độ sâu (chiều thứ 3 trên hệ tọa độ xyz), hay nói cách khác là nếu có nhiều đối tượng nằm chồng lên nhau thì z-order sẽ xác định đối tượng nào nằm trên, đối tượng nào nằm dưới
Mặc nhiên, z-order của các đối tượng trong một Canvas sẽ được xác định bởi thứ tự chúng được khai báo. Đối tượng nào được khai báo sau sẽ nằm lên trên đối tượng được khai báo trước. Ví dụ sau sẽ tạo ra 3 ellipse, bạn sẽ thấy đối tượng được khai báo sau cùng (màu xanh lá cây) sẽ nằm lên trên các đối tượng khác.

CODE
<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  
  <Ellipse
      Canvas.Left="5" Canvas.Top="5"
      Height="200" Width="200"
      Stroke="Black" StrokeThickness="10" Fill="Silver" />
      
  <Ellipse
      Canvas.Left="50" Canvas.Top="50"
      Height="200" Width="200"
      Stroke="Black" StrokeThickness="10" Fill="DeepSkyBlue" />      
      
  <Ellipse
      Canvas.Left="95" Canvas.Top="95"
      Height="200" Width="200"
      Stroke="Black" StrokeThickness="10" Fill="Lime" />    
              
</Canvas>




Bạn có thể thay đổi điều này bằng cách đặt lại thuộc tính Canvas.ZIndex của đối tượng bên trong Canvas, giá trị càng cao thì sẽ nằm càng gần về phía trước, và càng thấp thì càng nằm ra sau. Ví dụ sau cũng sẽ tương tự như cái trước, chỉ có một thay đổi là các giá trị của z-order đã được đặt ngược lại, bạn sẽ thấy trong trường hợp này, hình ellipse màu bạc sẽ nằm lên trên cùng.

CODE
<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  
  <Ellipse
      Canvas.ZIndex="3"
      Canvas.Left="5" Canvas.Top="5"
      Height="200" Width="200"
      Stroke="Black" StrokeThickness="10" Fill="Silver" />
      
  <Ellipse
      Canvas.ZIndex="2"
      Canvas.Left="50" Canvas.Top="50"
      Height="200" Width="200"
      Stroke="Black" StrokeThickness="10" Fill="DeepSkyBlue" />      
      
  <Ellipse
      Canvas.ZIndex="1"
      Canvas.Left="95" Canvas.Top="95"
      Height="200" Width="200"
      Stroke="Black" StrokeThickness="10" Fill="Lime" />    
              
</Canvas>




Chiều rộng và chiều cao
Canvas, hình họa và nhiều thành phần khác đều có thuộc thuộc tính Width và Height cho phép chỉ ra kích thước của nó. Ví dụ sau sẽ tạo một hình ellipse cao 200 pixel và rộng 200 pixel, nhớ là không được dùng giá trị theo kiểu phần trăm %.
CODE
<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Ellipse
      Canvas.Left="30" Canvas.Top="30"
      Height="200" Width="200"
      Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />
</Canvas>




Ví dụ tiếp theo đặt Width và Height của đối tượng Canvas cha thành 200 và đặt màu nền cho nó là Lime
CODE
<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Width="200" Height="200"
   Background="LimeGreen">
    
  <Ellipse
    Canvas.Left="30" Canvas.Top="30"
    Height="200" Width="200"
    Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />
</Canvas>




Khi chạy ví dụ này, hình chữ nhật màu xanh lá cây chính là Canvas, phần màu trắng là phần còn lại của Silverlight plug-in không bị che phủ bởi Canvas. Bạn sẽ thấy rằng phần nằm ngoài Canvas của hình ellipse sẽ không bị xén mất.
Nếu không đặt thì giá trị mặc nhiên của Width và Height sẽ là 0.

Các Canvas lồng nhau
Một Canvas có thể chứa những Canvas khác. trong ví dụ sau bạn sẽ thấy một Canvas lại chứa 2 Canvas khác bên trong.

CODE
<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Canvas Height="50" Width="50" Canvas.Left="30" Canvas.Top="30"
      Background="blue"/>
  
  <Canvas Height="50" Width="50" Canvas.Left="130" Canvas.Top="30"
      Background="red"/>
</Canvas>

]]> Thu, 04 Sep 2008 07:52:08 +0000 http://www.vietphotoshop.com/forum/index.php?showtopic=19610