So, last night I couldn't sleep, thus I got up, turned on my trusty Dell and sunk my teeth into something I had ben putting off: Replacing the Microsoft Ad Control in my UWP apps which do ads.
I sort of knew what I wanted.
While it looks like the ad SDK component, it has a different intention; I will NOT make advertising revenue from these (boo), but it will point existing customers to my other products (yay!).
- Minimal change to the apps workings and licensing (1-1 swap). I don't want to have to go back and re-create and re-think the revenue models.
- I want it to rotate through my own ads.
- Should be able to click an ad to see more/go to the store.
- Stand alone: I want it to be possible to copy it from one app directly into another and have it still work without reliance on the rest of the app being a certain way.
- No database or other configuring: some apps use SQLite, others plain text or JSON, some none of the above. This needs to work completely independent of that configuration
- fast, lightweight so as to keep the UI snappy (of course, the existing MS Ad Control was not fast or reliable, so my bar here is fairly low).
After 60-90 minutes of sleep deprived work, this is how far I got:
First; the XAML. I don't expect you to be copying all this from here, as it is incomplete and you can't see it all anyway.
Secondly, the code behind. There isn't much but you can see some of the code to load in the ads automatically.
This is how it looks. Note the progress bar (shows how long each ad will be displayed for before rotation) and the start of a clickable interface to go forwards and backwards through the ads.
What's happening here?
Well, like I said above I don't want to have to ship XML/JSON/Text/SQL configuration of the ads or maintaining them could get messy. I want each app to look or what ad is available and rotate them.
To do this made a folder for the images (InHouseAdImages) and in it I dump as many images of the right size/aspect ratio as I want it to display. By naming the files the store ID of the app it represents, I can easily open it when clicked!
It loads each image into an ObservableCollection and acquires a full size image, a thumbnail (placeholder), and a link (from the file name).
The XAML is effectively a 3 row grid as follows:
- Header message for ad control.
- Ad rotator.
- Remove ads (purchase) button.
In the middle row, is a standard UWP FlipView with a WinToolkit ImageEx in it. On top of that is he manual ad select and a progress indicator at the bottom.
The indicator is actually just a 30 second animation from 1-30. This means there is no timer behind it and it's much smoother.
What am I happy about?
- I love that I can just dump images into the directory with the correct name and the app controls the rest without input.
- The animations are smooth by using standard controls (FlipView and transition animation on the ProgressBar)
- I can just drop this into any of my apps and it will replace the existing Microsoft ad control.
What's missing/broken?
- The 'ads' are just solid colours at the moment. Red, Green and Blue to make the animations obvious.
- The collection doesn't save it's 'Current', it just rotates.
- I hacked much of the MVVM in an effort to avoid cross-contamination with the resto of my app structure, but it needs a significant clean up.
- The manual ad select is very wrong, but it's there. The title row isn't respecting the aspect ratio of the other controls, making it stretch it's width.
Future enhancements?
Well, just one. It would be better again if the ads were just hosted somewhere and the app would automatically pull down the latest ones rather than needing to be shipped with the deployable package itself. Not a big deal, yet.
Also I am considering opening it up to other devs. Kind of an ad-share, if you like.
Overall, I'm pretty happy with the progress so far and looking forward to cleaning it up.
Update
Here is the semi-finished product with the fixes added.
Top comments (0)