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="開啟檔案
OpenFile" Click="Openbt_Click"/>
<Button x:Name="Lastlbt" Style="{StaticResource btStyle}"
Grid.Row="1" Grid.Column="0" Width="124"
Content=" 上一行
LastLine" Click="Lastl_Click"/>
<Button x:Name="Nextlbt" Style="{StaticResource btStyle}"
Grid.Row="2" Grid.Column="0" Width="124"
Content=" 下一行
NextLine" Click="Nextl_Click"/>
<Button x:Name="Lastpbt" Style="{StaticResource btStyle}"
Grid.Row="3" Grid.Column="0" Width="124"
Content=" 上一頁
LastPage" Click="Lastp_Click" />
<Button x:Name="Nextpbt" Style="{StaticResource btStyle}"
Grid.Row="4" Grid.Column="0" Width="124"
Content=" 下一頁
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();
}
總結
程式碼自己敲出來的才是自己的。繼續努力!