In this phase of the .NETpad modernization project, we will implement a Find/Replace interface and its Find-related commands before forging ahead and tackling its Replace-related commands. As I explained recently, we will create the interface in a non-standard way, using a pane that toggles on/off as needed, and not a custom dialog. The goal here is two-fold: To create as natural a UI as possible while also improving on the rudimentary Find/Replace functionality in the original app.
If it's not clear what any of that means, please check out the article linked above. Here, we're just going to make it happen.
Create the Find/Replace pane
In previous phases of this project, we created a custom Content dialog and then used it to implement various custom dialogs needed by the app. The Find/Replace pane work is similar, but instead of creating a new window class, we're going to add the code inline in MainWindow.xaml, the main app window. It will go between the app's menu bar and text box, and it will be hidden by default and only appear when needed.
As you must know by now, the main app window is a simple grid with three rows for the menu bar (row 0), text box (row 1), and status bar (row 2), respectively. With this addition, however, there will be four rows, so we need to make space between the menu bar and the text box. Then we have to change the row numbers of the text box and status bar to 2 and 3, respectively. And add an extra row definition for the Find/Replace pane in row 1.
Next, we can block out the Find/Replace pane, which is implemented as a grid (of course). This will span the width of the app window. And while its visibility will be collapsed, we'll explicitly mark it as visible as we build it out so we can see it.
As always, there are multiple way to design this thing and create it with XAML code. But I am opting for simplicity: It's a single row. And then that row will be divided into various columns that represent some empty space on the far right and left (as we did with the custom Content dialog) and, in between those columns, space for all the necessary controls. Easy. But what controls do we need?
If you look at Notepad's File/Replace dialog and translate that into a pane with a single row of the most pertinent controls (we're going to ignore the "Match case" and "Wrap around" features under the "More options" for now, but I suspect both are simple enough to implement for a future update) it might look something like this.
But like Notepad's Find/Replace dialog, it may make sense to hide the controls related to Replace unless they're needed. So it could also have a default view like so when the user explicitly choose Find (and not Replace).
This requires a bit of auto-sizing finesse. So the Find/Relace pane will have four main columns, two for the spacers on the sides, one that will auto-size according to its contents, and one for the "Close" button over on the right, that will keep its...
With technology shaping our everyday lives, how could we not dig deeper?
Thurrott Premium delivers an honest and thorough perspective about the technologies we use and rely on everyday. Discover deeper content as a Premium member.