Edit the XAML to add four buttons for the basic arithmetic operations. I placed them in a vertical column, along the right side of the numbers, as illustrated in the following screen shot:

To differentiate the arithmetic buttons from the number keys, assign them a color.

You can do this by setting the Foreground property, either through the Property editor or by editing the XAML directly. (I set my buttons to LightGreen.)

When you have added all four buttons, pick one and display its events in the Property editor. Type ArithmeticButtons_Click as the handler name and then press Enter

Visual Studio adds an empty handler for you.

Edit the other three arithmetic operation buttons so that they use the same handler.

Start by adding an integer member to the MainPage class in MainPage.xaml.h, remembering to place it in the private section.

int leftOperand;

Add code to the handler to convert the text to an int and store it in the leftOperand.

void ProgCalc::MainPage::ArithmeticButtons_Click(Platform::Object^ sender,
           Windows::UI::Xaml::RoutedEventArgs^ e)
{
    String ^txt = txtOutput->Text;
    int val;
    swscanf_s(txt->Data(), L"%d", &val);
    leftOperand = val;
}

There are a number of ways to perform the string-to-int conversion, and the one I’ve used here will simplify using other number bases later in the program. The swscanf_s function takes a string and converts it according to a format. The first argument is the raw string, which you can get from the String object by using its Data function. The second argument is the format string. The leading L denotes a wide character (as opposed to an ASCII) string literal, and %d alerts the function to expect a string that represents a decimal integer. Finally, the &val passes the address of the variable where the result should be written.

Open the MainPage.xaml.h file and add the declaration for an enum at the top, above the MainPage class declaration but still within the namespace.

namespace ProgCalc
{
    enum class ArithOp
    {
        PLUS, MINUS, TIMES, DIVIDE, NONE
    };

    public ref class MainPage sealed
    {
        ...
    };
}

The enum has one member for each operation, plus one to indicate that there is no operation. The names follow convention by being in capitals.

Add a private member to the MainPage class to represent the current operation.

ArithOp currentOp;

Open the MainPage.xaml.cpp file and set the operation to NONE in the constructor, placing it after the call to InitializeComponent.

MainPage::MainPage()
{
    InitializeComponent();

    currentOp = ArithOp::NONE;
}

You can now see which button was pressed. Edit the ArithmeticButtons_Click function to set the operation accordingly, using a chain of if-else statements.

Button ^btn = (Button^)sender;
if (btn == btnPlus) currentOp = ArithOp::PLUS;
else if ...

Clear the display by setting the Text property for the TextBlock to an empty string.

Build the app to verify that there are no errors.

You can’t see any result at this stage, but you can if you want run the app in the debugger, setting a breakpoint in the arithmetic button handler to check that the conversion is working.

In MainPage.xaml, bring up the properties for the Equals button and add a handler called EqualsButton_Click.

Add checks at the start of the handler to determine if there is anything to do.

if (currentOp == ArithOp::NONE) return;
if (txtOutput->Text->Length() == 0) return;

Get the string from the display and convert it to a number.

You’ll realize that you need to use the same code that you implemented in the arithmetic button handler, but this would lead to duplication. As a rule, any time that you see duplicated code, you should consider pulling it out into a separate function, a process called refactoring.

Open the MainPage.xaml.h file and add the prototype for a function called ConvertTextToInt, placing it inside the namespace:

int ConvertTextToInt(Platform::String ^str);

Because this is a utility function and doesn’t need access to internal details of MainPage, this doesn’t have to be a member of the MainPage class, although you can make it one if you like.

Add the implementation to the MainPage.xaml.cpp file, as shown in the following:

int ProgCalc::ConvertTextToInt(Platform::String ^str)
{
     int val;
     swscanf_s(str->Data(), L"%d", &val);
     return val;
}

Replace the original code in the arithmetic button handler with a call to your new function, like this:

leftOperand = ConvertTextToInt(txtOutput->Text);

Build the app and confirm that it still works as expected.

Start by declaring the following two variables, one to hold the number currently in the TextBlock, and another to hold the result:

int rightOperand = 0;
int result = 0;

Store the content of the TextBlock in the rightOperand variable.

rightOperand = ConvertTextToInt(txtOutput->Text);

Add a switch statement that branches based on the operation.

switch(currentOp) {
case ArithOp::PLUS:
    result = leftOperand + rightOperand;
    break;
...
}

Addition, subtraction, and multiplication are simple, but you need to guard against dividing by zero. If you find that you are about to this, display an error message and return.

case ArithOp::DIVIDE:
    if (rightOperand == 0) {
        txtOutput->Text = "Divide by zero";
        Reset();
        return;
    }
    result = leftOperand / rightOperand;
    break;

Observe the call to Reset. If you get a divide by zero, you can’t continue; you want to abandon the calculation and reset everything. But, because this can involve several operations, it makes sense to put it in a separate function.

Add the following declaration of the private Reset function to the MainPage class in MainPage.xaml.h, along with a Boolean member called clearOnNextKey:

void Reset();
bool clearOnNextKey;

Add the definition to the source file, as demonstrated here:

void ProgCalc::MainPage::Reset()
{
    currentOp = ArithOp::NONE;
    leftOperand = 0;
    clearOnNextKey = true;
}

The function clears the operation and saved left operand. The clearOnNextKey variable helps with controlling the UI. At present, the TextBlock is cleared when you press an operator key, ready for you to enter a new number. What we want to do in this case is to leave the message on the display and not clear it until the user taps a number key.

Add the following code to the start of NumberButtons_Click:

if (clearOnNextKey == true) {
    txtOutput->Text = "";
    clearOnNextKey = false;
}

If the flag is set, the TextBlock will be cleared before proceeding.

After you’ve done that, you can complete the equals handler, turning the result into a string and putting it back in the display.

wchar_t buff[80];
swprintf(buff, 80, L"%d", result);
txtOutput->Text = ref new String(buff);

This code uses swprintf—which does the opposite to the swscanf_s function that you learned about earlier—taking a value and converting it to a string in a given format. Unlike swscanf_s, swprintf needs an array of wchar_t, which you need to convert to a Platform::String in order to use it with the TextBlock.

Drag on the UI to select the 16 number and arithmetic operations. Move them down to leave space for another row of buttons below the TextBlock.

Add a row of six buttons in the gap, making them the same size as the number buttons. These represent the hexadecimal digits A through F, so give them the names btnHexA thru btnHexF. You should end up with an arrangement similar to following:

Ensure that they use the same handler as the other number buttons.

Add three buttons next to the arithmetic operation keys and under the “E” key. Label them “dec”, “hex”, and “bin”, from the top downward, and give them the names btnDecimal, btnHex and btnBinary. You’ll need to decrease the font size for the text to fit on the buttons, and you can change the color to make them stand out. Refer back to the first figure in this chapter to see what the arrangement looks like.

You’ll need to a way to determine which base you’re using, so add a TextBlock to the right of the main display. Give it a name (such as txtBase) and set its font size to about 24.

Open the Properties editor, and add a handler called BaseButtons_Click to all three buttons.

You need a way to store the base that has been chosen. Like the arithmetic operation, you are choosing from a small set of values, so another enum is appropriate. Open MainPage.xaml.h and add an enum within the namespace.

namespace ProgCalc
{
    enum class Base
    {
        DEC, HEX, BIN
    };
    ...
};

Add a data member to the MainPage class to hold the current base, and initialize it to decimal in the Reset function.

// In MainPage.xaml.h
Base base;

// In MainPage.xaml.cpp
void ProgCalc::MainPage::Reset()
{
    currentOp = ArithOp::NONE;
    base = Base::DEC;
    leftOperand = 0;
    clearOnNextKey = true;
}

Edit BaseButtons_Click and add the outline of the logic.

void ProgCalc::MainPage::BaseButtons_Click(Platform::Object^ sender,
    Windows::UI::Xaml::RoutedEventArgs^ e)
{
    // Get the button that was pressed
    Button ^btn = (Button^)sender;

    if (btn == btnDecimal)
    {
        // Enable the decimal buttons
        base = Base::DEC;
        txtBase->Text = "dec";
    }
    else if (btn == btnHex)
    {
        // Enable the hex buttons
        base = Base::HEX;
        txtBase->Text = "hex";
    }
    else if (btn == btnBinary)
    {
        // Enable the binary buttons
        base = Base::BIN;
        txtBase->Text = "bin";
    }
}

You can see how each of the cases sets the base variable and displays the current base in the TextBlock. The comments about enabling buttons are there as placeholders, because this is another example of code that is best provided as separate functions.

Add three new members to the MainPage class declaration in MainPage.xaml.h.

void EnableHexButtons(bool enable);
void EnableDecimalButtons(bool enable);
void EnableBinaryButtons();

Notice the slightly different form of the binary function. I’ve added the Boolean argument to the decimal and hexadecimal functions to help avoid code duplication.

Implement the following functions in MainPage.xaml.cpp:

void ProgCalc::MainPage::EnableHexButtons(bool enable)
{
    btnHexA->IsEnabled = enable;
    btnHexB->IsEnabled = enable;
    btnHexC->IsEnabled = enable;
    btnHexD->IsEnabled = enable;
    btnHexE->IsEnabled = enable;
    btnHexF->IsEnabled = enable;
}

void ProgCalc::MainPage::EnableBinaryButtons()
{
    EnableHexButtons(false);
    EnableDecimalButtons(false);
    btnZero->IsEnabled = true;
    btnOne->IsEnabled = true;
}

void ProgCalc::MainPage::EnableDecimalButtons(bool enable)
{
    btnZero->IsEnabled = enable;
    btnOne->IsEnabled = enable;
    btnTwo->IsEnabled = enable;
    btnThree->IsEnabled = enable;
    btnFour->IsEnabled = enable;
    btnFive->IsEnabled = enable;
    btnSix->IsEnabled = enable;
    btnSeven->IsEnabled = enable;
    btnEight->IsEnabled = enable;
    btnNine->IsEnabled = enable;
}

The decimal and hexadecimal functions enable or disable the 0 through 9 and A through F keys, respectively. The binary function only wants the 0 and 1 keys, so the easiest solution is to disable everything and turn on the ones you want.

Call them from the base handler. For the binary case, just call EnableBinaryButtons. For the decimal case, call EnableDecimalButtons(true) and EnableHexButtons(false), and for the hexadecimal case, call both the decimal and hex functions with true as the argument.

if (btn == btnDecimal)
{
    // Enable the decimal buttons
    EnableDecimalButtons(true);
    EnableHexButtons(false);
    base = Base::DEC;
    txtBase->Text = "dec";
}
else if (btn == btnHex)
{
    // Enable the hex buttons
    EnableDecimalButtons(true);
    EnableHexButtons(true);
    base = Base::HEX;
    txtBase->Text = "hex";
}
else if (btn == btnBinary)
{
    // Enable the binary buttons
    EnableBinaryButtons();
    base = Base::BIN;
    txtBase->Text = "bin";
}

Add the default state to the Reset function so that it will be reset to decimal:

void ProgCalc::MainPage::Reset()
{
    currentOp = ArithOp::NONE;
    base = Base::DEC;
    txtBase->Text = "dec";
    leftOperand = 0;
    clearOnNextKey = true;
    EnableDecimalButtons(true);
    EnableHexButtons(false);
}

Call Reset from the OnNavigatedTo function, which means the page will initialize properly.

Build the app to ensure there are no coding errors.

Edit the ConvertTextToInt function so that it looks like the following example. Notice how it is now a member of the MainPage class so that it has access to members of the class:

int ProgCalc::MainPage::ConvertTextToInt(Platform::String^ s)
{
    int n;

    if (base == Base::HEX)
        swscanf_s(s->Data(), L"%x", &n);
    else if (base == Base::DEC)
        swscanf_s(s->Data(), L"%d", &n);
    else if (base == Base::BIN)
        n = FromBinary(s->Data());

    return n;
}

The %x descriptor converts a hexadecimal string, and %d handles the decimal case. You will provide your own function to deal with the binary conversion.

Add a prototype for the FromBinary function to MainPage.xaml.h. Because this is a utility function and doesn’t need access to any members of the MainPage class, you don’t have to make it a member.

unsigned long FromBinary(std::wstring s);

Add the implementation to the MainPage.xaml.cpp file

unsigned long ProgCalc::FromBinary(std::wstring s)
{
    wchar_t *stop;
    long l = wcstol(s.c_str(), &stop, 2);

    return l;
}

This function uses the wcstol (Wide Character String To Long) function for the conversion, which will cope with input strings in binary. Here is where you see a good example of the many string conversions that you might need to use in Windows programming: the Data function gets a wstring out of the Platform::String, and the c_str function then gets a wchar_t* that represents the content of the wstring.

Notice the second argument to the function. This returns a pointer to where the number stopped in the string that you passed in. The idea is that the function will convert as much of the string as it can to a number and then stop when it reaches a character it can’t handle; it will then pass you back a pointer to that character, so you can pinpoint where parsing stopped. Because we know that the entire string is valid, we don’t need to use that argument, but we must still supply a variable.

You now need to do the opposite conversion, taking a value and converting it to a string in the correct format. Add a prototype for this function to the header file, such as shown in the following:

Platform::String^ ConvertOutputString(int val);

Add an implementation of the ConvertOutputString function to the source code file.

Platform::String^ ProgCalc::MainPage::ConvertOutputString(int val)
{
    wchar_t buff[80];
    if (base == Base::HEX)
        swprintf(buff, 80, L"%x", val);
    else if (base == Base::DEC)
        swprintf(buff, 80, L"%d", val);
    else if (base == Base::BIN)
    {
        String ^bf = ToBinary(val);
        return bf;
    }
    return ref new String(buff);
}

You can see that the structure of this function now mirrors that of ConvertTextToInt. It also uses another helper function called ToBinary to convert a value to a binary string.

Add the prototype for ToBinary to MainPage.xaml.h.

String^ ToBinary(int n);

Add the implementation to MainPage.xaml.cpp.

String^ ProgCalc::ToBinary(int n)
{
    String ^s = ref new String();

    do {
        s += (n & 1) ? L'1' : L'0';
    }
    while (n >>= 1);

    std::wstring result(s->Data());
    std::reverse( result.begin(), result.end() );

    s = ref new String(result.c_str());
    return s;
}

This function gives you a chance to use the bitwise operators, which is not something you have to do very often, so it is worth taking the opportunity to use them here. The do loop examines the code, bit by bit, adding a “1” or “0” character to a string, depending on whether the bit is set or not. The expression (n & 1) does a bitwise AND of the value and 1: Remember that the AND takes two integer values for each bit position, returning 1 if (and only if) both are set. Because “1” only has a single 1 in the lowest bit position, this is checking whether the lowest bit is set.

The loop condition (n >>= 1) does a right-shift on the value by one position. This shifts all the bits one place to the right, losing the rightmost bit, so that bit 2 becomes bit 1, and a zero is introduced on the far left to fill in. After the loop has examined all the bits, the number will be left as all zeros, so the loop will terminate.

At this point, however, the string is in the wrong order because the character representing the lowest bit is the first, and the others have been added on. So, you need to reverse the string; you could do this by using a loop, but the Standard Library has a useful reverse function, so you can use that, instead.

The final stage is to complete the logic for changing base and updating the display. Add code to the start of the BaseButtons_Click handler to get the number from the display, as illustrated here:

// Get the value from the display
int val = 0;

if (txtOutput->Text->Length() > 0)
    val = ConvertTextToInt(txtOutput->Text);

After changing the base, put the value back in the new format.

// Update the display
txtOutput->Text = ConvertOutputString(val);
clearOnNextKey = true;

Here is the complete handler, for reference:

void ProgCalc::MainPage::BaseButtons_Click(Platform::Object^ sender,
    Windows::UI::Xaml::RoutedEventArgs^ e)
{
    // Get the value from the display
    int val = 0;

    if (txtOutput->Text->Length() > 0)
        val = ConvertTextToInt(txtOutput->Text);

    // Get the button that was pressed
    Button ^btn = (Button^)sender;

    if (btn == btnDecimal)
    {
        EnableDecimalButtons(true);
        EnableHexButtons(false);
        base = Base::DEC;
        txtBase->Text = "dec";
    }
    else if (btn == btnHex)
    {
        EnableDecimalButtons(true);
        EnableHexButtons(true);
        base = Base::HEX;
        txtBase->Text = "hex";
    }
    else if (btn == btnBinary)
    {
        EnableBinaryButtons();
        base = Base::BIN;
        txtBase->Text = "bin";
    }

    // Update the display
    txtOutput->Text = ConvertOutputString(val);
    clearOnNextKey = true;
}

Edit the EqualsButton_Click function so that the output will be converted to the right base. Locate the lines at the end of the function that use swprintf and place the result into a buffer, which should look like this:

wchar_t buff[80];
swprintf(buff, 80, L"%d", result);
txtOutput->Text = ref new String(buff);

Replace them with the following code:

txtOutput->Text = ConvertToOutputString(result);
clearOnNextKey = true;

Build and run the app, and test it thoroughly!

Open StandardStyles.xaml, and search for Standard AppBarButton Styles.

This is followed by a lot of commented out entries which define styles for various buttons.

Copy one of the style entries, remove the comments, and then edit it so that it looks like this:

<Style x:Key="HexAppBarButtonStyle" TargetType="ButtonBase"
        BasedOn="{StaticResource AppBarButtonStyle}">
    <Setter Property="AutomationProperties.AutomationId" Value="HexAppBarButton"/>
    <Setter Property="AutomationProperties.Name" Value="Hex"/>
    <Setter Property="Content" Value="h"/>
</Style>

This creates a style for the Hex button, which is based on the default AppBarButton style and whose content is an “h”. The Name is the text that will be displayed below the button when it appears on the app bar.

Repeat the previous step to create styles for the decimal and binary buttons.

<Style x:Key="DecAppBarButtonStyle" TargetType="ButtonBase"
        BasedOn="{StaticResource AppBarButtonStyle}">
    <Setter Property="AutomationProperties.AutomationId" Value="DecAppBarButton"/>
    <Setter Property="AutomationProperties.Name" Value="Dec"/>
    <Setter Property="Content" Value="d"/>
</Style>
<Style x:Key="BinAppBarButtonStyle" TargetType="ButtonBase"
        BasedOn="{StaticResource AppBarButtonStyle}">
    <Setter Property="AutomationProperties.AutomationId" Value="BinAppBarButton"/>
    <Setter Property="AutomationProperties.Name" Value="Bin"/>
    <Setter Property="Content" Value="b"/>
</Style>

Save the StandardStyles.xaml file.

Add this XAML to the bottom of the Page element, immediately after the end of the Grid:

<Page.BottomAppBar>
    <AppBar x:Name="bottomAppBar" Padding="10, 0 10, 0">
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
            <Button x:Name="btnAppBarDec" Style="{StaticResource DecAppBarButtonStyle}"
                Click="BaseButtons_Click"/>
            <Button x:Name="btnAppBarHex" Style="{StaticResource HexAppBarButtonStyle}"
                Click="BaseButtons_Click"/>
            <Button x:Name="btnAppBarBin" Style="{StaticResource BinAppBarButtonStyle}"
                Click="BaseButtons_Click"/>
        </StackPanel>
    </AppBar>
</Page.BottomAppBar>

The BottomAppBar element contains an AppBar, which in turn contains a StackPanel. A StackPanel is a container that contains a stack of items, in this case arranged horizontally and left-aligned. Like menus, it is a convention that commands on a bottom app bar should be left-aligned, and any buttons for help should be right-aligned on the other side of AppBar.

Each button has the appropriate style set and is linked to the base buttons click handler.

Build and run the app. When the UI appears, right-click with the mouse or swipe upward from the bottom of the screen. You should see the app bar appear. Click or touch anywhere else on the screen (or swipe downward), and it will slide away.

Edit the code in the BaseButtons_Click function so that it accepts both the button on the screen and the app bar buttons.

if (btn == btnHexBase || btn == btnAppBarHex)

Build and run the app.

You can now change the base by using the app bar.

At the top of the MainPage.xaml.cpp file, add the following using declaration for the DataTransfer namespace:

using namespace Windows::ApplicationModel::DataTransfer;

Implement the handler that it going to be called when a sharing request arrives. Start by adding a member to the MainPage class declaration in MainPage.xaml.h.

void ShareTextHandler(
    Windows::ApplicationModel::DataTransfer::DataTransferManager^ sender,
    Windows::ApplicationModel::DataTransfer::DataRequestedEventArgs^ e);

As usual with event handlers, the two arguments represent the source of the event and event arguments. A DataTransferManager is an object that implements the sharing functionality within an app; you will shortly create one of these for your app.

Add the implementation of the handler to MainPage.xaml.cpp. Start by getting the Data Request object out of the event args—this is the object that is sent in reply to the request, and you can obtain a DataPackage by using its Data member.

void ProgCalc::MainPage::ShareTextHandler(DataTransferManager^ sender,
        DataRequestedEventArgs^ e)
{
    DataRequest ^request = e->Request;
    DataPackage ^data = request->Data;

    // Now add the data you want to share.
}

You can now fill in the data that you want to share.

Any content must have at least two properties (a title and the content itself). What other properties it has depends first on what you’re sharing, and second on how helpful you want to be!

// Set the title and description
data->Properties->Title = "Calculator data";
data->Properties->Description = "A demonstration of sharing";
// Add the data
data->SetText(txtOutput->Text);

Set up the DataTransferManager so that sharing is active for the app. Start by adding a new private member to the MainPage class, as shown here:

Windows::Foundation::EventRegistrationToken dataRequestedToken;

This object is returned to you when you register your event handler with the DataTransfer Manager. It isn’t strictly necessary to include it here, because you only need it when implementing a multipage app. In that case, you will implement the OnNavigatedFrom function, which is called when you move to another page, and you’d use the token to tell the Data TransferManager that you no longer want this page to receive share events. There is, however, no harm in including it, and it will serve to remind you of what to do when you move on to multipage applications.

Add the following code to the OnNavigatedTo function to register for share events, placing it before the call to Reset:

DataTransferManager ^dataTransferManager = DataTransferManager::GetForCurrentView();

dataRequestedToken = dataTransferManager->DataRequested +=
    ref new TypedEventHandler<DataTransferManager^,
        DataRequestedEventArgs^>(this, &MainPage::ShareTextHandler);

Notice the rather compressed form of the second statement. You create a new TypedEvent Handler, which uses generics to create a delegate that will call a handler function. You use the angle brackets to specify the two argument types that the handler will use, and then provide the function that the delegate will call: in this case, it is the ShareTextHandler function on “this” object.

The delegate is hooked to the DataRequested event on the DataTransferManager, and this returns the token that you can use to unregister when navigating away from the page.

Build and run the app and put a number in the display. Then, select the Share charm, which is the second from the top.

After a few seconds initialization, you should see the title and description you provided, together with a list of the applications that can accept the data, as demonstrated in this screen shot:

You can see that the title for the data, along with a description if you supplied one, is shown so that users can decide what they want to do with the data. On the system I’m using, only the Mail app is able to accept shared text data.