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

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

运行环境：Win10 x64, NetFrameWork 4.8, 作者：乌龙哈里，日期：2019-05-10

---

章节：

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

---

一、起步

打开 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>

修修补补，大致完工后的界面

二、添加用户控件

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 的内容了。（回 导读）