The UWP Notepad Project (Redux): User Settings (Premium)

Remember how easy it was to create user and application settings in the WinForms and WPF versions of .NETpad? Well, forget all about that, because it doesn’t work the same way in UWP: There’s no visual designer, and we have to implement settings manually in C# code. This isn’t horrible, but it does introduce some complexities. For example, what happens the first time we run the app and those settings don’t even exist yet?

To find out, let’s start with the font settings.

UWP’s support for fonts is very similar to that in WPF, which is nice because there’s less of a learning curve. (Moving from WinForms to WPF, by comparison, was difficult in this regard.) As with the WPF version of the app, we’ll keep track of the font family (what most would think of as “the font”) and the font size chosen by the user, plus whether it is bold and/or italic; so the font-related user settings we’ll create and interact with will include MyFontFamily, MyFontSize, MyFontBold, and MyFontItalic. We’ll load the associated user settings when the application first runs, and we’ll save them when the user changes any font configuration. Ideally, we’d also save them when the application closes, as we do in the WinForms and WPF versions of the app, but UWP makes that difficult.

To get started, open MainPage.xaml and scroll to the top. Locate the Page tag right at the top (it starts with <Page), and place the cursor somewhere within it. Then, switch the Properties pane to the event handlers list. And then double-click next to Loading to display a new, blank Page_Loading event handler in MainPage.xaml.cs.

Add the following line(s) of code inside this event handler:

// Read settings
ReadSettings();

The ReadSettings method doesn’t exist yet, so you’ll see a red squiggly line under it. That’s OK: We’re going to create it now and place all of the code we need to read user settings within it.

Below the Page_Loading event handler, create an empty ReadSettings method by adding the following code:

private void ReadSettings()
{

}

Now, add the following code inside of this method:

ApplicationDataContainer settings = ApplicationData.Current.LocalSettings;

string fontName = settings.Values["MyFontFamily"].ToString();
TextBox1.FontFamily = new FontFamily(fontName);

The ApplicationDataContainer class is used to create a container for the app’s settings, and it will have a red squiggly line under it, indicating that we need to add the Windows.Storage namespace to the C# file’s using section. I’ll assume you know how to do this now and will not usually mention this kind of thing going forward.

The next two lines should be familiar if you followed along with the WPF version of the app: We read the setting MyFontFamily and apply it to TextBox1’s FontFamily property, in effect changing the font displayed in the text box.

Well, theoretically. If you run the app now, you’ll run into a little problem: It throws an exception and kicks control back to Visual Studio.

The issue, of course, is that the MyFontFamily setting does not exist; we haven’t created it yet.

There are probably several different ways to solve this problem. Here’s what I came up with: First, we check to see if the MyFontFamily setting is null, meaning it does not yet exist. If it is, we will assume that all of the settings are null, i.e. that this is the first time the application is run, and we will thus apply default values manually to all of our font (and eventually other) settings. Then, we will save the settings, ensuring that the next time the app runs, it will read the font information from settings. But if MyFontFamily is not null, we will read that and all other settings from the app’s user settings.

Here’s what that looks like in code, with just MyFontFamily (and some comments for good measure):

ApplicationDataContainer settings = ApplicationData.Current.LocalSettings;

// Read font options from settings
if (settings.Values["MyFontFamily"] != null)
{
    // if it exists, load from settings
    // Font Family
    string fontName = settings.Values["MyFontFamily"].ToString();
    TextBox1.FontFamily = new FontFamily(fontName);
}
else
{
    // else load default font configuration and save to settings
    TextBox1.FontFamily = new FontFamily("Consolas");
}

If you run the application now, it will work fine, in that no exception is thrown. But the else clause will always run, since we never actually save the setting. We’ll get to that in a bit, when we create another method specifically for saving the font settings.

For now, let’s fill out that else clause with the other default values. Add this code inside the else clause and below the line that sets the text box’s FontFamily property.

TextBox1.FontSize = 18;
TextBox1.FontWeight = FontWeights.Normal;
TextBox1.FontStyle = FontStyle.Normal;

Now, when you run the app and type in the text box, you can see that it is 18-point Consolas, with no bold or italics.

Let’s create that method for saving the settings. In MainPage.xaml.cs, under the ReadSettings method, create a new blank method called SaveFontSettings:

private void SaveFontSettings()
{

}

Then, add the following code to write the correct values to each of our settings:

// Save font configuration to settings
ApplicationDataContainer settings = ApplicationData.Current.LocalSettings;
settings.Values["MyFontFamily"] = TextBox1.FontFamily.Source.ToString();
settings.Values["MyFontSize"] = TextBox1.FontSize;
if (TextBox1.FontWeight.Weight == 700)
    settings.Values["MyFontBold"] = "Bold";
else
    settings.Values["MyFontBold"] = "Normal";
settings.Values["MyFontItalic"] = TextBox1.FontStyle.ToString();

You might be wondering why the FontWeight value requires an if-then loop where FontStyle does not. I’m wondering too, but what I know is that FontWeight is set to 400 when its Normal and 700 when it’s bold. So we use the if-then loop to work around that. This kind of inconsistency is maddening to me.

Anyway, the next step is to call SaveFontSettings at the end of the else block in ReadSettings(); when we apply the default values for each font setting, we will save those values to user settings and, if this is the first time running the app, doing so will create those settings so we can use them going forward. So add the following line of code at the end of that else block:

SaveFontSettings();

Next, we need to read the other font settings—remember, we’re only reading MyFontFamily right now—in the ReadSettings method. Currently the top half of the if-else block looks like this:

if (settings.Values["MyFontFamily"] != null)
{
    // if it exists, load from settings
    // Font Family
    string fontName = settings.Values["MyFontFamily"].ToString();
    TextBox1.FontFamily = new FontFamily(fontName);
}

So make some space above that curly brace at the bottom (and before the else block) and add the following code:

// Font Size
TextBox1.FontSize = Convert.ToDouble(settings.Values["MyFontSize"]);

// Font Bold
if (settings.Values["MyFontBold"].ToString() == "Bold")
    TextBox1.FontWeight = FontWeights.Bold;
else
    TextBox1.FontWeight = FontWeights.Normal;

// Font Italic
if (settings.Values["MyFontItalic"].ToString() == "Italic")
    TextBox1.FontStyle = FontStyle.Italic;
else
    TextBox1.FontStyle = FontStyle.Normal;

Note that FontSize is a double, so the MyFontSize setting is also a double; the other font settings are all strings.

When I first created this app, I also created a DeleteSettings method that removed all of the settings, allowing me to test the first-run experience at any time. I removed this method after I felt that everything was working properly, but it occurs now that having such a feature isn’t a bad idea. After all, the user might also want to go back to the defaults at some point.

This seems like a good thing to add to the Settings pane. But for now, let’s just create a temporary item in the secondary commands area of the main command bar so we’ll have it for testing purposes. We can replace that with a new interface in the Settings pane later.

Open MainPage.xaml and locate the <CommandBar.SecondaryCommands> block for the main command bar. There is one item inside of that, SettingsButton. Add a blank line above the SettingsButton definition and add the following XAML code:

<AppBarButton Icon="Delete" Label="Reset Settings" Name="ResetSettingsButton"  />

Then, create a Click event handler for this button—remember, the easiest way is using the Event handlers list in the Properties pane—and add the following code:

// remove all of the user settings
ApplicationDataContainer settings = ApplicationData.Current.LocalSettings;
settings.Values.Remove("MyFontFamily");
settings.Values.Remove("MyFontSize");
settings.Values.Remove("MyFontBold");
settings.Values.Remove("MyFontItalic");

When we add this to the Settings pane, we’ll also add an “Are you sure?” prompt.  But this will be good for testing things in the interim.

OK, that’s the font settings. But there are other user settings we need to work with:

MyWordWrap. This setting determines whether the textbox has word wrap enabled. The type is bool (Boolean) and the default value is false.

MyStatusBar. This setting determines whether the status bar is visible. The type is bool (Boolean) and the default value is true.

MyLabelPosition. This setting determines whether the buttons in the main command display labels. The type is bool (Boolean) and the default value is true.

MyAutoSave. This setting determines whether Auto Save is enabled. The type is bool (Boolean) and the default value is false.

Each of these settings will need to be dealt with in ReadSettings, which runs when the application starts. And each will need to be saved at various times, so we’ll create a new SaveOtherSettings method that will handle that need. And each will need to be reset in that ResetSettingsButton_Click event handler too.

Let’s start at the top.

In MainPage.xaml.cs, locate the ReadSettings method. Add the following lines of code at the end of the if clause of the if-then loop:

// Word Wrap
if (Convert.ToBoolean(settings.Values["MyWordWrap"]) == true)
    TextBox1.TextWrapping = TextWrapping.Wrap;
else
    TextBox1.TextWrapping = TextWrapping.NoWrap;

// Status Bar visibility
if (Convert.ToBoolean(settings.Values["MyStatusBar"]) == true)
    StatusBar.Visibility = Visibility.Visible;
else
    StatusBar.Visibility = Visibility.Collapsed;

// Command Bar label position
if (Convert.ToBoolean(settings.Values["MyLabelPosition"]) == true)
    MainCommandBar.DefaultLabelPosition = CommandBarDefaultLabelPosition.Right;
else
    MainCommandBar.DefaultLabelPosition = CommandBarDefaultLabelPosition.Collapsed;

// Auto Save
Boolean autoSave = Convert.ToBoolean(settings.Values["MyAutoSave"]);
if (autoSave == true)
    AutoSaveButton.Content = "Auto Save: On";
else
    AutoSaveButton.Content = "Auto Save: Off";

This should look familiar based on what we did earlier with the font properties.

Now, add the following code at the end of the else clause in the same if-then loop:

// do same for non-font settings
TextBox1.TextWrapping = TextWrapping.NoWrap;
StatusBar.Visibility = Visibility.Visible;
MainCommandBar.DefaultLabelPosition = CommandBarDefaultLabelPosition.Right;
AutoSaveButton.Content = "Auto Save: Off";
SaveOtherSettings();

That SaveOtherSettings method doesn’t exist yet, so let’s create that next. Somewhere in MainPage.xaml.cs—I put it right after SaveFontSettings()—create the SaveOtherSettings method like so:

private void SaveOtherSettings()
{
    // Save non-font options to settings
    ApplicationDataContainer settings = ApplicationData.Current.LocalSettings;

    // Word Wrap
    if (TextBox1 != null)
    {
        if (TextBox1.TextWrapping == TextWrapping.Wrap)
            settings.Values["MyWordWrap"] = true;
        else
            settings.Values["MyWordWrap"] = false;
    }

    // Status Bar
    if (StatusBar != null)
    {
        if (StatusBar.Visibility == Visibility.Visible)
            settings.Values["MyStatusBar"] = true;
        else
            settings.Values["MyStatusBar"] = false;
    }

    // Command Bar labels
    if (MainCommandBar != null)
    {
        if (MainCommandBar.DefaultLabelPosition == CommandBarDefaultLabelPosition.Right)
            settings.Values["MyLabelPosition"] = true;
        else
            settings.Values["MyLabelPosition"] = false;
    }

    // Auto Save
    if (AutoSaveButton != null)
    {
        if (AutoSaveButton.Content.ToString() == "Auto Save: On")
            settings.Values["MyAutoSave"] = true;
        else
            settings.Values["MyAutoSave"] = false;
    }
}

Finally, locate ResetSettingsButton_Click and add the following to the end of that event handler:

settings.Values.Remove("MyWordWrap");
settings.Values.Remove("MyStatusBar");
settings.Values.Remove("MyLabelPosition");
settings.Values.Remove("MyAutoSave");

If you run the application now, you won’t really notice much since there’s no way to change any of these settings while running the app. Since that all happens in the Settings pane, let’s get going on that next.

The first thing we need to do is populate each option in that Settings pane correctly: The Font and Font Size combo boxes need to be filled with the right values, and each of the available settings, including those combo boxes, need to be set correctly after reading the appropriate settings values. Each time the user makes a change, we’ll save the settings accordingly and make whatever necessary changes.

One of the benefits of this Settings pane is that we can see the font changes in the text box in real-time. So anytime the font or font size is changed, or the Bold or Italic options are toggled, we’ll see those changes happen. Likewise, we’ll see things like the toggling of word wrap, the command bar labels, and the status bar too.

To get started, open MainPage.xaml.cs and locate the MainPage constructor, which currently has just a single line of code (this.InitializeComponent();). Add the following code below that:

// Populate the Fonts combobox in Settings pane
FontsList.Items.Add("Arial");
FontsList.Items.Add("Calibri");
FontsList.Items.Add("Cambria");
FontsList.Items.Add("Consolas");
FontsList.Items.Add("Courier New");
FontsList.Items.Add("Georgia");
FontsList.Items.Add("Segoe UI");
FontsList.Items.Add("Selawik");
FontsList.Items.Add("Times New Roman");

// Populate the font size combobox in Settings pane
FontSizesList.Items.Add("8");
FontSizesList.Items.Add("9");
FontSizesList.Items.Add("10");
FontSizesList.Items.Add("11");
FontSizesList.Items.Add("12");
FontSizesList.Items.Add("14");
FontSizesList.Items.Add("16");
FontSizesList.Items.Add("18");
FontSizesList.Items.Add("20");
FontSizesList.Items.Add("22");
FontSizesList.Items.Add("24");
FontSizesList.Items.Add("26");
FontSizesList.Items.Add("28");
FontSizesList.Items.Add("36");
FontSizesList.Items.Add("48");
FontSizesList.Items.Add("72");
FontSizesList.Items.Add("96");

In case it’s not obvious, FontsList and FontSizesList are the names of the font and font size combo boxes in the Setting pane.

And if you created the WPF version of .NETpad, you may recall that we generated the font list dynamically and that it was filled with all of the available fonts on the PC. I never figured out a way to do this with UWP, so I used the lists of serif and sans-serif fonts that Microsoft says will always be available instead. I realize this isn’t ideal, but if you know of a way to dynamically generate the font list, I’m all ears.

Anyway, if you run the app now and open the Settings pane, you’ll find that the font names and sizes are available in the respective combo boxes. But that no value is selected. So let’s fix that, and do similarly for the other settings too.

Open MainPage.xaml and locate the definition for the SettingsPane SplitView. Its opening tag, you may recall, is above the open tag for the main Grid, near the top. Add a blank PaneOpening event handler for the SplitView, which will appear in MainPage.xaml.cs.

Then, add the following code, which is very similar to how we did this in the WPF version of the app (in the Font dialog):

// Select the correct font
for (int x = 0; x < FontsList.Items.Count; x++)
    if (FontsList.Items[x].ToString() == TextBox1.FontFamily.Source.ToString())
    {
        FontsList.SelectedItem = FontsList.Items[x];
        break;
    }

// Select the correct font size
for (int x = 0; x < FontSizesList.Items.Count; x++)
    if (FontSizesList.Items[x].ToString() == TextBox1.FontSize.ToString())
    {
        FontSizesList.SelectedIndex = x;
        break;
    }

We know that the font (FontFamily) is currently set to “Consolas” and that the font size is set to 18. So if you run the app now and display the Settings pane, it’s reasonable to expect that these two values will be selected. And sure enough…

Of course, the user needs to be able to change those values too. And that occurs via the combo boxes’ respective SelectionChanged event handlers. So create SelectionChanged event handlers for both FontsList and FontSizesList.

Then, add the following code to FontsList_SelectionChanged:

string fontName = FontsList.SelectedValue.ToString();
TextBox1.FontFamily = new FontFamily(fontName);
SaveFontSettings();

Next, add the following code to FontSizesList_SelectionChanged:

TextBox1.FontSize = Convert.ToDouble(FontSizesList.SelectedItem);
SaveFontSettings();

In both cases, the change is made immediately, and we save the font settings so that the change will survive app relaunches. To test this, paste some text into the text box—we haven’t implemented File Open yet—and play around with the font and font size combo boxes to see how it works. Be sure to test that the settings “stick” when you close and relaunch the app too.

Before leaving off for the day, let’s finish up with Bold and Italic. These are just as easy: Create Click event handlers for BoldButton and ItalicButton. Then, add the following code to BoldButton_Click:

if (BoldButton.IsChecked == true)
    TextBox1.FontWeight = FontWeights.Bold;
else
    TextBox1.FontWeight = FontWeights.Normal;
SaveFontSettings();

Next, add the following code to ItalicButton_Click:

if (ItalicButton.IsChecked == true)
    TextBox1.FontStyle = FontStyle.Italic;
else
    TextBox1.FontStyle = FontStyle.Normal;
SaveFontSettings();

Because BoldButton and ItalicButton are toggle buttons, they have toggled on/off states and will stay pressed in when selected. And they should work properly too.

That’s enough for today. Next time, we’ll complete the rest of the settings in the Settings pane.