C# WPF ile Text Editor Uygulaması

WPF Text Editor Uygulaması

           

Bu WPF ile ikinci uygulamamız. Bu uygulamamızda yukarıdaki gibi bir text editor  yapıcaz. Bold , italic ,kes , kopyala , yapıştır gibi işlemler için fazlaca C# kodu kullanmamız gerekiyordu eğer bunu Windowss Form Application ile yapmış olsaydık! WPF de bizim için bu event ları bir kütüphanede tanımlamışlar  ve bizim işimizi oldukça kolaylaştırmışlar. Bu uygulamada tek bir yer hariç C# kodu ile uğraşmayacağız ve çok az bir Xaml koduyla bu işi halledeceğiz.

Bu tanımlanmış kütüphane içerisinde aşağıdaki gibi hazır komutlar bulunmaktadır;

Uygulama komutları : New,Cut,Copy,Save,Paste,Open,Close

Düzenleme Komutları: ToggleBold,ToggleItalic,ToggleUnderline

MultiMedia Komutları: Play, Stop , Rewind , FastForward … gibi

               

            Tabi bunlar tanımlanmış ama fonksiyonel olarak  Save , Close gibi komutları kullanabilmek için C# kodları yazmalıyız.  Cut , Copy gibi komutları ise direk kullanabiliyoruz.

           

            Bu komutlar sayesinde biz uygulamalarımızda kes , kopyala , yapıştır , italic , bold ve eğer varsa ses , video için stop , play … benzeri komutları Xaml içerisin de kullanıyoruz. Xaml kodunun bitmiş hali aşağıda , açıklamalar ise onun altında.

<Window x:Class="text_edit2.MainWindow"         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         Title="MainWindow" Height="350" Width="525">     <Grid>         <Grid.RowDefinitions>             <RowDefinition Height="Auto"/>             <RowDefinition Height="Auto"/>             <RowDefinition Height="*"/>         </Grid.RowDefinitions>         <Menu Grid.Row="0">             <MenuItem Header="Dosya">                 <MenuItem Header="Çıkış" Command ="Close"/>             </MenuItem>             <MenuItem Header="Düzenle">                 <MenuItem Header="Kes" Command="Cut"/>                 <MenuItem Header="Kopyala" Command="Copy"/>                 <MenuItem Header="Yapıştır" Command="Paste"/>                 <Separator/>                 <MenuItem Header="Bold" Command="ToggleBold" FontWeight="Bold" />                 <MenuItem Header="Italic" Command="ToggleItalic" FontStyle="Italic" />             </MenuItem>         </Menu>         <ToolBar Grid.Row="1">             <Button Command="Cut">Kes</Button>             <Button Command="Copy">Kopyala</Button>             <Button Command="Paste">Yapıştır</Button>             <Separator/>             <Button FontWeight="Bold" Command="ToggleBold">Bold</Button>             <Button FontStyle="Italic" Command="ToggleItalic">Italic</Button>         </ToolBar>         <RichTextBox Grid.Row="2" Margin="5"/>     </Grid>     <Window.CommandBindings>         <CommandBinding Command="Close"  Executed="CommandBinding_Executed_1"/>     </Window.CommandBindings> </Window>

 Kodlar yukarıdaki gibi. Aşağıda ise kodları biraz anlatmaya çalıştım.

<Grid.RowDefinitions>        <RowDefinition Height="Auto"/>        <RowDefinition Height="Auto"/>        <RowDefinition Height="*"/> </Grid.RowDefinitions>

Bu kod ile biz Grid içerisinde uzunluğu değişen 3 satır eklemiş olduk. Bu satırlardan 1. ye Menu , 2.  ye ToolBar , 3. ye de RichTextBox ımızı ekleyeceğiz. En son eklenen satırdaki “*” dikkatinizi çekmiştir. Bu bizim o satıra eklenen ögemizin daha geniş bir şekilde yerleştirilmesini sağlıyor. “Auto” ise en ideal şekilde yerleşimi sağlıyor.

<Menu Grid.Row="0">        <MenuItem Header="Dosya">            <MenuItem Header="Çıkış" Command="Close"/>        </MenuItem>        <MenuItem Header="Düzenle">            <MenuItem Header="Kes" Command="Cut"/>            <MenuItem Header="Kopyala" Command="Copy"/>            <MenuItem Header="Yapıştır" Command="Paste"/>            <Separator/>            <MenuItem Header="Bold" Command="ToggleBold" FontWeight="Bold" />            <MenuItem Header="Italic" Command="ToggleItalic" FontStyle="Italic"/> </MenuItem>

Görüldüğü gibi Grid.Row = 0 yani birinci satıra kendisi ayarlayarak Menu ögemizi yerleştirdi. Daha sonra Item ile Menü de ne gibi sekmeler bulunacaksa bunları belirtiyoruz. Tabi ki “Command” ile basıldığında ne yapılacaksa (event handling) bunu da belirtiyoruz. Örneğin Yapıştır için Command = “Paste” gibi. Separator etiketi ise resimde de gözüktüğü gibi   “|” veya düz çizgi  şeklinde yerine göre bir ayraç niteliği taşır. Sadece ögeleri sınıflandırmak için kullanılan görseldir. Bunun haricinde burada başka bir işlevi yok. Aşağıdaki resimde Yapıştır ile Bold arasındaki Separator dır.

<ToolBar Grid.Row="1">      <Button Command="Cut">Kes</Button>      <Button Command="Copy">Kopyala</Button>      <Button Command="Paste">Yapıştır</Button>      <Separator/>      <Button FontWeight="Bold" Command="ToggleBold">Bold</Button>      <Button FontStyle="Italic" Command="ToggleItalic">Italic</Button> </ToolBar>

                Yukarıdaki kodda ise Grid deki 1. satıra ToolBar ekliyor. Bu ToolBar ımızda bizim kes , kopyala gibi butonlarımız bulunuyor. Buradaki Separator  “|” şeklinde gözükmektedir.

<RichTextBox Grid.Row="2" Margin="5"/>

                Bu da son Grid satırımıza(2 ye) RichTextbox ımızı ekliyor. Margin  bizim RichTextBox ögemizin sağ , sol , alt ve üstten uzaklığını belirliyor.

                Uygulamamız hazır ancak menüdeki DosyaàÇıkış  a bastığımızda uygulamanın sonlanmasını  C# ile yapmalıyız. Bunun için aşağıdaki kod satırlarını ekliyoruz.

<Window.CommandBindings>         <CommandBinding Command="Close" Executed="closeCommand_Executed"/> </Window.CommandBindings>

Bu kod bizim çıkışa bastığımızda programın kapatılmasını sağlayacak olan fonksiyona götüren komut satırıdır. Biz burada bir Cammand Binding ekliyoruz ve Execute kullanarak C# kısmındaki event handle fonksiyonumuz çağırılıyor ve buradan uygulama sonlandırılıyor. closeCommand_Executed fonksiyonunu kendisi siz yazarken tamamlayacaktır. Bu satırları yazdıktan satırlardan birisi seçili iken  Properties ‘ e gelip Event Handlers kısmında aşağıdaki gibi fonksiyonun yazıldığını görebilirsiniz. Bunun üzerine çift tıklayarak C# kısmına giderek aşağıdaki komutu yazalım.

private void closeCommand_Executed(object sender, ExecutedRoutedEventArgs e) {       Application.Current.Shutdown(); }

                Uygulamamız hazır! Çalıştırıp sonuçları gözlemleyebiliriz. Bu editor için Save  komutu gibi komutlarıda kullanabilir ancak bunlar içinde hemen üstteki yaptığımız gibi C# kodlarına ihityacımız vardır. Şimdilik yapacaklarımız bu kadar diğer bir WPF yazımızda başka bir uygulamayla devam ederiz.