Turkish Tutorial of MaterialSkin C#

in #utopian-io7 years ago (edited)


Theming .NET WinForms, C# or VB.Net, to Google's Material Design Principles.
Everybody loves Material Design, the comprehensive design used as a guide for visual, motion, and interaction design across platforms and devices. Although the Material Design is specifically used by the Android OS and other Google Products, you can still use the design as you want and wherever you want.
Source



form logo.png


Merhabalar arkadaşlar bugün sizlere MaterialSkin kütüphanesini tanıtıcağım.MaterialSkin bence çok yararlı bir kütüphane bu hayatta herkes dış görünüşe önem verir programlama'da aynen bu şekildedir.Tasarımı kötü olan bir program ne kadar iyi olsada kullanıcılar ilk önce tasarımına bakar.MaterialSkin burada yardımımıza koşuyor modern ve şık tasarımıyla yapıcağınız projeleri daha da güzel gösteriyor.Anlatımımda normal varsayılan formu ve materialskin formunu örnek olarak göstericeğim farkı görebilirsiniz.

GitHub
NuGet

MaterialSkin Kütüphanesini Projemize Ekleme
İlk olarak bir C#Windows Form Application oluşturalım.Resimde gördüğüğünüz gibi projemizin adını girelim Windows Form Application'u seçerek oluşturalım.
1.png
Daha sonra kütüphanemizi projemize ekliyelim.Ben NuGet Package Manager Console üzerinden ekliyiceğim.NuGet Package Manager Console'yi nasıl açıcağınızı alt taraftaki resimde görebilirsiniz.
2.png
Daha sonra NuGet Package Manager Console'a kütüphanemizin nuget sitesinde olan kodumuzu giriyoruz ve kurulumu otomatik olarak yapıyor.

Install-Package MaterialSkin -Version 0.2.1

Kütüpahnemizi eklemenin başka bir yolu daha var isterseniz o şekilde'de yükliyebilirsiniz.Nuget kütüphanelerinin nasıl ekleniceğiyle ilgili detaylı bilgiyi abim olan Samet Aydın'ın konusundan ulaşabilirsiniz.Turkish Tutorial of NuGet Package Manager C#
3.png
Kütüphanemiz başarıyla yüklendi.

Projemize kütüphanemizi ekledikten sonra kullanabilmek için Form'umuzun kod bölümüne
using MaterialSkin;
kodumuzu yazmalıyız.
4.png
Kütüphanemizin ekleme işlemi tamamlandı.MatarialSkin'i kullanabilmek için şimdi toolbox'ımıza MaterialSkin araçlarını eklememiz lazım.

MaterialSkin Kontrol Araçlarını Toolbox'a Ekleme
Bunun için ilk olarak projemizin tasarım bölümüne geliyoruz.Daha sonra toolbox'ı açıyoruz.
5.png
Toolbox'ımızı açtıktan sonra toolbox'da boş bir alana sağ tıklayıp 'Add Tab'a tıklıyoruz.Daha sonra bir isim girme yeri çıkıcaktır o kısıma MaterialSkin yazıyoruz.
6.png
Toolbox'ımıza MaterialSkin için bir alan eklemiş olduk.
7.png
Şuanda Material Skin alanımız boş şimdi sıra buraya araçlarımızı eklemeye geldi.Boş alana sağ tıklayıp'Choose Items...' diyoruz.
8.png
Karşınıza bu şekilde bir menü gelicek buradan MaterialSkin araçlarını eklemek içi Browse... seçeneğine tıklıyoruz.

9.png
Karşınıza bu şekilde bir dll seçme ekranı gelicektir.Buradan Nuget üzerinden projemize MaterialSkin'i kurduğumuz için o projemizin dosyalarından ulaşabilirsiniz.
Bende belgelerimin içinde olduğundan oraya giriyorum ve dll'yi seçiyorum.
10.png

Daha sonra karşınıza alt taraftaki gibi bir ekran gelicek MaterialSkin'in araçların otomatik olarak seçilmiş olur siz sadece OK seçeneğine basarak toolbox'ınıza MaterialSkin araçlarınıda kurmuş olursunuz.
11.png
MaterialSkin araçlarını Toolbox'ımıza eklemiş olduk şimdi bir örnek proje yapıp hem MaterialSkin'i deneyelim hem windows form ile arasındaki farkı görelim.
12.png

MaterialSkin Örnek Projemiz

Örnek olarak Windows'un varsayılan formunu MaterialSkin formu ile değiştirelim.
İlk olarak projemizin kod bölümüne geliyoruz.
Üst kısıma
using MaterialSkin.Controls;
kodumuzu ekliyelim.
Aşağıdaki kısımda

using MaterialSkin.Controls;

kodumuzu

public partial class Form1 : MaterialForm

olarak değiştirelim.
13.png
Bu kodlarla Windows Formumuzu MaterialSkin formu ile değiştirmiş olduk.
14.png
Gördüğünüz gibi MaterialSkin formu Windows Form'undan daha şık ve güzel gözüküyor.MaterialSkin kütüphanemiz sayesinde kolayca bu şekilde projeler yapabilirsiniz.MaterialSkin'de olan daha birçok araç var bunlarıda kullanabilirsiniz ilerliyen zamanlarda bunlarla'da ilgili anlatımlar yapabilirim.

Okduğunuz için teşekkürler.Diğer anlatımlarımda görüşmek üzere iyi günler dilerim..



Posted on Utopian.io - Rewarding Open Source Contributors

Sort:  

Thank you for the contribution. It has been approved.

You can contact us on Discord.
[utopian-moderator]

Hey @kompela144 I am @utopian-io. I have just upvoted you!

Achievements

  • You have less than 500 followers. Just gave you a gift to help you succeed!
  • This is your first accepted contribution here in Utopian. Welcome!

Suggestions

  • Contribute more often to get higher and higher rewards. I wish to see you often!
  • Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!

Get Noticed!

  • Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

mooncryption-utopian-witness-gif

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x

Coin Marketplace

STEEM 0.16
TRX 0.15
JST 0.028
BTC 57978.54
ETH 2283.22
USDT 1.00
SBD 2.47