Öncelikle Toolbox'taki bileşenlere bir bakacak olursak:
Pointer: Form üzerindeki nesneleri seçmek için kullanılır. Pointer seçili iken form üzerindeki nesenelere çift tıklayarak onların kodlarına erişebilirsiniz.
AppBar: Uygulamanın üzerinde direk olarak gözükmeyen, dokunmatik ekranlarda AppBar'ın ekrana gelmesi için kullanıcının parmağıyla ekranın dışından içine doğru getirmesi yeterli olurken, dokunmatik olmayan ekranlarda ise form üzerine sağ tıklayarak erişebiliyorsunuz. AppBar basitçe anlatmak gerekirse bir menü görevi görüyor diyebiliriz. AppBar üzerine düğme gibi bileşenler ekleyerek uygulama çalıştırdıktan sonra ekrana sağ tıkladığımızda bu düğmeyi içeren AppBar karşımıza gelecektir. En bilindik kullanımlarından birisi de Windows 8 metro arayüzünde iken, ekrana sağ tıkladığımızda altta açılan tüm uygulamalara erişmek için gördüğümüz menü aslında bir AppBar nesnesidir. Alttaki resimden daha da iyi kavrayabiliriz:
Border: Bu bileşen de form üzerinde sınırlar belirtmemize olanak sağlar, bir nevi web sitesi yaparken kullandığımız tabloların Border özellikleri gibi bir bileşen.
Button: En yaygın bileşen diyebiliriz. Diğer platformlarda kullandığımız düğmelerden bir farkı yoktur diyebiliriz. Click eventi vardır ve bu düğmeye tıklandığında ne yapılacağına bu event içersinde karar veririz.
Canvas: Child kontrollerin pozisyonlarını Kartezyen Koordinat Sistemi kullanarak belirtmemizi sağlar.(Canvas.X, Canvas.Y özellikleri)
CaptureElement: Embed tarzı kaynakları sunmak için kullanılır. Mesela bir video oynatmak için kullanılabilir.
CheckBox: Seçenekleri belirtmek için kullanılır. IsChecked metodu kullanılarak bileşenin check edilip edilmediği kontrol edilir ve bunun sonucuna göre işlemler yapılır.
ComboBox: Açılan bir liste içersinden seçim yapmamızı sağlar. Liste içersindeki indexlere göre seçim yapılır ve seçilen indexe göre istediğimiz metod çağırılarak işlem yapılır.
ContentControl: Belirli bir template içersindeki içeriği sunmamıza yarar.
Ellipse: Elipse çizmemizi sağlar.
FlipView: Genellikle tam sayfa uygulamarda sayfalar arasında geçişi sağlar. Sayfa çevirme tarzında gösterimler sunar.
Frame: Web tarayıcısına navigasyon metodları ile yönlendirme olanağı sağlar. Navigate ve GoBack metodları en çok kullanılan metodlarıdır.
Grid: İçersindeki kontrolleri belirli bir düzende göstermeyi sağlar. Satır ve sütun ayarlaması yapılarak uygulamamızdaki bileşenlerin düzenli olarak form içersinde yerleştirilmesini sağlar.
GridView: İçersindeki bileşenleri sütunlara sırası ile dağıtarak güzel bir görünümde sunulmalarını sağlar.
HyperlinkButton: Link biçimindeki düğmedir. Navigasyon işlemleri yapılmasını ve diğer düğmenin sahip olduğu özellikleri barındırır. NavigateUri en çok kullanılan metodlarındandır. Belirli bir sayfaya direk olarak yönlendirmeye yarar.
Image: Resim dosyalarımızı uygulamamızda göstermemizi sağlar.
ItemsControl: Liste oluşturmamızı sağlar. ItemsPanel kullanarak bu listelemeyi ayarlar.
Listbox: Liste oluşturmamızı ve bunu scroll bar ile aşağı yukarı hareket ettirerek görmemizi sağlar. Ayrıca bu liste içerisinden çoklu seçim yapmamıza olanak sağlar.
ListView: Listboxta görüntülemekte zorluk çekeceğimiz, daha karmaşık listeleri göstermek için kullanacağımız bir araçtır.
MediaElement: Başka bir aygıt için media oynatmayı mümkün kılar.
PasswordBox: Şifre işlemleri için kullanılacak olan bir araçtır. Şifreleri direk olarak girmemize olanak sağlar. Şifreyi girerken gizler.
Popup: Popup şeklinde içerikler göstermemizi sağlar. Mesela uygulamamız için ayarlar paneli yapmakta kullanabiliriz.
ProgressBar: İşlem yaparken kullanıcılara işlemin ne kadar sürdüğünü ve ne kadar kaldığını göstermek için kullanılan araçtır.
ProgressRing: Bir operasyonun ne zaman biteceği konusunda kesinlik olmadığında kullanılır.
RadioButton: Birkaç seçenek arasından seçim yapmamızı sağlar.
Rectangle: Dikdörtgen şekli çizmemizi sağlar.
RepeatButton: Düğmeye basıldığında ve beklendiğinde yapılacak işlemler için kullanılan bir düğmedir.
ScrollBar: Herhani bir içeriği aşağıya doğru kaydırarak görüntülememizi sağlar.
SemanticZoom: Bir verinin iki farklı görünümde ve farklı ölçülerde görüntülenmesini sağlar.
Slider: Belirli bir aralıkta seçim yapmamızı sağlar. Minimum ve maximum özelliklerini bunun için kullanabiliriz
StackPanel: Child kontrollerin stack tarzında isteğe bağlı olarak paralel veya dikey olarak görüntülenmesini sağlar.
TextBox: Kullanıcıdan yazı girdisi almayı sağlar.
TextBlock: Kullanıcıdan daha büyük yazılar alınmasını sağlar.
ToggleButton: Switch tarzında çalışan düğme görünümüdür.
ToggleSwitch: Açık veya kapalı konumlarında olabilen bir switch aracıdır. Durumunda göre metodlar çağırılarak farklı biçimde kullanılabilir.
ToolTip: Kullanıcı bir bileşenin üzerine geldiğinde popup şeklinde bilgi göstermeye yarar.
UserControl: Kullanıcının kendine özel kontroller oluşturmasını sağlar. Dilerlerse kullanıcılar bu kontrolleri başka uygulamalarda da kullanabilirler.
ViewBox: İçersindeki bileşenleri boş alanları kapatacak şekilde yerleştirir.
Şimdi bu yukarıda anlattıklarımdan bazıları ile bir örnek uygulama yapmak istiyorum. Geçen hafta gösterdiğim gibi bir adet boş Windows Store uygulaması oluşturuyoruz ve tasarımını aşağıdaki xaml dosyası gibi yapıyoruz. Yeni bir sayfa eklememize gerek yok, "MainPage.xaml" sayfası üzerinden çalışacağım. Siz de kendi tasarımınızı yapabilirsiniz. Burada önemli olan bu bileşenlerin nasıl kullanıldıklarını anlayabilmemiz. Tasarım kısmı size kalmış.
<Page
x:Class="App2.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App2"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid x:Name="grid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="29*"/>
<ColumnDefinition Width="654*"/>
</Grid.ColumnDefinitions>
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black"/>
<GradientStop Color="#FFEA0707" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<PasswordBox x:Name="pass" Grid.Column="1" HorizontalAlignment="Left" Margin="30,150,0,0" VerticalAlignment="Top" Width="203"/>
<ToggleSwitch x:Name="toglle2" Grid.Column="1" Header="ToggleSwitch" HorizontalAlignment="Left" Margin="260,141,0,0" VerticalAlignment="Top" Toggled="ToggleSwitch_Toggled_2"/>
<ProgressBar x:Name="prog" Grid.Column="1" HorizontalAlignment="Left" Height="39" Margin="27,79,0,0" VerticalAlignment="Top" Width="263" />
<Viewbox Grid.Column="1" HorizontalAlignment="Left" Height="66" Margin="27,13,0,0" VerticalAlignment="Top" Width="281">
<Slider x:Name="slider" VerticalAlignment="Top" ValueChanged="Slider_ValueChanged_1" Width="263"/>
</Viewbox>
<TextBlock Grid.Column="1" HorizontalAlignment="Left" Margin="38,217,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="61" Width="195">
<Run Text="merhaba bu bir TextBlock örneğidir"/>
<LineBreak/>
<Run Text="Yukarıda kullandıklarım ise bir adet slider, bir adet ProgressBar, bir ader ToggleSwitch ve bir adet "/>
<Run Text="ViewBox."/>
</TextBlock>
</Grid>
</Page>
Burada forma bir adet slider, bir adet ProgressBar, bir ader ToggleSwitch, bir adet TextBlock ve bir adet ViewBox eklemeniz yeterli olacaktır, yukardaki kodu zaten Visual Studio kendisi oluşturacaktır. Ben sadece burada birkaç renk, bileşenlerin büyüklüğünü vs. değiştirdim.
Şimdi de gelelim projemizin csharp kodlarına. MainPage.xaml.cs dosyasının Mainpage sınıfı kodları aşağıdaki gibi olacak:
public sealed partial class MainPage : Page
{
double asd=0;
public MainPage()
{
this.InitializeComponent();
}
/// <summary>
/// Invoked when this page is about to be displayed in a Frame.
/// </summary>
/// <param name="e">Event data that describes how this page was reached. The Parameter
/// property is typically used to configure the page.</param>
protected override void OnNavigatedTo(NavigationEventArgs e)
{
}
private void Slider_ValueChanged_1(object sender, RangeBaseValueChangedEventArgs e)
{
Random r = new Random();
grid.Background = new SolidColorBrush(Color.FromArgb(Convert.ToByte(r.Next(0,255)),Convert.ToByte(r.Next(0,255)),Convert.ToByte(r.Next(0,255)),Convert.ToByte(r.Next(0,255))));
prog.Minimum = 0;
prog.Maximum = 100;
if (asd<slider.Value)
{
asd = slider.Value;
prog.Value += 1;
prog.Background = new SolidColorBrush(Colors.Aqua);
}
else
{
prog.Value -= 1;
prog.Background = new SolidColorBrush(Colors.Aqua);
}
}
private void ToggleSwitch_Toggled_2(object sender, RoutedEventArgs e)
{
if (pass.Password=="123")
{
Random r = new Random();
byte a = Convert.ToByte(slider.Value);
grid.Background = new SolidColorBrush(Color.FromArgb(Convert.ToByte(r.Next(0, 255)), Convert.ToByte(r.Next(0, 255)), Convert.ToByte(r.Next(0, 255)), Convert.ToByte(r.Next(0, 255))));
MessageDialog messageDialog = new MessageDialog("Merhaba Dünya", "İlk Projem");
messageDialog.ShowAsync();
}
}
}
Kodları açıklarken çok fazla detaya girmeyeceğim, kodları sizlerle de paylaşacağım böylece kodlar üzerinde dilediğiniz gibi oynayabilir ve daha rahat öğrenebilirsiniz.
Öncelikle sayfaya eklediğimiz Slider bileşeninin ValueChanged olayının içerisine Random sınıfı ile sayılar türetip Slider'ın değeri her değiştiğinde FromArgb metodu ile sayfamızın arka plan rengini değiştiriyoruz. Eklediğimiz ProgressBar'ın da Minimum ve Maximum değerlerini veriyoruz. Bir adet If-Else kontrolü ile eğer Slider'ın değeri azalıyorsa ProgressBar'ın da değerini azaltıyoruz, eğer artıyorsa artırıyoruz. Böylece Slider değeri her değiştiğinde formun arka plan rengi ve de ProgressBar'ın değeri değişiyor.
ToggleSwitch ile de benzer birşeyi gerçekleştirmeye çalıştım. Burada da bir adet PasswordBox koydum ve eğer şifremiz "123" ise ToggleSwitch açık duruma geldiğinde arka plan rengi değişecek, eğer şifre "123" değil ise arka plan renginde bir değişiklik olmayacak. Ayrıca şifre doğru olduğunda bize bir mesaj gösterilecek. Projeyi aşağıda paylaşıyorum, kodları inceleyebilirsiniz. Haftaya kaldığımız yerden devam edeceğiz. İyi programlamalar...
Uygulamayı İndir
Referanslar:http://blog.safaribooksonline.com/2012/09/20/windows-8-controls-with-xaml-and-c/
0 yorum:
Yorum Gönder