Merhaba arkadaşlar,
Bu yazımda Asp.Net ? Ajax da Resizable Kontrolünün kullanımını göreceğiz. Peki bu kontrol ne işe yarar. Adından da anlaşılacağı gibi sayfamızda istediğimiz yerin boyutuyla oynayabileceğiz. Ya biz zaten yapan kişiyiz her türlü oynarız demi J bizim amacımızda zaten ziyaretçiye oynatmak.
Sayfamıza bir tane ResizableControl koyalım. İlk özellikleri şu şekilde karşımızda duracaktır.
<cc1:ResizableControlExtender ID="ResizableControlExtender1"
runat="server">
</cc1:ResizableControlExtender>
Gelelim bu kontrolün ne gibi özellikleri var ve ne işe yarıyorlar.
TargetControlId = Hangi panelin boyutlanmasını istiyorsak panelin Id adını bu özelliğe yazıyoruz.
HandleCssClass = Boyutuyla oynayacağımız nesnenin kenarına koyduğumuz, boyutlandırma için kullanacağımız simgenin css ini yazacağımız sınıf.
MinimumWidth ve Height = En düşük boyutlandırma boyutu
Maximum Width ve Height = En büyük boyutlandırma boyutu
OnClientResizeBegin = Boyutlandırmaya başladığımızda çalışmasını istediğimiz fonksiyon
OnClientResizing = Boyutlandırma işlemi yapılırken çalışacak fonksiyon
OnClientResize = Boyutlandırma bittiğinde çalışacak fonksiyon
Sayfamıza bir adet panel, bir adet ResizableControl ve panelin içerisine bir adet image kontrolü ekleyelim. Image kontrolüne bir resim getirelim ve resmin Width ve Height özelliklerini 100% yapalım ki panelin boyutuna göre resmin genişliği ve yüksekliğide ayarlansın.
ResizableControlünün özelliklerini şu şekilde değiştirelim.
<cc1:ResizableControlExtender ID="ResizableControlExtender1"
runat="server"
TargetControlID="Panel1" //Boyutlandırılacak panel
HandleCssClass="kose"> //Boyutlandırma işlemini yapacak simgenin durumu
</cc1:ResizableControlExtender>
Panelimiz ve içerisindeki image kontrolünün kodlarına bakalım.
<asp:Panel ID="Panel1" runat="server" EnableTheming="True"
Height="276px" Width="281px">
<asp:Image ID="Image1" Width="100%" Height="100%" runat="server" ImageUrl="~/Images/Ademx.jpg" />
</asp:Panel>
Şimdi bu boyutlandırma için kullanacağımız simgenin özelikleri için bir style oluşturalım ve aşağıdakileri yazalım.
<head runat="server">
<title>Adem AKTEPE</title>
<style type="text/css">
.kose
{
width:15px;
height:15px;
background-image:url(kose.png);
overflow:hidden;
cursor:se-resize;
}
</style>
</head>
Sayfayı çalıştırdığımızda yukarıdaki gibi resmimiz panelimizin içinde açılacak ve sağ alt tarafına kose clasında tanımladığımız kose.png resmi gelecek. Mouse ile sürüklediğimizde panel genişleyecek ve haliyle resmimizde büyüyecektir.
Kolay Gelsin.