Öğretici: Windows Forms Tasarım Aracı kullanmaya başlama

Windows Forms Tasarım Aracı, Windows Forms uygulamaları oluşturmaya yönelik birçok araç sağlar. Bu makalede, aşağıdaki görevler de dahil olmak üzere tasarımcı tarafından sağlanan çeşitli araçları kullanarak uygulama oluşturma işlemi gösterilmektedir:

• Ek çizgileri kullanarak denetimleri düzenleyin.
• Akıllı etiketler kullanarak tasarımcı görevlerini gerçekleştirin.
• Denetimler için kenar boşluklarını ve doldurmayı ayarlayın.
• Denetim kullanarak TableLayoutPanel denetimleri düzenleyin.
• Denetim kullanarak SplitContainer denetiminizin düzenini bölümleyebilirsiniz.
• Belge Ana Hattı penceresiyle düzeninizde gezinin.
• Boyut ve konum bilgilerinin görüntülendiği konum denetimleri.
• Özellikler penceresi kullanarak özellik değerlerini ayarlayın.

İşiniz bittiğinde, Windows Forms Tasarım Aracı kullanılabilir düzen özelliklerinin birçoğu kullanılarak birleştirilmiş özel bir denetiminiz olur. Bu denetim, basit bir hesap makinesi için kullanıcı arabirimini (UI) uygular. Aşağıdaki görüntüde hesap makinesi denetiminin genel düzeni gösterilmektedir:

Bahşiş

C++ geliştiricisiyseniz ve formlar ve denetimler içeren bir Windows uygulaması oluşturmanıza yardımcı olacak bir öğretici arıyorsanız bkz . Form tabanlı MFC uygulaması oluşturma. Daha genelleştirilmiş bilgiler için bkz . C++ dilinde Windows programlamaya genel bakış.

Özel denetim projesi oluşturma

İlk adım DemoCalculator denetim projesi oluşturmaktır.

1. Visual Studio'yu açın ve C# veya Visual Basic için .NET Framework şablonunu kullanarak yeni bir Windows Forms Denetim Kitaplığı projesi oluşturun. Projeyi DemoCalculatorLib olarak adlandırın.

   

2. Dosyayı yeniden adlandırmak için Çözüm Gezgini UserControl1.vb veya UserControl1.cs'ye sağ tıklayın, Yeniden Adlandır'ı seçin ve dosya adını DemoCalculator.vb veya DemoCalculator.cs olarak değiştirin. "UserControl1" kod öğesine yapılan tüm başvuruları yeniden adlandırmak isteyip istemediğiniz sorulduğunda Evet'i seçin.

Windows Forms Tasarım Aracı DemoCalculator denetimi için tasarımcı yüzeyini gösterir. Bu görünümde, Toolbox'tan denetimleri ve bileşenleri seçip tasarımcı yüzeyine yerleştirerek denetimin görünümünü grafiksel olarak tasarlayabilirsiniz. Özel denetimler hakkında daha fazla bilgi için bkz . Özel denetim çeşitleri.

Denetim düzenini tasarlama

DemoCalculator denetimi birkaç Windows Forms denetimi içerir. Bu yordamda, Windows Forms Tasarım Aracı kullanarak denetimleri düzenleyeceksiniz.

1. Windows Forms Tasarım Aracı sağ alt köşedeki boyutlandırma tutamacını seçip aşağı ve sağa sürükleyerek DemoCalculator denetimini daha büyük bir boyuta getirin. Visual Studio'nun sağ alt köşesinde, denetimler için boyut ve konum bilgilerini bulun. Denetimi yeniden boyutlandırdığınızda boyut bilgilerini izleyerek denetimin boyutunu 500 ve yükseklik 400 olarak ayarlayın.

2. Araç Kutusu'nda Kapsayıcılar düğümünü seçerek açın. SplitContainer denetimini seçin ve tasarımcı yüzeyine sürükleyin.

   SplitContainer DemoCalculator denetiminin tasarımcı yüzeyine yerleştirilir.

   Bahşiş

   Denetim SplitContainer kendisini DemoCalculator denetiminin boyutuna uyacak şekilde boyutlandırıyor. Denetimin özellik ayarlarını görmek için Özellikler penceresine SplitContainer bakın. Dock özelliğini bulun. Değeri DockStyle.Fill'dir. Bu, denetimin SplitContainer kendisini her zaman DemoCalculator denetiminin sınırlarına göre boyutlandıracağı anlamına gelir. Bu davranışı doğrulamak için DemoCalculator denetimini yeniden boyutlandırın.

3. Özellikler penceresinde özelliğinin Dock değerini olarak Nonedeğiştirin.

   Denetim SplitContainer varsayılan boyutuna küçülür ve artık DemoCalculator denetiminin boyutunu takip etmemektedir.

4. Denetimin sağ üst köşesindeki SplitContainer akıllı etiket karakteri () öğesini seçin. Özelliğini olarak ayarlamak için Üst Kapsayıcıya Yerleştir'i FillDock seçin.

   Denetim DemoCalculator SplitContainer denetiminin sınırlarına sabitler.

   Dekont

   Çeşitli denetimler tasarımı kolaylaştırmak için akıllı etiketler sunar. Daha fazla bilgi için bkz . İzlenecek Yol: Windows Forms denetimlerinde Akıllı Etiketleri kullanarak ortak görevleri gerçekleştirme.

5. Paneller arasındaki dikey kenarı seçin ve sol panelde alanın büyük bölümünü alması için sağa doğru sürükleyin.

   , SplitContainer DemoCalculator denetimini iki panele böler ve bunları birbirinden ayıran hareketli bir sınıra sahip olur. Soldaki panelde hesap makinesi düğmeleri ve ekranı bulunur ve sağdaki panelde kullanıcı tarafından gerçekleştirilen aritmetik işlemlerin bir kaydı gösterilir.

6. Özellikler penceresinde özelliğinin BorderStyle değerini olarak Fixed3Ddeğiştirin.

7. Araç Kutusu'nda Ortak Denetimler düğümünü seçerek açın. ListView Denetimi seçin ve denetimin sağ paneline SplitContainer sürükleyin.

8. Denetimin ListView akıllı etiket karakteri seçin. Akıllı etiket panelinde ayarı olarak DetailsdeğiştirinView.

9. Akıllı etiket panelinde Sütunları Düzenle'yi seçin.

   ColumnHeader Koleksiyonu Düzenleyicisi iletişim kutusu açılır.

10. ColumnHeader Koleksiyonu Düzenleyicisi iletişim kutusunda Ekle'yi seçerek denetime ListView bir sütun ekleyin. Sütunun Text özelliğinin değerini Geçmiş olarak değiştirin. Sütunu oluşturmak için Tamam'ı seçin.

11. Akıllı etiket panelinde Üst Kapsayıcıya Yerleştir'i seçin ve ardından akıllı etiket panelini kapatmak için akıllı etiket glifini seçin.

12. Kapsayıcılar düğümü Araç Kutusu'ndan bir TableLayoutPanel denetimi denetimin sol paneline SplitContainer sürükleyin.

    Denetim, TableLayoutPanel akıllı etiket paneli açık olarak tasarımcı yüzeyinde görünür. Denetim, TableLayoutPanel alt denetimlerini bir kılavuzda düzenler. Denetim, TableLayoutPanel DemoCalculator denetiminin görüntüsünü ve düğmelerini tutar. Daha fazla bilgi için bkz . İzlenecek yol: TableLayoutPanel kullanarak denetimleri düzenleme.

13. Akıllı etiket panelinde Satırları ve Sütunları Düzenle'yi seçin.

    Sütun ve Satır Stilleri iletişim kutusu açılır.

14. Beş sütun görüntülenene kadar Ekle düğmesini seçin. Beş sütunun tümünü seçin ve ardından Boyut Türü kutusunda Yüzde'yi seçin. Yüzde değerini 20 olarak ayarlayın. Bu eylem her sütunu aynı genişliğe ayarlar.

15. Göster'in altında Satırlar'ı seçin.

16. Beş satır görüntülenene kadar Ekle'yi seçin. Beş satırın tümünü seçin ve Boyut Türü kutusunda Yüzde'yi seçin. Yüzde değerini 20 olarak ayarlayın. Bu eylem her satırı aynı yüksekliğe ayarlar.

17. Değişikliklerinizi kabul etmek için Tamam'ı seçin ve ardından akıllı etiket panelini kapatmak için akıllı etiket glifini seçin.

18. Özellikler penceresinde özelliğinin Dock değerini olarak Filldeğiştirin.

Denetimi doldurma

Artık denetimin düzeni ayarlandıysa DemoCalculator denetimini düğmeler ve bir ekranla doldurabilirsiniz.

1. Araç Kutusu'nda TextBox denetim simgesini seçin.

   Denetim TextBox , denetimin ilk hücresine TableLayoutPanel yerleştirilir.

2. Özellikler penceresinde, denetimin ColumnSpan özelliğinin TextBox değerini 5 olarak değiştirin.

   Denetim, TextBox satırında ortalanmış bir konuma taşınır.

3. Denetimin özelliğinin TextBoxLeftdeğerini olarak Rightdeğiştirin.Anchor

   Denetim TextBox , beş sütunun tümüne yayılacak şekilde yatay olarak genişler.

4. Denetimin TextAlign özelliğinin TextBox değerini olarak Rightdeğiştirin.

5. Özellikler penceresinde özellik düğümünü Font genişletin. 14 olarak ve denetim için TextBox true olarak ayarlayınBold.Size

6. TableLayoutPanel Denetimi seçin.

7. Araç Kutusu'nda simgeyi Button seçin.

   Denetim Button , denetimin bir sonraki açık hücresine TableLayoutPanel yerleştirilir.

8. Araç Kutusu'nda, denetimin Button ikinci satırını TableLayoutPanel doldurmak için simgeyi dört kez daha seçin.

9. Shift tuşunu basılı tutarak beş Button denetimin tümünü seçin. Denetimleri panoya kopyalamak için Ctrl+C tuşuna basın.Button

10. Denetimlerin kopyalarını denetimin kalan satırlarına yapıştırmak için Ctrl+V tuşuna üç kez basın.TableLayoutPanelButton

11. Shift tuşunu basılı tutarak 20 Button denetimin tümünü seçin.

12. Özellikler penceresinde özelliğinin Dock değerini olarak Filldeğiştirin.

    Tüm denetimler Button , içerdiği hücreleri doldurmak için yerleşik olarak bulunur.

13. Özellikler penceresinde özellik düğümünü Margin genişletin. değerini All 5 olarak ayarlayın.

    Button Tüm denetimler, aralarında daha büyük bir kenar boşluğu oluşturmak için daha küçük boyutlandırılır.

14. Düğme10 ve düğme20'yi seçin ve ardından delete tuşuna basarak bunları düzenden kaldırın.

15. button5 ve button15'i seçin ve ardından bunların RowSpan özelliğinin değerini 2 olarak değiştirin. Bu düğmeler DemoCalculator denetiminin Temizle ve = düğmelerini temsil edin.

Belge Ana Hattı penceresini kullanma

Denetiminiz veya formunuz birkaç denetimle doldurulduğunda, Belge Ana Hattı penceresiyle düzeninizde gezinmeyi daha kolay bulabilirsiniz.

1. Menü çubuğunda Diğer Windows>Belge Ana Hattını Görüntüle'yi>seçin.

   Belge Ana Hattı penceresinde DemoCalculator denetiminin ve bağlı denetimlerinin ağaç görünümü gösterilir. gibi SplitContainer kapsayıcı denetimleri, alt denetimlerini ağaçta alt düğüm olarak gösterir. Belge Ana Hattı penceresini kullanarak denetimleri yerinde yeniden adlandırabilirsiniz.

2. Belge Ana Hattı penceresinde düğme1'e sağ tıklayın ve yeniden adlandır'ı seçin. Adını sevenButton olarak değiştirin.

3. Belge Ana Hattı penceresini kullanarak, tasarımcı tarafından Button oluşturulan addaki denetimleri aşağıdaki listeye göre üretim adına yeniden adlandırın:

   • düğme1 - yediDüğmesi

   • button2 to eightButton

   • button3 - nineButton

   • button4 to divisionButton

   • button5 to clearButton

   • button6 - fourButton

   • düğme7 - beşDüğmesi

   • button8 - sixButton

   • button9 to multiplicationButton

   • button11 - oneButton

   • button12 - twoButton

   • button13 to threeButton

   • button14 to subtractionButton

   • button15 to equalsButton

   • button16 to zeroButton

   • button17 to changeSignButton

   • button18 to decimalButton

   • button19 to additionButton

4. Belge Anahattı ve Özellikler pencerelerini kullanarak, her Button denetim adının özellik değerini aşağıdaki listeye göre değiştirinText:

   • sevenButton denetim metni özelliğini 7 olarak değiştirme

   • eightButton denetim metni özelliğini 8 olarak değiştirme

   • nineButton denetim metni özelliğini 9 olarak değiştirin

   • divisionButton denetimi metin özelliğini (eğik çizgi) olarak / değiştirme

   • clearButton denetimi metin özelliğini Temizle olarak değiştirme

   • fourButton denetim metni özelliğini 4 olarak değiştirme

   • fiveButton denetim metni özelliğini 5 olarak değiştirme

   • sixButton denetim metni özelliğini 6 olarak değiştirme

   • ÇarpmaDüğmesi denetimi metin özelliğini * (yıldız işareti) olarak değiştirme

   • oneButton denetimi metin özelliğini 1 olarak değiştirme

   • twoButton denetimi metin özelliğini 2 olarak değiştirme

   • threeButton denetimi metin özelliğini 3 olarak değiştirme

   • subtractionButton denetimi metin özelliğini (kısa çizgi) olarak - değiştirme

   • equalsButton denetimi metin özelliğini = (eşittir işareti) olarak değiştirme

   • zeroButton denetimi metin özelliğini 0 olarak değiştirme

   • changeSignButton denetim metni özelliğini olarak değiştirme +/-

   • decimalButton denetimi metin özelliğini olarak değiştirin. (nokta)

   • additionButton denetimi metin özelliğini (artı işareti) olarak + değiştirme

5. Tasarımcı yüzeyinde Shift tuşunu basılı tutarak tüm Button denetimleri seçin.

6. Özellikler penceresinde özellik düğümünü Font genişletin. 14 olarak ve tüm denetimler için true olarak ayarlayınBold.ButtonSize

Bu yönergeler kümesi DemoCalculator denetiminin tasarımını tamamlar. Geriye kalan tek şey hesap makinesi mantığını sağlamaktır.

Olay işleyicilerini uygulama

DemoCalculator denetimindeki düğmeler, hesap makinesi mantığının büyük bir kısmını uygulamak için kullanılabilecek olay işleyicilerine sahiptir. Windows Forms Tasarım Aracı, tek bir seçimle tüm düğmeler için tüm olay işleyicilerinin saplamalarını uygulamanıza olanak tanır.

1. Tasarımcı yüzeyinde Shift tuşunu basılı tutarak tüm Button denetimleri seçin.

2. Denetimlerden Button birini seçin.

   Kod Düzenleyicisi, tasarımcı tarafından oluşturulan olay işleyicilerine açılır.

Denetimi test edin

DemoCalculator denetimi sınıfından UserControl devraldığından, davranışını UserControl Test Kapsayıcısı ile test edebilirsiniz. Daha fazla bilgi için bkz . Nasıl yapılır: UserControl'ün çalışma zamanı davranışını test etme.

1. UserControl Test Kapsayıcısı'nda DemoCalculator denetimini derlemek ve çalıştırmak için F5 tuşuna basın.

2. Paneller arasındaki kenarlıkları SplitContainer seçin ve sola ve sağa sürükleyin. TableLayoutPanel ve tüm alt denetimleri, kullanılabilir alana sığacak şekilde kendilerini yeniden boyutlandırır.

3. Denetimi test etme işlemini tamamladığınızda Kapat'ı seçin.

Formda denetimi kullanma

DemoCalculator denetimi diğer bileşik denetimlerde veya formda kullanılabilir. Aşağıdaki yordamda nasıl kullanılacağı açıklanmaktadır.

Proje oluşturma

İlk adım, uygulama projesini oluşturmaktır. Özel denetiminizi gösteren uygulamayı oluşturmak için bu projeyi kullanacaksınız.

1. Yeni bir Windows Forms Uygulaması projesi oluşturun ve demoCalculatorTest olarak adlandırabilirsiniz.

2. Çözüm Gezgini'da DemoCalculatorTest projesine sağ tıklayın ve ardından Proje Başvurusu Ekle'yi>seçerek Başvuru Yöneticisi iletişim kutusunu açın.

3. Projeler sekmesine gidin ve demoCalculatorLib projesini seçerek test projesine başvuru ekleyin.

4. Çözüm Gezgini'da DemoCalculatorTest'e sağ tıklayın ve ardından Başlangıç Projesi Olarak Ayarla'yı seçin.

5. Windows Forms Tasarım Aracı formun boyutunu yaklaşık 700 x 500'e yükseltin.

Formun düzenindeki denetimi kullanma

DemoCalculator denetimini bir uygulamada kullanmak için forma yerleştirmeniz gerekir.

1. Araç Kutusu'nda DemoCalculatorLib Bileşenleri düğümünü genişletin.

2. DemoCalculator denetimini Araç Kutusu'ndan formunuza sürükleyin. Denetimi formun sol üst köşesine taşıyın. Denetim formun kenarlıklarına yakın olduğunda, ek çizgiler görüntülenir. Snaplines, formun Padding özelliğinin ve denetimin özelliğinin uzaklığı Margin gösterir. Denetimi, ek çizgilerle belirtilen konuma getirin.

   Daha fazla bilgi için bkz . İzlenecek yol: Ek çizgileri kullanarak denetimleri düzenleme.

3. Araç Kutusu'ndan bir Button denetimi sürükleyin ve forma bırakın.

4. Button Denetimi DemoCalculator denetimi çevresinde hareket ettirin ve ek çizgilerinin nerede göründüğünü gözlemleyin. Bu özelliği kullanarak denetimlerinizi hassas ve kolay bir şekilde hizalayabilirsiniz. Button İşiniz bittiğinde denetimi silin.

5. DemoCalculator denetimine sağ tıklayın ve özellikler'i seçin.

6. özelliğinin Dock değerini olarak Filldeğiştirin.

7. Formu seçin ve ardından özellik düğümünü Padding genişletin. Tümü değerini 20 olarak değiştirin.

   DemoCalculator denetiminin boyutu, formun yeni Padding değerine uyum sağlamak için küçültülür.

8. Çeşitli boyutlandırma tutamaçlarını farklı konumlara sürükleyerek formu yeniden boyutlandırın. DemoCalculator denetiminin sığacak şekilde nasıl yeniden boyutlandırıldığını gözlemleyin.

Sonraki adımlar

Bu makalede basit bir hesap makinesi için kullanıcı arabiriminin nasıl yapılandırıldığı gösterilmiştir. Devam etmek için hesap makinesi mantığını uygulayarak işlevselliğini genişletebilir ve ardından ClickOnce kullanarak uygulamayı yayımlayabilirsiniz. Alternatif olarak, Windows Forms kullanarak resim görüntüleyici oluşturduğunuz farklı bir öğreticiye de devam edebilirsiniz.

Ayrıca bkz.

• Windows Forms denetimleri
• Windows Forms denetimleri için erişilebilirlik
• ClickOnce kullanarak yayımlama