Aracılığıyla paylaş

İzlenecek yol: Windows Forms Tasarımcısına Başlarken

  • Makale

Windows Forms Designer, Windows Forms uygulamaları geliştirmek için birçok araç sağlar. Bu izlenecek yolda, Tasarımcısı tarafından sağlanan çeşitli araçlar kullanılarak bir uygulamalarının nasıl oluşturulacağını göstermektedir. Bu izlenecek yolda gösterilen görevler aşağıdakileri içerir:

  • Bir Windows Forms projesi oluþturmak.

  • Snaplines denetimleri düzenleme.

  • Akıllı etiketleri kullanarak Tasarımcı görevlerini yerine getirmeye.

  • Kenar boşluklarını ayarlama ve denetimleri için doldurma.

  • Denetimler kullanılarak bir TableLayoutPanel denetim.

  • Denetimin işleyiş düzeni kullanarak bölümleme bir SplitContainer denetim.

  • Kendi düzeniniz gezinme Document Outline pencere.

  • Boyut ve konum bilgileri ekran denetimleriyle konumlandırma.

  • Properties penceresini kullanarak özellik değerlerini ayarlama.

İşlemi tamamladığınızda, birçok Windows Forms tasarýmcýsý düzeni özelliğini kullanarak ikincisine özel bir denetime sahip olur. Bu denetim için basit bir hesap makinesi kullanıcı arabirimi (UI) sağlar. Aşağıdaki ekran resminde, hesap makinesi denetimin genel düzeni gösterilmektedir.

Hesap Makinesi kullanıcı Arabirimi

Guided Tour Calculator UI

Önkoşullar

Bu izlenecek yolu tamamlamak için şunları yapmanız gerekir:

  • Oluşturma ve Windows Forms uygulama projelerinin bilgisayarda çalıştırmak için yeterli izinleri nerede Visual Studio yüklenir.

Not

Gördüğünüz iletişim kutuları ve menü komutları, etkin ayarlarınıza ve ürün sürümüne bağlı olarak Yardım menüsünde açıklanana göre farklılık gösterebilir.Ayarlarınızı değiştirmek için Araçlar menüsünden İçeri ve Dışarı Aktarma Ayarları'nı seçin.Daha fazla bilgi için bkz. Visual Studio ayarları.

Özel Denetim projesi oluşturma

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

Özel Denetim projesi oluşturmak için

  1. Üzerinde Dosya menüsü, Yenive ardından Proje açmak için Yeni bir proje iletişim kutusu.

  2. Visual Basic listesinden veya Visual C# , projeler Windows kategorisi, select Windows Forms Control Library proje şablonu.

  3. İçinde ad kutusuna yazın DemoCalculatorLib 'ı Tamam.

  4. Solution Explorer'da farenin UserControl1.vb veya LoginControl.csve ardından yeniden.

  5. Dosya adını değiştirmek DemoCalculator.vb veya DemoCalculator.cs. Tıklatın Evet kod öğesi "UserControl1" yapılan tüm başvurular yeniden adlandırmak isteyip istemediğiniz sorulduğunda düğme.

    Şu anda Windows Forms tasarýmcýsý gösterir Tasarımcı yüzey için DemoCalculator denetim. Bu görünümde denetimler ve bileşenler araç kutusundan seçerek ve bunları koyarak Tasarımcı yüzey üzerinde denetiminizin 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 denetimleri içerir. Bu yordam, Windows Forms tasarýmcýsý hızlı uygulama geliştirme (rad) özelliklerinin bazılarını kullanarak denetimleri düzenler.

Denetim düzeni tasarlamak için

  1. Windows Forms tasarýmcýsý içinde değiştirmek DemoCalculator sağ alt köşesindeki boyutlandırma tutamacını tıklatıp ve aşağı sürükleyerek sağa doğru daha büyük bir boyuta denetim. Sağ alt köşesindeki Visual Studio, denetimler için boyut ve konum bilgileri bulabilirsiniz. Denetimi yeniden boyutlandırma gibi boyut bilgileri izlerken 500 genişliğini ve yüksekliğini 400 denetimin boyutunu ayarlayın.

  2. Araç kutusundan'i kap düğümünü açın. Seçin SplitContainer denetlemek ve tasarımcı zeminine sürükleyin.

    SplitContainer Yerleştirilir DemoCalculator denetimin Tasarımcı yüzey.

    Not

    SplitContainer Denetim boyutlandırır kendisini sığdırmak için boyutunu DemoCalculator denetim.Özellik ayarlarını görmek için Properties penceresini inceleyin SplitContainer denetim.Bul Dock özelliği.Kendi değer Fill, anlamına SplitContainer denetiminin her zaman boyutunu kendisi için sınırlarını DemoCalculator denetim.Yeniden boyutlandırma DemoCalculator Bu davranış doğrulamak için denetim.

  3. Properties penceresinde değerini değiştirmek Dock özelliğine None.

    SplitContainer Denetimi varsayılan boyutuna daraltır. Boyutuna artık boyutunu izleyen DemoCalculator denetim.

  4. Akıllı etiket glifi tıklatarak (Smart Tag Glyph) sağ üst köşesinde SplitContainer denetim. Tıklatın Dock üst kapsayıcısında için Dock özelliğine Fill.

    SplitContainer Denetim docks için DemoCalculator denetimin sınırları.

    Not

    Birden çok denetimi tasarım kolaylaştırmak için akıllı etiketler sunar.Daha fazla bilgi için bkz. İzlenecek yol: Windows Forms Denetimlerindeki Akıllı Etiketleri Kullanarak Ortak Görevleri Gerçekleştirme.

  5. Paneller arasındaki dikey kenarlık'ı tıklatın ve sağa doğru sürükleyin bu nedenle en çok alan içinde sol Masası tarafından alınmış.

    SplitContainer Ayıran DemoCalculator aralarına taşınabilir kenarlıklı iki panel denetime. Sol panelde, Hesap Makinesi düğmelerinin ve görüntü tutacaktır ve sağ panelde kullanıcı tarafından gerçekleştirilen aritmetik işlemler kaydını gösterir.

  6. Properties penceresinde değerini değiştirmek BorderStyle özelliğine Fixed3D.

  7. Araç kutusundan'i Ortak denetimler düğümünü açın. Seçin ListView sağ paneline sürükleyin ve denetleme SplitContainer denetim.

  8. ' I ListView denetimin akıllı etiket glif. Akıllı etiket panelinde değiştirmek View ayarlamak Details.

  9. Akıllı etiket panelinde tıklatın Edit Columns.

    Sütun üstbilgisi Collection Editor iletişim kutusunu açar.

  10. İçinde Sütun üstbilgisi Collection Editor iletişim kutusunu tıklatın Ekle bir sütun eklemek için düğmeyi ListView denetim. Sütunun değerini değiştirmek Text geçmiş özelliği. Tıklatın Tamam sütun oluşturmak için.

  11. Akıllı etiket panelinde tıklatın Dock üst kapsayıcı içindeve akıllı etiket simge akıllı etiketi panelini kapatmak için tıklatın.

  12. Dan kap düğümünü sürükleyin araç kutusundaki bir TableLayoutPanel sol bölmesi, denetime SplitContainer denetim.

    TableLayoutPanel Akıllı etiketi panelini açık olan Tasarımcı yüzey üzerinde denetim daha belirir. TableLayoutPanel Denetim, alt denetimlerine kılavuzda yerleştirir. Daha fazla bilgi için bkz. İzlenecek yol: TableLayoutPanel Kullanarak Windows Forms'ta Denetimleri Düzenleme. TableLayoutPanel Kontrol tutun DemoCalculator denetimin ekranının ve düğmeler.

  13. Tıklatın düzenleme satır ve sütun akıllı etiket panelinde.

    Sütun ve satır stilleri iletişim kutusunu açar.

  14. Tıklatın Ekle beş sütun görüntüleninceye kadar düğme. Tüm beş sütun seçin ve ardından yüzde seçenek düğmesini Boyut tür kutusu. Set yüzde değeri 20. Bu her sütun için aynı genişlik ayarlar.

  15. İçinde Show açılan kutuyu tıklatın satır.

  16. Tıklatın Ekle beş satır görüntüleninceye kadar düğme. Tüm beş satır ve tıklatarak seçin yüzde seçenek düğmesini Boyut tür kutusu. Set yüzde değeri 20. Bu, her satır için aynı yüksekliğini ayarlar.

  17. Tıklatın Tamam yaptığınız değişiklikleri kabul etmek ve akıllı etiket simge akıllı etiketi panelini kapatmak için tıklatın.

  18. Properties penceresinde değerini değiştirmek Dock özelliğine Fill.

Denetimini doldurma

Denetim düzenini ayarlamak girdiğimiz doldurabilir DemoCalculator kontrol düğmeleri ve bir görüntü.

Denetimini doldurmak için

  1. Araç kutusunda, çift TextBox denetimi simgesi.

    A TextBox Denetim ilk hücreye yerleştirilen TableLayoutPanel denetim.

  2. Properties penceresinde değerini değiştirmek TextBox denetimin ColumnSpan özelliğine 5.

    TextBox Kendi satırında ortalanmış bir konuma denetimi taşır.

  3. Değeri değiştirmek TextBox denetimin Anchor özelliğine Left, Right.

    TextBox Denetim tüm beş sütuna yayılan için yatay olarak genişletir.

  4. Değeri değiştirmek TextBox denetimin TextAlign özelliğine Right.

  5. Properties penceresinde genişletin Font property düğümü. Set Size to 14, and set Bold to true for the TextBox control.

  6. TableLayoutPanel denetimini seçin.

  7. Araç kutusunda, çift Button simgesi.

    A Button denetim açık bir sonraki hücreye yerleştirilen TableLayoutPanel denetim.

  8. Araç kutusunda, çift Button simgesi dört daha katı, ikinci satır doldurmak için TableLayoutPanel denetim.

  9. Beş seçin Button SHIFT tuşunu basılı tutup tıklatarak kontrol eder. Kopyalamak için ctrl + c tuşlarına Button panoya kontrol eder.

  10. Kopyasını yapıştırmak için ctrl + v tuşlarına basarak üç kez Button kalan satırları denetimlere TableLayoutPanel denetim.

  11. Seçin tüm 20 Button SHIFT tuşunu basılı tutup tıklatarak kontrol eder.

  12. Properties penceresinde değerini değiştirmek Dock özelliğine Fill.

    Tüm Button kendi içeren hücreleri doldurmak için dock denetler.

  13. Properties penceresinde genişletin Margin property düğümü. Değeri All için 5.

    Tüm Button denetimleri boyutta daha küçük aralarında büyük bir kenar boşluğu oluşturmak için.

  14. Seçin button10 ve button20, ve bunları düzenden kaldırmak için delete tuşuna basın.

  15. Seçin button5 ve button15, değerini değiştirin ve kendi RowSpan özelliğine 2. Bunlar düz ve = için düğmeleri DemoCalculator denetim.

Belge anahat penceresi kullanarak denetimin gezinme

Birden çok denetimi ile Denetim veya form doldurulduğunda, düzeninizi ile gezinmek kolay Document Outline pencere.

Document Outline penceresi kullanarak gezinme için

  1. Üzerinde View menüsü, Diğer Windowsve ardından Document Outline.

    Document Outline pencere ağaç görünümünü gösterir DemoCalculator ve kendi kendisini denetimi. Kapsayıcı denetimi ister SplitContainer ağacında alt düğümler olarak kendi alt denetimlerini göster. Denetimler Yerleştir kullanarak da yeniden adlandırabilirsiniz Document Outline pencere.

  2. İçinde Document Outline penceresinde, sağ button1ve ardından yeniden adlandırma. Onun adını değiştirmek sevenButton.

  3. Kullanarak Document Outline penceresinde, yeniden adlandırmak Button , tasarımcı tarafından oluşturulan addan üretim adı aşağıdaki listeye göre kontrol eder:

    • button1için sevenButton

    • button2içineightButton

    • button3içinnineButton

    • button4içindivisionButton

    • button5için clearButton

    • button6için fourButton

    • button7için fiveButton

    • button8için sixButton

    • button9için multiplicationButton

    • button11için oneButton

    • button12için twoButton

    • button13için threeButton

    • button14için subtractionButton

    • button15için equalsButton

    • button16için zeroButton

    • button17için changeSignButton

    • button18için decimalButton

    • button19için additionButton

  4. Kullanarak Document Outline ve Özellikler windows değiştirmek Text için her özelliğin değerini Button denetim adı aşağıdaki listeye göre:

    • Değişiklik sevenButton 7 text özelliğini kontrol

    • Değişiklik eightButton 8 text özelliğini kontrol

    • Değişiklik nineButton -9 text özelliğini kontrol

    • Değişiklik divisionButton text özelliğini kontrol /

    • Değişiklik clearButton Clear text özelliğini kontrol

    • Değişiklik fourButton 4 text özelliğini kontrol

    • Değişiklik fiveButton text özelliðini 5 kontrol

    • Değişiklik sixButton 6 text özelliğini kontrol

    • Değişiklik multiplicationButton denetlemek için text özelliğini *

    • Değişiklik oneButton 1 text özelliğini kontrol

    • Değişiklik twoButton 2 text özelliğini kontrol

    • Değişiklik threeButton 3 text özelliğini kontrol

    • Değişiklik subtractionButton -text özelliğini kontrol

    • Değişiklik equalsButton text özelliğini denetlemek için =

    • Değişiklik zeroButton 0 text özelliğini kontrol

    • Değişiklik changeSignButton +/-text özelliğini kontrol

    • Değişiklik decimalButton text özelliğini denetler.

    • Değişiklik additionButton text özelliğini kontrol +

  5. Tasarımcı yüzey üzerinde tümünü seçmek Button SHIFT tuşunu basılı tutup tıklatarak kontrol eder.

  6. Properties penceresinde genişletin Font property düğümü. Set Size to 14, and set Bold to true for all the Button controls.

    Bu tasarımı tamamlayan DemoCalculator denetim. Geriye kalan tek şey hesap makinesi mantığı sağlamak için.

Uygulama olay işleyicileri

Düğmeleri DemoCalculator denetim hesap makinesi mantığı çoğunu uygulamak için kullanılan olay işleyicileri sahip. Windows Forms tasarýmcýsý çift ile tüm düğmeleri için tüm olay işleyicileri Saplamaları uygulamak sağlar.

Olay işleyicilerini uygulamak için

  1. Tasarımcı yüzey üzerinde tümünü seçmek Button SHIFT tuşunu basılı tutup tıklatarak kontrol eder.

  2. Biri çift Button kontrol eder.

    Tasarımcısı tarafından oluşturulan olay işleyicileri için kod düzenleyicisini açar.

Denetimi sınama

Çünkü DemoCalculator denetimi devralır UserControl sınıfı test davranışını ile UserControl Test kapsayıcı. Daha fazla bilgi için bkz. Nasıl yapılır: Bir UserControl Denetiminin Çalışma Zamanı Davranışını Sınama.

Denetimi sınamak için

  1. Derlemek ve çalıştırmak için F5 tuşuna DemoCalculator Denetim UserControl sınaması kapsayıcısı.

  2. Arasındaki kenarlığın tıklatın SplitContainer paneller ve sola ve sağa sürükleyin. TableLayoutPanel Ve tüm alt denetimleri kendilerini kullanılabilir alana sığacak şekilde yeniden boyutlandırın.

  3. Tamamladığınızda denetimi sınama,'ı Kapat.

Bir formdaki denetim kullanma

DemoCalculator Diğer birleşik denetimler veya bir formdaki denetimi kullanılabilir. Aşağıdaki yordam, nasıl kullanılacağını açıklar.

9ew6tzdt.collapse_all(tr-tr,VS.110).gifProjeyi Oluşturma

İlk adım, uygulama proje oluşturmaktır. Bu proje, özel denetimi gösteren uygulama oluşturmak için kullanır.

Projeyi oluşturmak için

  1. Üzerinde Dosya menüsü, Ekleve ardından Yeni bir proje açmak için Yeni bir proje iletişim kutusu.

  2. Visual Basic listesinden veya Visual C# projeleri, select Windows Forms uygulamasý proje şablonu.

  3. İçinde ad kutusuna yazın DemoCalculatorTest 'ı Tamam.

  4. Solution Explorer'da farenin DemoCalculatorTest proje ve i Add Reference açmak için Add Reference iletişim kutusu.

  5. Tıklatın projeleri sekmesini tıklatın ve sonra çift tıklatın, DemoCalculatorLib projesinin başvuru eklemek için proje.

  6. Solution Explorer'da farenin DemoCalculatorTestve ardından Set as StartUp Project'i.

  7. Windows Forms tasarýmcýsý içinde yaklaşık 700 x 500 için formun boyutunu artırın.

9ew6tzdt.collapse_all(tr-tr,VS.110).gifDenetimi formun düzenini kullanma

Kullanmak için DemoCalculator denetim bir uygulamada, bir forma yerleştirdiğiniz gerekir.

Denetimi formun düzenini kullanmak için

  1. Araç kutusunda, genişletme DemoCalculatorLib bileşenleri düğüm.

  2. Sürükle DemoCalculator denetimi Toolbox'tan formunuza. Denetim, formun sol üst köşesine taşıyın. Denetim formun kenarlıkları yakın olduğunda göreceksiniz snaplines görünür. Bu formun uzaklığı belirtmek Padding özelliği ve denetimin Margin özelliği. Snaplines tarafından belirtilen konumda denetimi yerleştirin.

    Daha fazla bilgi için bkz. İzlenecek yol: Dayama Çizgileri Kullanarak Windows Forms'ta Denetimleri Düzenleme.

  3. Sürükle bir Button Denetim Araç Kutusu'ndan ve formun üzerine bırakın.

  4. Taşıma Button etrafında kontrol DemoCalculator snaplines göründüğü izleme ve denetleme. Hassas ve kolay bir şekilde bu özelliği kullanarak denetimleri hizalayabilirsiniz. Sil Button tamamlandığında denetler.

  5. Sağ DemoCalculator denetlemek ve i özelliklerini.

  6. Değeri değiştirmek Dock özelliğine Fill.

  7. Formu seçin ve sonra genişletin Padding property düğümü. Değeri değiştirmek tüm için 20.

    Boyutunu DemoCalculator yeni uyum için Denetim sınırlı Padding formun değeri.

  8. Formu farklı konumlara çeşitli boyutlandırma tutamaçlarını sürükleyerek yeniden boyutlandırın. Gözlemek nasıl DemoCalculator denetim sığacak şekilde yeniden boyutlandırılır.

Sonraki Adımlar

Bu izlenecek yolda, kullanıcı arabirimi için basit bir hesap makinesi nasıl göstermiştir. Aşağıdaki şekillerde işlevselliğini genişletmek isteyebilirsiniz:

Ayrıca bkz.

Görevler

İzlenecek yol: TableLayoutPanel Kullanarak Windows Forms'ta Denetimleri Düzenleme

İzlenecek yol: Windows Formları Bileşenine Akıllı Etiket Ekleme

İzlenecek yol: Dayama Çizgileri Kullanarak Windows Forms'ta Denetimleri Düzenleme

İzlenecek yol: Araç Kutusunu Otomatik Olarak Özel Bileşenlerle Doldurma

Nasıl yapılır: Bir UserControl Denetiminin Çalışma Zamanı Davranışını Sınama

Denetim ve Bileşen Yazmada Sorun Giderme

Tasarım Zamanı Geliştirme Sorunlarını Giderme

Kavramlar

Özel Denetim Çeşitleri

Diğer Kaynaklar

Yeni bir Windows Formu Oluşturma