Reyza

tenang, senang, sederhana
See also: Other Geeks@INDC

Public

Silverlight Rich TextBox

Pernah bertemu dengan TinyMCE yang penampakannya seperti pada gambar berikut ini ?

geeks1

Atau bila duit berlebih dan ingin server control ASP.NET yang langsung digunakan dapat memilih control Editor milik ComponentArt Web.UI.

geeks2 

Barang-barang di atas dapat digunakan bila ingin digunakan pada halaman dengan format HTML.  Bagaimana bila ingin membuat hal yang sama tetapi pada halaman XAML pada Silverlight 2 ?

Bila ingin membuat hal yang serupa pada Silverlight 2, maka dapat menggunakan bantuan Silverlight 2 Beta 2 Liquid Control yang sebelumnya telah dibahas di sini.

Pada Liquid control terdapat control dengan nama Rich TextBox. Hasil akhirnya adalah seperti TinyMCE atau control Editor milik ComponentArt Web.UI, tetapi jangan berharap kemudahan yang sama akan didapat ketika menggunakan control Rich Textbox dari Liquid control.

Pada TinyMCE atau control Editor ComponentArt Web.UI, control ini langsung dapat digunakan secara terintegrasi. Terintegrasi yang saya maksudkan adalah area editor dan toolbar untuk mengubah style text (bold, italic, underline, tipe font, ukuran, warna dan lain-lain), insert gambar, membuat hyperlink, tombol undo dan redo dan lain-lain langsung dapat digunakan begitu control ini ditambahkan pada halaman HTML.

Bagaimana dengan control Rich Textbox milik Liquid control ? Jawabnya tidak perlu penjelasan panjang, cukup perhatikan langkah-langkah dan control berikut ini. Berikut adalah kode penggunaan control Rich Textbox :

<UserControl x:Class="LiquidRichTextBox.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        
        <liquid:RichTextBox x:Name="RichTextBox_Main"
                            VerticalAlignment="Top"
                            HorizontalAlignment="Left"
                            Margin="5,60,0,0"
                            Width="390"
                            Height="230"
                            BorderThickness="3"
                            BorderBrush="Black">
        </liquid:RichTextBox>

    </Grid>
</UserControl>

Dari contoh kode di atas dapat dilihat sudah ditambahkan control RichTextBox yang akan mempunyai lebar 390 pixel dan tinggil 230 pixel dengan lebar border 3 pixel dan warna hitam untuk border tersebut.....Build Solution....dan view in browser halaman, dan hasilnya ... seperti pada gambar berikut ini.

geeks3

Sudah melihat antarmuka yang dihasilkan oleh control RichTextBox ? Yup...betuuul....cuma kotak dengan border warna hitam. Kita sudah dapat menuliskan text yang diinginkan pada area editor tersebut. Tetapi kemana tombol-tombol untuk mengubah text menjadi bold, italic, underline dan hal-hal lain yang ditemui pada TinyMEC atau control Editor milih ComponentArt Web.UI ?

Untuk mendapatkan tombol-tombol seperti itu pada control RichTextBox maka diperlukan kerja lebih. Misalnya ingin memiliki tombol yang mempunyai fungsi untuk mengubah text yang diseleksi menjadi tebal (bold) maka hal yang mesti dilakukan adalah :

Langkah pertama, terlebih dahulu buat tombol untuk keperluan itu dengan menggunakan baris kode seperti berikut :

<Button x:Name="Button_Bold"
        Click="Button_Bold_Click"
        Width="24" 
        Height="23" 
        VerticalAlignment="Top"
        HorizontalAlignment="Left"
        Margin="5,5,0,0">
    <Canvas>
        <TextBlock Text="B" 
                   FontWeight="Bold" 
                   FontSize="13" 
                   Canvas.Top="-3" 
                   Canvas.Left="3">
        </TextBlock>
    </Canvas>
</Button>

Maka hasilnya akan dilihat seperti paga gambar berikut :

geeks4

Akhirnya satu tombol muncul juga. Dilihat dari kode di atas, pada control Button dapat dilihat terdapat Event Click yang akan memanggil method Buttond_Bold_Click. Artinya pada code file dari file Page.xaml mesti ditambahkan beberapa baris kode untuk melakukan proses "menebalan text yang diseleksi" ketika tombol Button_Bold diklik.

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

/* tambahkan kedua baris ini */
using Liquid;
using Liquid.Components;

namespace LiquidRichTextBox
{
    public partial class Page : UserControl
    {
        /* Style tidak aktif */
        private SolidColorBrush _buttonFillStyleNotApplied = 
            new SolidColorBrush(Color.FromArgb(255, 0, 0, 0));

        /* Style aktif */
        private SolidColorBrush _buttonFillStyleApplied = 
            new SolidColorBrush(Color.FromArgb(255, 255, 0, 0));

        public Page()
        {
            InitializeComponent();

            /* Mendaftarkan event */
            RichTextBox_Main.SelectionChanged += 
                new RichTextBoxEventHandler(RichTextBox_SelectionChanged);

        }

        /*
         * method ini dipanggil ketika pointer mouse berubah kedudukannya pada
         * area RichTextBox
         */
        private void RichTextBox_SelectionChanged(object sender, RichTextBoxEventArgs e)
        {
            Button_Bold.Background = _buttonFillStyleNotApplied;

            if (RichTextBox_Main.SelectionStyle.Weight == FontWeights.Bold)
            {
                Button_Bold.Background = _buttonFillStyleApplied;
            }
        }

        /*
         * Button_Bold berfungsi sebagai toggle, artinya bila style text yang
         * dipilih adalah Bold, maka ketika tombol diklik aksi yang dilakukan
         * adalah membuat text yang dipilih menjadi normal.
         */
        private void Button_Bold_Click(object sender, RoutedEventArgs e)
        {
            Formatting format = (Button_Bold.Background == _buttonFillStyleNotApplied ? 
                                 Formatting.Bold : Formatting.RemoveBold);
            RichTextBox_Main.ApplyFormatting(format, null);
            RichTextBox_Main.ReturnFocus();
        }
    }
}

Dapat dilihat pada kode di atas adalah kode untuk mengubah style text menjadi "cetak tebal", bagaimana untuk membuat fasilitas italic, underline, mengubah ukuran font dan lain2 ?  Caranya "sederhana", cukup lakukan hal yang sama seperti contoh di atas :)

Untuk contoh lengkap code ini beserta solution-nya dapat diunduh di sini.

Share this post: | | | |
Posted: Sep 23 2008, 12:18 AM by reyza | with no comments
Filed under:

Comments

No Comments