Make parent window blured for better focus on UI , in WPF | Manas Patnaik

Make parent window blured for better focus on UI , in WPF | Manas Patnaik.

Make parent window blured for better focus on UI , in WPF | Manas Patnaik

 

Reklamlar

WIN – DataSet Operations – Creating Search Form With Dataset

Visual Studio ile Rapid Development hayatımız çok değişmiştir. Visual diller ile bize hız,  esneklik ve pratikliği bir arada sunar. Bu makalemiz ile bu konu üzerine bir başlangıç yaparak hızlı ve pratik bir şekilde uygulama geliştirme konusunda bir makale dizisi oluşturacağım. Tabii ki makalelerimizin baş rol oyuncusu “DataSet” nesnesi olacaktır. Sözü fazla uzatmadan yapacağımız projelerin ne olduğuna kısaca değinmek istiyorum. Bu makale dizisi boyunca “Northwind” veritabanından yararlanarak bazı ekranlar oluşturacağız.. Bu sayede “DataSet” ile yapabileceğiniz işlemleri ve kolaylıklarına değinmiş olacağız..

  • Arama formu.. (Search Form)
  • Birden çok’a filitreleme formu.. (One To Many Filter)
  • Hızlı gözat listesi içeren form.. (Lookup List)

Creating Search Form With Dataset

Evet ilk makale konumuz olan Arama formu oluşturmayı bir de dataset nesnesinden dinlemeye başlayalım.. 🙂

Örnek bir proje oluşturuyoruz.. Ben projenin ismine “CreatingSearchFormWithDataSet” verdim. Projemize 1 adet “Form” ekliyoruz.. Ardından visual studio “Data” menüsünden “Show Data Sources” bölmesinin açılmasını sağlıyoruz..

image

Bu bölmeden “Add New Data Source…” link’ine tıklıyoruz.. Ya da bu bölmedeki sol üst köşedeki veritabanı simgesine tıklayabilirsiniz..

image

Ardından aşağıdaki adımları takip ederek DataSet nesnemizi oluşturuyoruz..

image

image

image

image

image

image

Dataset nesnemiz visual studio tarafından seçtiğimiz tablo ve kolonlardan oluşacak şekilde oluşturuluyor..

image

CustomerDataSet” nesnemizin “Customers” tablosunu seçerek “Form1” üzerine sürükleyerek bırakıyoruz.. Visual Studio bizim için şunları yapıyor;

image

  • 1 adet “CustomerDataSet” nesnesi ekliyor. Bu Data Sources bölümünde oluşturduğumuz Data set nesnesinin bir örneği(instance) olmaktadır.
  • 1 adet “Binding Source” nesnesi ekliyor. Bu nesnenin “DataSource” özelliğini “CustomerDataSet” ; “Data Member” özelliğini “Customers” tablosunu işaret edecek şekilde ayarlıyor.
  • 1 adet “Binding Navigator” nesnesi ekliyor. formun üst kısmıdaki navigation ‘ı içeriyor. Bu navigator nesnesinin Data Source özelliğine oluşturulan Binding Source bağlanmıştır.
  • 1 adet “customersTableAdapter” nesnesi ekleniyor. Bu nesne “Sql Adapter” nesnesinin, oluşturduğumuz CustomerDataSet’i içindeki “Customers“ tablosu için özelleştirilmiş halidir.
  • 1 adet “tableAdapterManager” nesnesi ekleniyor. Bu nesne formunuz üzerinde kullandığınız “CustomerDataSet” ile ilişkili tüm adapter nesnelerini içinde barındırarak tüm adapter nesnelerini merkezi bir yerden yönetmemizi sağlar. Örneğin; “customersTableAdapter” bu nesne tarafından otomatik olarak tanımlanmıştır ve yönetilir. Eğer dataset nesnemize başka bir tablo daha eklersek, o tabloya ait otomatik olarak oluşturulacak olan “[Tabloİsmi]TableAdapter” nesnesi gene otomatik olarak bu “tableAdapterManager” nesnesine bağlanacaktır.

image

Bu işlemlerin ardından form üzerinde oluşturulan DataGridView kontrolünü seçiyoruz ve “Properties” bölümünden “Anchor” özelliğini resimdeki gibi ayarlıyoruz. Böylece form boyutu ile oynandığında DataGridView ‘da boyutlanacaktır.

Kod tarafına baktığımızda bizim için bazı otomatik kodlamaların yapıldığını görüyoruz.

 

Code Snippet
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace CreatingSearchFormWithDataSet
{
    public partial class Form1 : Form
    {
        public Form1() {
            InitializeComponent();
        }

        private void customersBindingNavigatorSaveItem_Click(object sender, EventArgs e) {
            this.Validate();
            this.customersBindingSource.EndEdit();
            this.tableAdapterManager.UpdateAll(this.customerDataSet);

        }

        private void Form1_Load(object sender, EventArgs e) {
            // TODO: This line of code loads data into the 'customerDataSet.Customers' table.
            // You can move, or remove it, as needed.
            this.customersTableAdapter.Fill(this.customerDataSet.Customers);

        }
    }
}

Bu kodlar ile form ilk yüklendiğinde “customerTableAdapter” nesnesi ile “CustomersDataSet” içindeki “Customers” tablomuz dolduruluyor. Bir de form’ üzerindeki “Navigator” üzerindeki “Kaydet(Save)” butonuna basıldığında “CustomersDataSet” üzerinde yapılan tüm işlemler kaydediliyor.

Dikkat !!

Sadece “Customers” tablosu değil, tüm tablolardaki değişiklik yapılmış satırlar veritabanına gönderilerek işlemler yapılıyor. Bizim projemizde sadece “Customers” tablomuzu seçtiğimiz için zaten 1 adet tablo bulunmaktadır. Fakat diğer tablolarıda dataset nesnemize eklediysek ve bu tablolarda da “Ekleme(Insert)”, “Güncelleme(Update)”, “Silme(Delete)” işlemleri yaptıysak, bu değişiklikleri yaptığımız satırlar(tüm tablolar değil) adapter nesnesi üzerinden güncelleniyor. İşte burada “AdapterManager” her tablo için özel oluşturulan adapter nesnelerini kullanarak bu işlemleri tek bir noktadan yapıyor.

Uygulamamızı bir çalıştıralım ve neler yapıldığına bakalım.

image

Evet gördüğünüz gibi verilerimiz yüklendir. Navigator üzerinde gördüğünüz işlemler çalışmaktadır. Yani bir kolondaki veriyi değiştirip “Kaydet(Save)” butonuna basarsanız. Veritabanına güncelleme yapılacaktır. Ya da bir satırı seçip sildiğinizde ve tekrar “Kaydet(Save)” butonuna bastığınızda ilgili satır veritabanından silinecektir. Ya da “+” butonuna basarak yeni bir satır oluşacaktır ve bu satır içine “boş bırakılamayacak” verileri girerek tekrar “Kaydet(Save)” butonuna basarsanız veritabanına yeni kayıt eklenecektir. Burada dikkat ettiyseniz yeni kayıt ekleme, güncelleme, silme işlemlerini yaptıktan sonra “Kaydet(Save)” butonuna bastığımızda işlemler veritabanında gerçekleştirilmektedir. Yani kaydetme işlemi yapmadıkça, yaptığınız işlemleri iptal etme şansınız var demektir. 🙂

Dikkat !!

Bazı tablolarda kayıt silme işlemi yaparken hata ile karşılaşabilirsiniz. Bunun sebebi büyük olasılıkla; silmek istediğiniz tablodaki kaydın ilişkili olduğu bir tabloda kullanılmasından kaynaklanır. Önce alt tablodaki kayıtların silme işlemini yapıp bu kaydı silerseniz sorunsuz olarak kaydın silinmesini sağlamış olursunuz.. İlerleyen yazılarımızda bununla ilgili örnekte yapacağız..

Şimdi oluşturacağım basit bir senaryo üzerinden ilerleyelim. Buraya kadar herşey güzel verilerimiz veritabanından listeliyoruz. Yeni kayıt ekleme, silme, güncelleme işlemlerini yapabiliyoruz. Peki belli bir kolona göre arama yapmak istersek bunu nasıl yapacağız. 1 textbox ve 1 buton koyup pataküte kod yazacağız.. Tabii ki hayır.. 🙂 Dataset nesnesi tasarlanırlen çoğu programda olan ortak işlemler düşünülmüş ve bunlara uygun bir nesne oluşturulmuştur. Şimdi senaryomuza uygun olarak programımızda “City” ve “Contact Title” kolonları üzerinde arama yapılmasını sağlayalım.

image

Uygulamamızı kapatıyoruz ve tasarım ekranında “DataGridView” kontrolümüzü seçiyoruz. Sağ üst köşesindeki “Küçük okçuk” ‘a tıklayarak “Add Query” linkine tıklıyoruz..

image

Ekranın üstünde şu açıklama yazıyor.. Varolan ya da yeni bir sorgu girin. Bir ToolStrip kontrolü eklenecek ve bu kontrol ile sorgunuz çalıştırılacaktır. Varolan bir sorguyu değiştirmek ya da stored procedure kullanmak istiyorsan, dataset designer ‘daki ilgili tabloya ait “adapter” üzerindeki “Command” ayarını kullanın.

Biz o değişikliği daha sonra yapacağız.. 🙂 Yukarıdaki resimde gördüğünüz gibi “FillByCity” olarak yeni bir sorgu oluşturacağımı belirttim diyerek “Query Builder…” butonuna basıyorum..

image

İlk önce “City” alanının “Filter” bölümüne “ LIKE @City + ‘%’ ” ifadesini yazıyoruz. Böylece “ @City ” değişkeni ile göndereceğimiz değer ile başlayan şehirlerin listelenmesini sağlayacaktır. Listeleme sonucunda elde edilen veriler “City” kolonuna göre A’dan Z’ye sıralanması için “Sort Type” alanı “Ascending” olarak seçtim.

image

Execute Query” bastığımızda bizden “ @City ” değişkenin değerini isteyecektir. “Lon” yazarak “OK” bastığınızda “London” değerine sahip satırlar gelecektir. Sorgumuz hazır “OK” basarak “Query Builder…” ekranını sonlandırıyoruz..

image

Bu ekranda yazdığımız sorgumuz görünmektedir. Bu ekranıda “OK” diyerek sonlandırıyoruz. Form’umuza otomatik olarak City kolonu üzerinden arama yapan ToolStrip kontrollerimi eklenecektir.

image

image

Biraz görsellik yaparak makalemizi sonladıralım. Yeni eklenen “ToolStrip” kontrolünü ve onun içindeki kontrolleri görmüşsünüzdür. “City :” yazan label’ı “Bold”, “FillByCity” yazan butonoda yeni bir “Image” ekliyorum. “DisplayStyle” özelliğini “Image” olarak ayarlamayı unutmayın !

image

Uygulamamızı çalıştırıyoruz..

image

Gördüğünüz  gibi aranılan kelime ile başlayan tüm kayıtlar listelendi. Çok hızlı bir şekilde “ContactName” ve “ContactTitle” kolonları içinde arama özelliği kazandıralım.

image

image

image

image

City Alanına Göre Arama

image

Contact Title Alanına Göre Arama

image

ContactName Alanına Göre Arama

image

Eğer arama alanlarını tek bir menü satırında toplamak isterseniz; Navigator’ı seçiyoruz ve “Smart Tag(Sağ üstteki küçük okçuk)” ‘dan “Embed in ToolStripContainer” seçin.

image

DataGridView’ı Oluşan panel’in içine atın ve DataGridView’ın “Dock” özelliğini “Fill” olarak ayarlayın..

image

Sırası ile yukarıda kalan arama ToolStrip kontrollerini kes yaparak Navigator ‘ın bulunduğu panel’i genişletin ve yanında boş bir alana yapıştır’ın. Aynı işlemi hepsi için yapın.

image

Tüm arama alanlarını bu alana taşıdıysanız. Bu panel’in “Dock” özelliğini “Fill” yapın. Sonra her bir arama ToolStrip’inin taşınabilir olduğunu göreceksiniz. İstediğini gibi düzenleyebilirsiniz.. Ben hepsini alt satırda yan yana dizdim..

image

Bu kes – yapıştır işleminde kestiğiniz kontrolün olay bağlantıları kopuyor. Bu bağlantıları tekrar yapmanız gerekmektedir. Sadece ilgili kontrolü seçip, ilgili olayına gelerek bağlı olduğu metodu seçin. Aşağıdaki resmin solundaki gibi. City arama butonunu seçtim ve “Click” olayını, ilgili metoduna bağladım.

image

Uygulama çalışıyor süper.. 🙂

image

Herkese iyi çalışmalar..

FusionChart ile Grafik Oluşturma

Bu görsel dersimizde Fusion Chart aracını kullanarak görsel grafikler oluşturarak kullanıcıları cezbeden uygulamalar nasıl geliştirebileceğimizi anlatıyor olacağım. Basit bir uygulama ile Fusion Chart’ları nasıl kullanacağımızı ve uygulamalarımızda bu güzel grafikleri nasıl oluşturacağımızı anlatıyorum.

Fusion Chart aracının ücretsiz versiyonunu buradan indirebilirsiniz..

Video – 1

http://content.screencast.com/users/MaviSeffaf/folders/Default/media/9918070a-4b33-4639-9f9f-8fd54ed0075b/bootstrap.swf

Videoyu indir !

Video – 2

http://content.screencast.com/users/MaviSeffaf/folders/Default/media/7fc6615d-429f-45d8-b11b-bf278d2e9426/bootstrap.swf

Videoyu indir !

Uygulamanın form görünümü..

KODLAR

Form1.cs


using System;

using System.Collections.Generic;

using System.ComponentModel;

using System.Data;

using System.Drawing;

using System.Linq;

using System.Xml.Linq;

using System.Text;

using System.Windows.Forms;

 

namespace LearnFusionChart

{

    public partial class Form1 : Form

    {

        public Form1()

        {

            InitializeComponent();

        }

 

        private void CreateXML(DataGridView dgv)

        {

            XDocument xDoc = XDocument.Load(Application.StartupPath + "\\" + "FusionChartFiles" + "\\" + "Line2D.xml");

            XElement root = xDoc.Root;

 

            root.Elements().Remove();

 

            DataTable dt = dgv.DataSource as DataTable;

 

            root.Attribute("caption").Value = "Aylık Satışlarım";

            root.Attribute("subcaption").Value = "2009 Yılı için";

            root.Attribute("xAxisName").Value = "Aylar";

            root.Attribute("yAxisName").Value = "Satislar";

            root.Attribute("numberPrefix").Value = "TL";

            root.Attribute("yAxisMinValue").Value = dt.Compute("MIN(Satışlar)", null).ToString();

 

            foreach (DataRow dr in dt.Rows)

            {

                XElement element = new XElement("set",

                    new XAttribute("name", dr["Aylar"].ToString().Substring(0, 3)),

                    new XAttribute("value", dr["Satışlar"].ToString()),

                    new XAttribute("hoverText", dr["Aylar"].ToString()));

 

                root.Add(element);

            }

 

            xDoc.Save(Application.StartupPath + "\\" + "FusionChartFiles" + "\\" + "Line2D.xml");

            xDoc = null;

        }

 

 

        private void btnDataTableOlustur_Click(object sender, EventArgs e)

        {

            DataTable dt = new DataTable();

            dt.Columns.AddRange(

                new DataColumn[]

                {

                    new DataColumn("Aylar"),

                    new DataColumn("Satışlar")

                });

 

 

            Random rnd = new Random();

            DataRow dr = null;

 

            for (int i = 1; i <= 12; i++)

            {

                dr = dt.NewRow();

 

                dr["Aylar"] = DateTime.Parse("01." + i.ToString() + ".2009").AddMonths(0).ToString("MMMM");

                dr["Satışlar"] = rnd.Next(0, 100).ToString();

 

                dt.Rows.Add(dr);

            }

 

            this.dataGridView1.DataSource = dt;

        }

        private void btnGrafik_Click(object sender, EventArgs e)

        {

            this.CreateXML(this.dataGridView1);

 

            this.webBrowser1.Navigate(

                Application.StartupPath + "\\" + "FusionChartFiles" + "\\" + "Line2D.html");

        }

    }

}


Line2D.xml


<graph caption='Monthly Sales Summary' subcaption='For the year 2004'

       xAxisName='Month' yAxisMinValue='15000' yAxisName='Sales'

       decimalPrecision='0' formatNumberScale='0' numberPrefix='$'

       showNames='1' showValues='0'  showAlternateHGridColor='1'

       AlternateHGridColor='ff5904' divLineColor='ff5904' divLineAlpha='20'

       alternateHGridAlpha='5' >

   <set name='Jan' value='17400' hoverText='January'/>

   <set name='Feb' value='19800' hoverText='February'/>

   <set name='Mar' value='21800' hoverText='March'/>

   <set name='Apr' value='23800' hoverText='April'/>

   <set name='May' value='29600' hoverText='May'/>

   <set name='Jun' value='27600' hoverText='June'/>

   <set name='Jul' value='31800' hoverText='July'/>

   <set name='Aug' value='39700' hoverText='August'/>

   <set name='Sep' value='37800' hoverText='September'/>

   <set name='Oct' value='21900' hoverText='October'/>

   <set name='Nov' value='32900' hoverText='November' />

   <set name='Dec' value='39800' hoverText='December' />

</graph>


Line2D.html


<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>FusionCharts Free Documentation</title>

<link rel="stylesheet" href="../Contents/Style.css" type="text/css" />

<script language="JavaScript" src="../JSClass/FusionCharts.js"></script>

</head>

 

<body>

<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">

  <tr>

    <td valign="top" class="text" align="center"> <div id="chartdiv" align="center">

        FusionCharts. </div>

      <script type="text/javascript">

           var chart = new FusionCharts("../Charts/FCF_Line.swf", "ChartId", "600", "350");

           chart.setDataURL("Data/Line2D.xml");          

           chart.render("chartdiv");

        </script> </td>

  </tr>

  <tr>

    <td valign="top" class="text" align="center"> </td>

  </tr>

  <tr>

    <td valign="top" class="text" align="center"><a href="Data/Line2D.xml" target="_blank"><img src="../Contents/Images/BtnViewXML.gif" alt="View XML for the above chart" width="75" height="25" border="0" /></a></td>

  </tr>

</table>

</body>

</html>


Projeyi buradan indirebilirsiniz..

C# – User Control To XML – Part – 1

Bu görsel derste;

Bir Container(Panel) içine kendi oluşturduğumuz UserControllerin Run-time ‘da dinamik olarak eklenmesini, ardından bir tıklama ile container içine eklediğimiz UserControllerin XML bir dosyaya kayedilmesini sağlayacağız. Ardından bu dosyadan okuyarak UserControlleri container içine tekrardan oluşturacağız.. Son olarak’da container içinde inşaa ettiğimiz UserControllerimizin container dışındaki bir kontrole nasıl erişbileceğini göstereceğim.

Tüm bu işlemleri yaparken, form arka planına kod yazımını en az düzeyde tutup, UserController ve container(Panel) içinde metod tanımlayarak bu kısımlarda kodu oluşturacağız. Böylece daha sade ve temiz bir kodlama ile modüler bir yapı oluşturmuş olacağız. Bu yapı sayesinde istediğimiz zaman projeye Usercontrol ekleyerek projenin daha temiz ve karmaşıklaşmadan genişlemesini sağlayacağız. Ayrıca modifikasyona açık bir yapı oluşturmuş olacağız.

3 bölüm şeklinde yayınlayacağım bu konuyu severek izleyeceğinizi umuyorum.. 🙂
3. bölümden sonraki makalemde pojenin kodunu bulabilirsiniz. Ayrıca projeyide indirebilirsiniz..

http://content.screencast.com/users/MaviSeffaf/folders/Default/media/6ce6c81f-d09c-4e40-9a0c-e9b4a21503c7/bootstrap.swf

Videoyu indir!

C# – User Control To XML – Part – 2

User Control To Xml görsel dersimizin 2. bölümünde;
Oluşturduğumuz user controlleri XML olarak kaydetmek ve XML’den okuyarak tekrar listelenmesini sağlıyor olacağız.. 1 saatlik bir video olduğu için 3 parça olarak yayınlıyorum . 🙂

http://content.screencast.com/users/MaviSeffaf/folders/Default/media/a7a0e6d3-ac64-447d-8f4e-760232cf20d1/UserControlToXml-Part2_1.avi
Videoyu indir!

http://content.screencast.com/users/MaviSeffaf/folders/Default/media/82b7435c-6399-4346-868b-4b395f2116d5/UserControlToXml-Part2_2.avi
Videoyu indir!

http://content.screencast.com/users/MaviSeffaf/folders/Default/media/f956c228-2184-4ebb-b7cb-a39250d5f178/UserControlToXml-Part2_3.avi
Videoyu indir!

C# – User Control To XML – Part – 3

UserControl To Xml Bölüm 3 görsel dersinde;
Run-time’da oluşturduğumuz UserControl’lerimizin içinde bulundukları Container Panel dışında bir kontrole erişimlerini nasıl sağladığımızı görebilirsiniz.. Mümkün oldukça Form.cs class’ına kodlama yapmadan erişim sağlamanın yöntemini geliştiriyoruz..

http://content.screencast.com/users/MaviSeffaf/folders/Default/media/3ddfadd9-ecc0-46bd-a6b5-402c0d6f53be/bootstrap.swf

Videoyu indir!

Proje dosyası :
UserControlToXml.rar

C# – Plugin Tabanlı Uygulama Geliştirme Part – 2

Daha önce yayınladığım “C# – Plugin Tabanlı Uygulama Geliştirme Part – 1” makalesinin ikinci bölümüyle tekrar buradayız.

Bu bölümde, kullanıcıya uygulamamıza geliştireceği eklenti üzerinde daha çok işlem yapabilmesini, daha fazla noktaya erişebilmesini nasıl sağlarız buna bakacağız. Tabii bu şekilde bir eklenti geliştirebilme desteği vermek bazı problemleri de beraberinde getiriyor. Örneğin, güvenlik gibi.. Fakat zaten bölüm – 1 ‘deki makalemizde de belirttiğimiz gibi, bölüm – 1 de kısıtlamalı eklenti geliştirme yetkisi vermemize rağmen, mutlaka bir şekilde kötü amaçlı kod yazılabilir. Zaten piyasadaki eklenti desteği veren uygulamalarda görüyoruz ki, 3.kişilerin geliştirdiği eklentileri yüklerken, güvenlik ile ilgili konuda ucu açık bırakılıyor. Zararlı olabileceği de belirtiliyor fakat biz güvenip kullanıyoruz. Tabii hepsi kötü amaçlı diye birşey yok. Sadece olabilir !

Bölüm – 1 ‘de kısıtlamalı yaptığımız yapıyı, burada daha esnek bir şekilde kullanıcıya sunarak, uygulamamıza daha güçlü eklenti geliştirebilirlik katacağız.

1 saatlik video anlatımın hoşunuza gideceğini düşünüyorum..
İyi seyirler..

Uygulama videosu :
http://cid-f2e617aff724ee2b.skydrive.live.com/embedrowdetail.aspx/Video%20Derslerim/Add-In%20Tabanli%20Uyg.%20Gelistime/Part%7C_2/Plugin%20Tabanl%c4%b1%20Uygulama%20Geli%c5%9ftirme%20B%c3%b6l%c3%bcm%202.rar

Proje dosyası :
http://cid-f2e617aff724ee2b.skydrive.live.com/embedrowdetail.aspx/Video%20Derslerim/Add-In%20Tabanli%20Uyg.%20Gelistime/Part%7C_2/PluginSolutionWithUserControl.rar