Figure 11 is a basic bar chart. This particular one was generated using Open Office Calc with random data. It consists of a title, background, axis labels, grid, key, and bars representing the data.
Figure 11: Bar Chart
Each part of the chart can be thought of as being a distinct object. Each object is rendered one after the other, starting with the background followed by the grid, the data, and then the labels. The graph itself is composed of several objects which it draws one after the other to build a complete graphical representation of the data. Many things about the previous chart are generic and
applicable to different chart types. The grid, for example, could be used for a scatter plot, line chart, or histogram exactly as it is used here.
Our charting application will work in the same way. We will develop a collection of chart objects that can be added and removed from charts at will. The objects will be very basic to maintain a generic and usable foundation for a Direct2D charting application. The graph itself will be a class called GraphRenderer, which will be based on the SimpleTextRenderer class that we just
examined. Each of the objects comprising the GraphRenderer will be a scaled down version of the SimpleTextRenderer.
Create a new Direct2D (XAML) application in Visual Studio 2012 for Windows 8. This will form the starting point for our application. I have called my application GraphPlotting. You will need to change any references to this namespace to the name of your application if you copy the code for testing.
First, we can delete the XAML text on the form. Open the DirectXPage.xaml file by double-clicking its name in the Solution Explorer. This should display the page in a visual designer. Select Hello, XAML! and right-click. Click Delete on the context menu.
Figure 12: Deleting Text
There is also a hidden bar at the lower side of this panel which can be deleted. It is the bar that appears when the user right-clicks on the screen, allowing the background colors to change. This bar is not visible from the designer, so it is easiest to remove it from the XAML code. I have highlighted the lines to remove.
<Page
x:Class="GraphPlotting.DirectXPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:GraphPlotting"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<SwapChainBackgroundPanel x:Name="SwapChainPanel"
PointerMoved="OnPointerMoved" PointerReleased="OnPointerReleased"/>
<Page.BottomAppBar>
<AppBar Padding="10,0,10,0">
<Grid>
… Lots of XAML code here…!!!
</Grid>
Open the DirectXPage.xaml.cpp file. Delete the OnPreviousColorPressed and
OnNextColorPressed event handlers. In the constructor of this class, a SimpleTextRenderer object is created. We need to change this to a GraphRenderer constructor call. You can also delete the state saving methods, SaveInternalState and LoadInternalState. The
GraphRenderer class uses a method called PointerMoved instead of UpdateTextPosition. This method has been renamed in the code listing. The entire DirectXPage.xaml.cpp file should look like the following:
</AppBar>
</Page.BottomAppBar>
</Page>
// DirectXPage.xaml.cpp
#include "pch.h"
#include "DirectXPage.xaml.h"
using namespace GraphPlotting;
using namespace Platform;
using namespace Windows::Foundation;
using namespace Windows::Foundation::Collections;
using namespace Windows::Graphics::Display;
using namespace Windows::UI::Input;
using namespace Windows::UI::Core;
using namespace Windows::UI::Xaml;
using namespace Windows::UI::Xaml::Controls;
using namespace Windows::UI::Xaml::Controls::Primitives;
using namespace Windows::UI::Xaml::Data;
using namespace Windows::UI::Xaml::Input;
using namespace Windows::UI::Xaml::Media;
using namespace Windows::UI::Xaml::Navigation;
DirectXPage::DirectXPage() : m_renderNeeded(true), m_lastPointValid(false) { InitializeComponent();
m_renderer = ref new GraphRenderer();
m_renderer->Initialize(Window::Current->CoreWindow, SwapChainPanel, DisplayProperties::LogicalDpi);
Window::Current->CoreWindow->SizeChanged +=
ref new TypedEventHandler<CoreWindow^, WindowSizeChangedEventArgs^>(this,
&DirectXPage::OnWindowSizeChanged);
DisplayProperties::LogicalDpiChanged +=
ref new DisplayPropertiesEventHandler(this,
&DirectXPage::OnLogicalDpiChanged);
DisplayProperties::OrientationChanged +=
ref new DisplayPropertiesEventHandler(this,
&DirectXPage::OnOrientationChanged);
DisplayProperties::DisplayContentsInvalidated +=
ref new DisplayPropertiesEventHandler(this,
&DirectXPage::OnDisplayContentsInvalidated);
m_eventToken = CompositionTarget::Rendering::add(ref new EventHandler<Object^>(this, &DirectXPage::OnRendering));
m_timer = ref new BasicTimer();
}
void DirectXPage::OnPointerMoved(Object^ sender, PointerRoutedEventArgs^
args) {
auto currentPoint = args->GetCurrentPoint(nullptr);
if (currentPoint->IsInContact) { if (m_lastPointValid) {
Windows::Foundation::Point delta(
currentPoint->Position.X - m_lastPoint.X, currentPoint->Position.Y - m_lastPoint.Y );
m_renderer->PointerMoved(delta);
m_renderNeeded = true;
}
m_lastPoint = currentPoint->Position;
m_lastPointValid = true;
} else {
m_lastPointValid = false;
} }
void DirectXPage::OnPointerReleased(Object^ sender, PointerRoutedEventArgs^
args) {
m_lastPointValid = false;
}
void DirectXPage::OnWindowSizeChanged(CoreWindow^ sender, WindowSizeChangedEventArgs^ args) {
m_renderer->UpdateForWindowSizeChange();
m_renderNeeded = true;
}
void DirectXPage::OnLogicalDpiChanged(Object^ sender) { m_renderer->SetDpi(DisplayProperties::LogicalDpi);
Open the DirectXPage.xaml.h file and delete the declarations of the OnPreviousColorPressed and OnNextColorPressed event handlers that we removed from the CPP file, and change the include from SimpleTextRenderer.h to GraphRenderer.h, and the member variable declaration from SimpleTextRenderer^ to GraphRenderer^. Delete the declarations for the SaveInternalState and LoadInternalState methods as well. The file should look like the following (Visual Studio will underline references in red as we are yet to declare the GraphRenderer class).
m_renderNeeded = true;
}
void DirectXPage::OnOrientationChanged(Object^ sender) { m_renderer->UpdateForWindowSizeChange();
m_renderNeeded = true;
}
void DirectXPage::OnDisplayContentsInvalidated(Object^ sender) { m_renderer->ValidateDevice();
m_renderNeeded = true;
}
void DirectXPage::OnRendering(Object^ sender, Object^ args) {
if (m_renderNeeded) // Comment out this line to make real-time updating
{
m_timer->Update();
m_renderer->Update(m_timer->Total, m_timer->Delta);
m_renderer->Render();
m_renderer->Present();
m_renderNeeded = false;
} }
// DirectXPage.xaml.h
#pragma once
#include "DirectXPage.g.h"
Open the App.xaml.cpp file, and remove the two references to the LoadInternalState and SaveInternalState methods:
#include "GraphRenderer.h"
#include "BasicTimer.h"
namespace GraphPlotting{
[Windows::Foundation::Metadata::WebHostHidden]
public ref class DirectXPage sealed { public:
DirectXPage();
private:
void OnPointerMoved(Platform::Object^ sender,
Windows::UI::Xaml::Input::PointerRoutedEventArgs^ args);
void OnPointerReleased(Platform::Object^ sender,
Windows::UI::Xaml::Input::PointerRoutedEventArgs^ args);
void OnWindowSizeChanged(Windows::UI::Core::CoreWindow^ sender, Windows::UI::Core::WindowSizeChangedEventArgs^ args);
void OnLogicalDpiChanged(Platform::Object^ sender);
void OnOrientationChanged(Platform::Object^ sender);
void OnDisplayContentsInvalidated(Platform::Object^ sender);
void OnRendering(Object^ sender, Object^ args);
Windows::Foundation::EventRegistrationToken m_eventToken;
GraphRenderer^ m_renderer;
bool m_renderNeeded;
Windows::Foundation::Point m_lastPoint;
bool m_lastPointValid;
BasicTimer^ m_timer;
};
}
// App.xaml.cpp
// Implementation of the App class.
#include "pch.h"
#include "DirectXPage.xaml.h"
using namespace GraphPlotting;
using namespace Platform;
using namespace Windows::ApplicationModel;
using namespace Windows::ApplicationModel::Activation;
using namespace Windows::Foundation;
using namespace Windows::Foundation::Collections;
using namespace Windows::Storage;
using namespace Windows::UI::Xaml;
using namespace Windows::UI::Xaml::Controls;
using namespace Windows::UI::Xaml::Controls::Primitives;
using namespace Windows::UI::Xaml::Data;
using namespace Windows::UI::Xaml::Input;
using namespace Windows::UI::Xaml::Interop;
using namespace Windows::UI::Xaml::Media;
using namespace Windows::UI::Xaml::Navigation;
App::App() {
InitializeComponent();
Suspending += ref new SuspendingEventHandler(this, &App::OnSuspending);
}
void App::OnLaunched(LaunchActivatedEventArgs^ args) { m_directXPage = ref new DirectXPage();
// Place the page in the current window and ensure that it is active.
Window::Current->Content = m_directXPage;
Window::Current->Activate();
}
The following GraphRenderer class will take the place of the SimpleTextRenderer supplied in the Direct2D (XAML) template, so that we can delete the SimpleTextRenderer from our project. Select the two files that define the SimpleTextRenderer (SimpleTextRenderer.h and
SimpleTextRenderer.cpp) in the Solution Explorer. To delete them, right-click and select Remove from the context menu.
Add two files to the project, GraphRenderer.h and GraphRenderer.cpp. These files will define our graph renderer class. These files will change often as our charts evolve, but the following is their initial listing.
void App::OnSuspending(Object^ sender, SuspendingEventArgs^ args) { (void) sender; // Unused parameter.
(void) args; // Unused parameter.
}
// GraphRenderer.h
#pragma once
#include "DirectXBase.h"
//
// Additional headers for graph objects here //
// This class represents a graph
ref class GraphRenderer sealed : public DirectXBase{
public:
// Public constructor GraphRenderer();
// DirectXBase methods.
virtual void CreateDeviceIndependentResources() override;
virtual void CreateDeviceResources() override;
virtual void CreateWindowSizeDependentResources() override;
virtual void Render() override;
// Capture the pointer movements so the user can pan the chart
void PointerMoved(Windows::Foundation::Point point);
// Method for updating time-dependent objects.
void Update(float timeTotal, float timeDelta);
private:
// Global pan value for moving the chart with the mouse Windows::Foundation::Point m_pan;
};
// GraphRenderer.cpp
#include "pch.h"
#include "GraphRenderer.h"
using namespace D2D1;
using namespace DirectX;
using namespace Microsoft::WRL;
using namespace Windows::Foundation;
using namespace Windows::Foundation::Collections;
using namespace Windows::UI::Core;
GraphRenderer::GraphRenderer() { }
void GraphRenderer::CreateDeviceIndependentResources() { DirectXBase::CreateDeviceIndependentResources();
}
void GraphRenderer::CreateDeviceResources() { DirectXBase::CreateDeviceResources();
}
Compile and test your application at this point. You should see the entire screen cleared to a light blue color.
void GraphRenderer::CreateWindowSizeDependentResources() { DirectXBase::CreateWindowSizeDependentResources();
}
void GraphRenderer::Update(float timeTotal, float timeDelta) { }
void GraphRenderer::PointerMoved(Windows::Foundation::Point point) {
// Allow the user to set the current pan value with the mouse or pointer m_pan.X += point.X;
m_pan.Y += point.Y;
}