WPF 模仿 UltraEdit 文件查看器系列一 用戶控件

WPF 模仿 UltraEdit 文件查看器系列一 用戶控件

運行環境：Win10 x64, NetFrameWork 4.8, 做者：烏龍哈里，日期：2019-05-10

---

章節：

1. 起步
2. 添加用戶控件

---

1、起步

打開 VS2019，選建立新項目，就選 WPF 應用（.NET Framework）,而後起名建立。

進入後，在 MainWindow.xaml 設計界面（參考 佈局），用 xaml （參考 WPF 中的 XAML）來先弄個差很少的界面，先把 Grid 給分行，用鼠標在設計器上分也成，不過我喜歡直接寫代碼。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="32"/><!--固定高，放ToolBar-->
        <RowDefinition Height="24"/><!--固定高，放一些控制的輸入TextBox，好比搜索、跳轉等-->
        <RowDefinition Height="*"/><!--自動高度，主要的顯示界面，放本身寫的控件-->
        <RowDefinition Height="24"/><!--固定高，放文件名之類的提醒-->
    </Grid.RowDefinitions>
</Grid>

接下來繼續在</Grid.RowDefinitions> 和</Grid>之間寫xaml，放些 ToolBar、StackPanel 進一步完善界面

<ToolBar Grid.Row="0">
    <Button Name="btnOpen" Content="閱"/>
</ToolBar>
<StackPanel Orientation="Horizontal" Margin="0,2" Grid.Row="1">
    <TextBlock Text="跳轉至地址"/>
    <TextBox Name="txtJumpTo" />
</StackPanel>
<StatusBar Grid.Row="3">
    <TextBlock Name="tbkTip"/>
</StatusBar>

出來的界面


有點醜，加點 Style 控制（參見 樣式設置和模板化）。能夠在 button 裏面寫，但考慮到還有一些按鈕是統一風格的，因此在<Grid>上面一行加個 button 的風格資源。

<Window.Resources>
    <Style x:Key="toolbutton" TargetType="Button">
        <Setter Property="FontSize" Value="26"/>
        <Setter Property="FontFamily" Value="Stliti"/><!--華雲隸體-->
        <Setter Property="Foreground" Value="Blue"/>
    </Style>
</Window.Resources>

而後在 button 的 xaml 描述里加上靜態綁定（參見 XAML 資源）。

<ToolBar Grid.Row="0">
    <Button Name="btnOpen" Style="{StaticResource toolbutton}" Content="閱"/>
</ToolBar>

修修補補，大體完工後的界面

2、添加用戶控件

Grid 的第3欄還空着，用來放以16進制來顯示文件內容的控件。沒有直接在主項目內擺放，而是選擇弄個用戶控件，是由於還想着複用，好比我還想弄個內存的查看程序，也用到這個顯示界面。不考慮直接弄成單獨的調用exe，主要是程序之間的通信有點複雜，仍是直接嵌進項目裏好弄。

WPF 的用戶控件有兩類，一種是自定義控件（參見 各類自定義控件），一種是現成控件的組合。第一種就是繼承，而後本身寫，很複雜。選簡單的第二種。

在 VisualStudio 的菜單上【項目】->【添加新項】裏面有兩個用戶控件，圖標很像，仔細看底下的文件名，一個是UserControl1.cs，一個是UserControl1.xaml。選文件後綴名爲 xaml 的。改個名叫 HexPanel.xaml，也出來一個設計界面。

在 VisualStudio 右上邊有個【解決方案資源管理器】，下面樹狀列表裏的 【HexPanel.xaml】點一下， 出來個【HexPanel.xaml.cs】，再次點擊，出來後臺的 cs 編輯器。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace HexEdit
{
    /// <summary>
    /// HexPanel.xaml 的交互邏輯
    /// </summary>
    public partial class HexPanel : UserControl
    {
        public HexPanel()
        {
            InitializeComponent();
        }
    }
}

點這個出來是由於我想把命名空間 namespace 的 HexEdit 改爲本身的 Harlee。改了以後，結果發現

public partial class HexPanel : UserControl
{
    public HexPanel()
    {
        InitializeComponent();
    }
}

中的 InitializeComponent(); 出現錯誤。參考 WPF 中的 XAML，去設計界面 HexPanel.xaml 中，把第一句：
<UserControl x:Class="HexEdit.HexPanel"
改爲：
<UserControl x:Class="Harlee.HexPanel"
再把
xmlns:local="clr-namespace:HexEdit"
改爲：
xmlns:local="clr-namespace:Harlee" 。

這邊沒有錯誤了，下來去主項目 MaiWindow.xaml 中添加。

先添加個命名空間，使得主項目的命名空間爲兩個：
xmlns:local="clr-namespace:HexEdit"
xmlns:harlee="clr-namespace:Harlee"

再在 Grid 中 添加用戶控件 HexPanel
<harlee:HexPanel x:Name="hplShow" Grid.Row="2"/>

至此，用戶控件加上了，下來就是編寫用戶控件 HexPanel 的內容了。（回 導讀）