1. 程式人生 > >WPF自學筆記(一):簡易記事本(Rich TextBox)

WPF自學筆記(一):簡易記事本(Rich TextBox)

  本文利用WPF的Rich TextBox控制元件製作簡易的記事本,實現文字文件的開啟與閱讀。曾嘗試利用SetParent()方法把windows自帶的記事本嵌入到WPF中,但是按鈕較小,不適合專案需要。因此才想著利用Rich TextBox控制元件自己做。

介面框架

  在XAML中放入一個Rich TextBox(用來顯示文件)和5個Button(作用分別是開啟檔案、上一行、下一行、上一頁和下一頁)

      <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="108"
/> <RowDefinition Height="108"/> <RowDefinition Height="108"/> <RowDefinition Height="107"/> <RowDefinition Height="107"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="126"
/> <ColumnDefinition Width="*"/> <ColumnDefinition Width="957"/> </Grid.ColumnDefinitions> <Button x:Name="Openbt" Style="{StaticResource btStyle}" Grid.Row="0" Grid.Column="0" Width="124" Content="開啟檔案&#xD;&#xA;OpenFile"
Click="Openbt_Click"/> <Button x:Name="Lastlbt" Style="{StaticResource btStyle}" Grid.Row="1" Grid.Column="0" Width="124" Content=" 上一行&#xD;&#xA;LastLine" Click="Lastl_Click"/> <Button x:Name="Nextlbt" Style="{StaticResource btStyle}" Grid.Row="2" Grid.Column="0" Width="124" Content=" 下一行&#xD;&#xA;NextLine" Click="Nextl_Click"/> <Button x:Name="Lastpbt" Style="{StaticResource btStyle}" Grid.Row="3" Grid.Column="0" Width="124" Content=" 上一頁&#xD;&#xA;LastPage" Click="Lastp_Click" /> <Button x:Name="Nextpbt" Style="{StaticResource btStyle}" Grid.Row="4" Grid.Column="0" Width="124" Content=" 下一頁&#xD;&#xA;NextPage" Click="Nextp_Click"/> <RichTextBox x:Name="richtb" Grid.Row="0" Grid.RowSpan="5" Grid.Column="2" FontSize="18"/> </Grid>

按鈕樣式

  注意,上面使用了Grid.RowDefinitions把Grid分成了5行3列方便佈局。Button使用了Style=”{StaticResource btStyle}”統一外觀。其Style程式碼如下所示:

    <Window.Resources>
        <Style x:Key="btStyle" TargetType="{x:Type Button}">
            <Setter Property="Background" Value="#FF0091FF"/>
            <Setter Property="Foreground" Value="#FFFFE100"/>
            <Setter Property="FontSize" Value="18"/>
            <Setter Property="FontWeight" Value="Bold"/>
        </Style>
    </Window.Resources>

  最後得到的介面外觀圖如下所示:

這裡寫圖片描述

  左側為五個功能按鈕,右側為Rich TextBox顯示區域。

瀏覽檔案按鈕

  瀏覽檔案功能需要使用windows API Code Pack,VS2015中好像整合的有,新增引用就好了。我使用的VS2013,所以需要安裝。VS開啟工程,找到“工具”>>“庫程式包管理器”>>”程式包管理器控制檯”,輸入:

這裡寫圖片描述

這裡寫圖片描述

  安裝完成之後,會自動新增引用到工程:

這裡寫圖片描述

  新增名稱空間

using Microsoft.WindowsAPICodePack.Dialogs;

  下面寫“開啟檔案”按鈕的Click

        private void Openbt_Click(object sender, RoutedEventArgs e)
        {
            CommonOpenFileDialog cofd2 = new CommonOpenFileDialog();
            cofd2.Filters.Add(new CommonFileDialogFilter("文件檔案", "*.txt"));

            string str = null;
            if (cofd2.ShowDialog() == CommonFileDialogResult.Ok)
            {
                FilePath = cofd2.FileName;

                FileStream myfile = new FileStream(FilePath, FileMode.Open, FileAccess.Read);  
                StreamReader reader = new       
                StreamReader(myfile, System.Text.Encoding.Default);                  
                str = rder.ReadToEnd();             
             }

            richtb.Document.Blocks.Clear();            
            richtb.Document.Blocks.Add(new Paragraph(new Run(str))); //顯示內容
        }

  上面最後兩句程式碼的richtb為介面中Rich TextBox的名字。這裡需要注意,可能很多部落格裡面會使用Rich TextBox.LoadFile()直接載入文件,但是這個只是System.Windows.Forms中的Rich TextBox。在WPF中的Rich TextBox是沒有這個方法的。而我們知道,System.Windows.Forms中的控制元件,在介面中會預設置頂的,所以會遮擋其它WPF控制元件,可能會產生其他後續問題。經過實際測試:

richtb.Document.Blocks.Add(new Paragraph(new Run(str)));

  這句程式碼開啟文件的效率很高, 不會出現介面卡頓延遲的情況,點選“開啟檔案”執行效果圖如下。

這裡寫圖片描述

  開啟文件之後:

這裡寫圖片描述

  Rich TextBox有豐富的文字格式,所以上面顯示的字型,背景等屬性都是可以自己定義的,不再贅述。

其它按鈕

  其它四個按鈕(上一行,下一行,上一頁,下一頁)的Click直接在裡面使用Rich TextBox自帶的方法就可以了。

        private void Lastl_Click(object sender, RoutedEventArgs e)
        {
            richtb.LineUp();
        }
        private void Nextl_Click(object sender, RoutedEventArgs e)
        {
            richtb.LineDown();
        }
        private void Lastp_Click(object sender, RoutedEventArgs e)
        {
            richtb.PageUp();
        }
        private void Nextp_Click(object sender, RoutedEventArgs e)
        {
            richtb.PageDown();
        }

總結

程式碼自己敲出來的才是自己的。繼續努力!