Başlangıç

Silverlight 4.0 ile Bir Nesneyi En Basit Kod (C#) ile Taşıma (Drag Drop)

Yorum bırakın


Visual Studio veya Expression Blend ile yeni bir silverlight projesi oluşturun.

  • MainPage.xaml Dosyası İçeriği;

<UserControl
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;
x:Class=”dragdrop1.MainPage”
Width=”640″ Height=”480″>

<Grid x:Name=”LayoutRoot” Background=”White”>
<Rectangle x:Name=”dikdortgen” Width=”50″ Height=”50″ Fill=”Blue” HorizontalAlignment=”Left” VerticalAlignment=”Top” MouseLeftButtonUp=”dikdortgen_MouseLeftButtonUp” MouseLeftButtonDown=”dikdortgen_MouseLeftButtonDown” MouseMove=”dikdortgen_MouseMove“>
<Rectangle.RenderTransform>
<TranslateTransform x:Name=”dik_donme_hareket” X=”0″ Y=”0″ />
</Rectangle.RenderTransform>
</Rectangle>
</Grid>
</UserControl>

  • MainPage.xaml.cs dosyasının içeriği;

 

private Boolean dik_mouse_durumu = false;

private void dikdortgen_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
this.dikdortgen.ReleaseMouseCapture();
dik_mouse_durumu = false;
}

private void dikdortgen_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
this.dikdortgen.CaptureMouse();
dik_mouse_durumu = true;
}

private void dikdortgen_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
{
if (dik_mouse_durumu)
{
this.dik_donme_hareket.X = e.GetPosition(this).X;
this.dik_donme_hareket.Y = e.GetPosition(this).Y;
}
}

 

Reklamlar

En Basit Haliyle Katmanlar (div) ve CSS ile Web Sayfası Şablonu Oluşturma

5 Yorum


Html dilinde katmanlar ile bir web şablonu oluşturmak için  CSS kullanmak gerekir. Bunun için bir adet html dosyası ve bir adette  css dosyası oluşturalım. Bu dosyaları herhangi bir metin editörü (notepad.exe) veya Dreamweaver Programı ile oluşturabilirsiniz.

  • Şu şekilde en basit tasarımlardan birini yapalım;

csswebsablon2

  • indexsablon.html sayfasının içeriği;

<html>
<head>
<title>arama sayfamıza hoşgeldiniz</title>
<link href=”stil.css” rel=”stylesheet” type=”text/css” /> <!–Css dosyasını sayfaya ekleme–>
</head>
<body>
<div id=”container”><!–tüm şablona ana sağlayıcı içinde hazırlanıyor.–>

<div id=”banner”>Banner olacak</div>
<div id=”header”>ustmenü </div>
<div id=”left”>sol bölum </div>
<div id=”content”>içerik</div>
<div id=”right”>sağ</div>
<div id=”footer”>alt</div>

</div>

</body>
</html>

  • stil.css dosyasının içeriği;

body /*Sayfa genel ayarları*/
{
margin: 0px;
font-family: verdana;
font-size: 12px;
}

#container /*web şablonu ana sğlayıcı */
{
width:980px;
height:700px;
margin:0px;
padding:0px;
}
#banner
{
padding: 0px;
margin: 0px;
width: 980px;
height: 100px;
background-color: #99FFCC;
}

#header
{
padding: 0px;
margin: 0px;
width: 980px;
height: 30px;
background-color: #66FF66;
text-align: center;
vertical-align: middle;
}

#left
{
margin: 0px;
padding: 0px;
float: left;/*katman yerleşimini soldan doğru yapmaya başlıyor*/
height: 500px;
width: 200px;
background-color: #FC9;
}
#content{
margin: 0px;
padding: 0px;
float: left;/*bir önceki katmanın sol yanında yer varsa yeni katman onun yanına yerleşir.*/
height: 500px;
width: 580px;
background-color: #aCf;
}
#right{
margin: 0px;
padding: 0px;
float: left; /*bir önceki katmanın sol yanında yer varsa yeni katman onun yanına yerleşir.*/
height: 500px;
width: 200px;
background-color: #0C9;
}
#footer{
margin: 0px;
padding: 0px;
clear: both; /*soldan doğru yerleşim  iptal edilir*/
height: 70px;
width: 980px;
background-color:#996;
}

CSS ve Liste etiketleri ile En Basit Yatay Menü Yapımı

Yorum bırakın


En basit haliyle css ve html ile Yatay menü yapmak için bir adet html dosyası ve bir adette  css dosyası oluşturalım. Bu dosyaları herhangi bir metin editörü (notepad.exe) veya Dreamweaver Programı ile oluşturabilirsiniz.

  • yataymenuolustur.html dosyasının içeriği;

<html>
<head>
<title>Yatay Menü Oluşturma</title>
<link rel=”stylesheet” type=”text/css” href=”yataymenustilleri.css”/>
<!–css dosyasının eklenmesi–>
</head>
<body>
<ul class=”yataymenu”> <!–dosyadaki sınıfın etikete uygulanması–>
<li><a href=”#” target=”_self”>ANASAYFA</a></li>
<li><a href=”#” target=”_self”>RESİMLER</a></li>
<li><a href=”#” target=”_self”>İLETİŞİM</a></li>
</ul></body></html>

  • yataymenustilleri.css dosyasının içeriği;

.yataymenu{ /*yataymenu sınıfı css ayarları*/
list-style-type:none; /*listedeki madde işaretlerini kaldır */
margin:0;
padding:0;
}
.yataymenu a{ /*yataymenu sınıfına link verildiğinde css ayarları*/
text-decoration:none;/*altı çizili özelliğini kaldır*/
background-color:#336;
color:#CF0;
width:100px;
}
.yataymenu a:hover{/*yataymenu sınıfına link üzerine gelindiğinde css ayarları*/
background-color:#C30;
color:#00F;
}
.yataymenu li{
display:inline;/*liste elemanlarını yanyana yerleştirir.*/
}

CSS ve Liste etiketleri ile En Basit Dikey Menü Yapımı

Yorum bırakın


En basit haliyle css ve html ile Dikey menü yapmak için bir adet html dosyası ve bir adette  css dosyası oluşturalım. Bu dosyaları herhangi bir metin editörü (notepad.exe) veya Dreamweaver Programı ile oluşturabilirsiniz.

  • dikeymenuolustur.html dosyasının içeriği;

<html>
<head>
<title>Dikey Menü Oluşturma</title>
<link rel=”stylesheet” type=”text/css” href=”dikeymenustilleri.css”/>
<!–css dosyasının eklenmesi–>
</head>
<body>
<ul class=”dikeymenu”> <!–dosyadaki sınıfın etikete uygulanması–>
<li><a href=”#” target=”_self”>ANASAYFA</a></li>
<li><a href=”#” target=”_self”>RESİMLER</a></li>
<li><a href=”#” target=”_self”>İLETİŞİM</a></li>
</ul></body></html>

  • dikeymenustilleri.css dosyasının içeriği;

@charset “iso-8859-9”;
/* CSS Document */
body{ /*body etiketi css ayarları*/
margin:0;
padding:0;
background-color:#9C9;
}
.dikeymenu{ /*dikeymenu sınıfı css ayarları*/
list-style-type:none; /*listedeki madde işaretlerini kaldır */
margin:0;
padding:0;
}
.dikeymenu a{ /*dikeymenu sınıfına link verildiğinde css ayarları*/
text-decoration:none;/*altı çizili özelliğini kaldır*/
background-color:#336;
color:#CF0;
width:100px;
display:block; /* listedeki tüm liste elemanlarının genişliği*/
}
.dikeymenu a:hover{/*dikeymenu sınıfına link üzerine gelindiğinde css ayarları*/
background-color:#C30;
color:#00F;
}

Asp.NET C# FileUpload Nesnesi Kullanımı (Dosya Yükleme)

2 Yorum


Fileupload kontrolünün kullanımı, metodları, Basit kodlarla alınabilecek güvenlik önlemlerini yaptığımız bir örnek;

uyeol.aspx Sayfamıza bir adet fileupload nesnesi (Id=uploadresim), bir adet buton (Id=btnresimyukle), bir adet image (Id=Imageyukresim), bir adet label(Id=lblresimsonuc) ve sadece resim yükleme kontrolüyapmak için RegularExpressionValidator (Id=RegularExpressionValidator2)  ekledik. Ben üye ol sayfasında kullandığım için aşağıdaki görseller oradan alındı.

fileupload1 fileupload2RegularExpressionValidator nesnesinin  ControltoValidate özelliğine  fileupload nesnesini bağlamalı ve Validate Expression içinede sadece istenen uzantılar için ^.+\.((jpg)|(gif)|(jpeg)|(png)|(bmp)) yazmak gerekiyor.

uyeol.aspx.cs sayfamızda olayımız şöyle olacak;

protected void btnresimyukle_Click(object sender, EventArgs e)
{
if (uploadresim.HasFile)
{
if (uploadresim.PostedFile.ContentLength > 1024000)
{
lblresimsonuc.Text = “Seçtiğiniz Dosyanın Boyutu Tanımlanandan Daha Büyük!”;
}
else
{

uploadresim.SaveAs(Server.MapPath(“resimler/”) + uploadresim.FileName);//inen dosyanın kaydedileceği yer ve isim
lblresimsonuc.Text = “Dosya Eklendi. Dosya Boyutu:” +Convert.ToString(uploadresim.PostedFile.ContentLength);//dosya yükleme biligileri
lblresimsonuc.Text = lblresimsonuc.Text + ” Dosya Türü:” + uploadresim.PostedFile.ContentType;
Imageyukresim.ImageUrl = “~/resimler/” + uploadresim.FileName;//yüklenen dosyayı image nesnesinde göster
Imageyukresim.Visible = true;
Imageyukresim.Width = 300;
Imageyukresim.Height = 300;
Session[“resimyolu”] = “resimler/” + uploadresim.FileName;//bana dosya yolu lazımdı. onun için yazdım olmasada olur.
}
}
else
{
Response.Write(“Dosya Yükleme Hatası”);
Session[“resimyolu”] = “resimler/herkesinresmi.jpg”;//bana dosya yolu lazımdı. onun için yazdım olmasada olur.
}

Not: Bu sınıfın özellikleri.

Fileupload kontrolünü toolboxdan sürükleyerek formunuza taşıdığınızda kontrolümüzün diğer kontrollerden farklı olarak birkaç özellik,fonksiyon veya alt yordamı var.

.filebytes Gönderilen dosyanın içeriğini byte cinsinden getirir
.filecontent Gönderilen dosyayı stream cinsinden alır
.filename dosyam.uzanti şeklinde dosya adını döndürür
.postedfile HttpPostedFile classını çağırır
.saveas c:\klasor\dosyaadi.uzanti şeklinde verdiğimizde o konuma kaydeder

postedfile sınıfı ve alt yordamları;

.contentlength Dosyanın boyutunu byte olarak döndürür(örnekte dosya boyutunu daha şık göstermenize yardımcı olabilecek bir fonksiyon mevcut)
.contenttype Dosyanın türünü döndürür jpeg için image/pjpeg olabilmektedir örneğin.
.filename Dosyanın kullanıcı bilgisayarındaki yolunu gösterir. e:\klasorum\dosya.jpg gibi
.inputstream Dosyanın içeriğini stream olarak gönderir. Üstteki Fileupload kontrolünün filecontentiyle aynıdır
.saveas Dosyayı belirtilen yere kaydetmeye yarar. Fileupload kontrolünün save as iyle aynıdır

Son olarak web.config dosyasında tüm sayfanın geneli için ayarlama yapmak gerekebilir.

<configuration>
<system.web>
<compilation debug=”true” targetFramework=”4.0″/>
<httpRuntime executionTimeout=”3600″ maxRequestLength=”51200″ />
</system.web>
</configuration>
<!–maxRequestLength özelliği si limiti aşıp aşmadığını kontrol etmek için
executionTimeout si de kötü amaçlı kişileri engellemek için..
Örneğin çok güçlü bağlantıya sahip olan biri siteye
1 gb lık dosya gönderip sunucunun internet trafiğini
yavaşlatmak isteyebilir.
executionTimeout=”3600″ bu 1 saate denk gelir.. Sunucu 1 saatten sonra veri alımını iptal eder
maxRequestLength=”51200″ bu da KB cinsinden veri boyutudur. Bunu aştığında veri alımı iptal eder
Bu ayarlar dosya olsun olmasın tüm istekler için geçerlidir.
O yüzden burayı ayarlarken dikkatli olmalısınız–>

Bana Silverlight Anlat

meslek lisesi ders notları

Eren ÇOLAK

Yazılım Mühendisi Olmak Yolunda İlerliyor...