Anasayfa / Yazılım / ASP.NET / GridView Kontrolünün CSS ile Biçimlendirilmesi

GridView Kontrolünün CSS ile Biçimlendirilmesi

GridView kontrolümüzü Visual WEB studio içinde yer alan hazır şablonlar ile görselleştirebileceğimizi söylemiştik. Bunun yanı sıra kendimiz de kendi istediğimiz kurallar doğrultusunda bu işlemi gerçekleştirebiliriz. CSS ile görselleştireceğiz. Bunun için önceden veri çektiğimiz bir yazı içinde işlemi gerçekleştiriyoruz. Önceki yazı için aşağıya göz atabilirsiniz.

http://www.ismailgursoy.com.tr/gridview-sutunlarini-ozellestirmek/

Bu yazımızda öncelikle bir CSS dosyası oluşturacağız. CSS dosyamda GridView kontrolünde görselleştirmek istediğim kısımlar için bir kaç class tanımlıyorum. Bundan önce projeme bir adet StyleSheet dosyası ekliyorum ben adını değiştirmedim var sayılan olarak StyleSheet.css olarak bıraktım. Başlığımı ve GridView kontrolümü biçimlendirmek için bir kaç kural tanımlıyorum. (Burada CSS anlatmıyorum dolayısı ile ayrıntısına inmiyorum, CSS hakkında bilgi için site içinde arama yapabilirsiniz)

styleSheet.css dosyası :

h1 
{
	color : #0997EF;
}

.GridMain
{
border-right: gainsboro thin solid;
border-top: gainsboro thin solid;
border-left: gainsboro thin solid;
border-bottom: gainsboro thin solid;
background-color : #333333;
width: 400px;
font-weight : bold;
}

.GridRow
{
background-color : #0997EF;
color: White;
font-family : Calibri, Arial, Sans-Serif;
}
.GridSelectedRow
{
font-family : Calibri, Arial, Sans-Serif;
background-color: #E6E6FA;
}
.GridHeader
{
background-color: #ADD8E6;
font-weight: bold;
text-align: left;
color : #606166;
font-family : Calibri, Arial, Sans-Serif;
}

GridView kontrolüm için genel olarak, satır olarak, header olarak ve seçili satır olarak bir takım CSS Rule tanımlamaları yaptım. Şimdi tekrar Default.aspx sayfama dönüyorum ve burada bir takım düzenlemeleri yapıyorum.

Öncelikle CSS dosyamı web formuma dahil etmem gerekiyor. Bunun için direkt olarak web formumun kod sayfası açıkken, sağ taraftan solution explorer üzerinde StyleSheet.css dosyasını web formum üzerinde head taginin üzerine sürüklüyorum. Böylelikle web formum üzerinden css dosyama bağlantı sağlanıyor.

...
..

...
...

Daha sonra GridView kontrolüme bir takım özellikleri eklemem gerekiyor. Bunun için web formumda yine kod bölümünde şunları ekliyorum.

...
...

         
         
         
...
...

Görüldüğü gibi RowStyle, SelectedRowStyle, HeaderStyle özellikleri ve bunlara karşılık gelen CssClassları ve genel olarak GridView kontrolüm içine de direkt ilgili CssClassı ekledim. Bunları belirtmem gerekiyor çünkü bunların doğrultusunda ilgili Css özelliklerim etkin olacak. Bu işlemlerin sonucunda ekranımda veri liste kısmım şu şekilde :

Siz tabii ki daha güzel bir tasarım yapacaksınız 🙂

Şimdi Default.aspx sayfamın tüm kodlarını topluca paylaşayım :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>







    


    

Veri Listesi

Bir sonraki yazımda da GridView kontrolünün satırlarını seçme işlemine değineceğim.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir