It’s great to see your app in the New Releases section of the Windows 8 Store, it means people can see it without searching for your app specifically. Then you see some of the apps that are also in the New Releases and you think “why?!”. Here are a few examples I found while browsing the New Releases on the Windows 8 Store. You’ll see what I mean.
Find a song and want to remember to download it later? Do you need a database that can only hold two strings? ‘Song Rememberer’ has got you covered. This app is quite pointless, why would you want such an apathetic, ugly app on you computer?
“This app use your device webcam as a Mirror to have a quick check of yourself and also to help you with your makeup” – App description
Why not indeed. I’ve seen several of these mirror apps. There must be a few good camera apps on the store. You don’t need an app that just uses your half-a-mega-pixel front camera as a mirror. And why is the only screenshot of the app somebody’s forehead and hair? What?
How to XAML? Such a simple and poorly implemented app, I don’t see why it’s on the Store. And the Start tile is this:
Aaah, Comic Sans! And that green! And it says the name of the app twice. And there is no background colour set for semantic zoom. Ooh, forget it.
And now my personal favourite:
Just a terrible looking app that makes me sad seeing it on an OS that has tried to promote good user interface and experience throughout it’s UI. Then this happens. It’s hilariously bad, it had me laughing for ages. Just a blank purple screen and some thoughtlessly-made player controls when you right click. And the creator has the audacity to charge £0.99 for it. Come on.
I know I’m having a jab at them. It is a bit annoying to have spent a long time on each detail of your own app when there are pieces like this on the Store. I appreciate not everyone knows the platform or the programming languages. These apps are a great example of starter projects to get going and learn how to code for Windows 8. By all means. Just please don’t submit them to the Store in this state, it’s not needed.
“Discover and create colour themes that can inspire any project with Kuler Touch. No matter what you’re creating, with Kuler Touch you can experiment quickly with colour variations and browse thousands of themes from the Adobe Kuler community.”
It’s been a lot of work recently to get it finished. I wanted it done before the bulk of coursework came my way. The main features:
- View thousands of themes from the Kuler community.
- Favourite the themes you love the most.
- Create your own themes or edit ones that others have made.
- Optimized for touch and Windows 8 – better than the Kuler website.
- Search and share themes with Windows 8 charms.
Please download, rate & review it, thanks!
It’s been a while now since I announced Kuler Touch and a lot of changes have been made so I thought it was time for an update. I’ve implemented almost all the features now. You can view all the highest rated, most popular and most recent themes and view random ones too. Comments appear if any have been posted and Windows search and share charms are also in there. You can search when the app isn’t running too which is quite useful. I’ve also implemented a favourites list so you can keep track of the themes you like.
I’m very happy with the app so far but it still needs quite a bit of polish. I’ve also incorporated a lot of animations using XAML storyboards. Storyboards are sections of code that allow your XAML UI elements to move around. They can be quite simple once you learn how to use them and can make your app look really fluid. Here’s an example of how to make a storyboard.
<Page.Resources> <Storyboard x:Name="commentEntrance"> <PopInThemeAnimation Storyboard.TargetName="commentGrid" SpeedRatio="0.20" FromVerticalOffset="100" FromHorizontalOffset="0"/> <DoubleAnimation Storyboard.TargetName="commentGrid" Storyboard.TargetProperty="Opacity" From="0.0" To="1.0" Duration="0:0:0.02"/> </Storyboard> </Page.Resources>
XAML storyboards are located in your page resources. You can also programmatically write them in C# if you want to do it that way, for example if you really need control over the animation at runtime. This code should work in Windows 8 and Windows Phone, I’m not sure about other platforms like WPF. The above code is for Kuler Touch’s comments. ‘PopInThemeAnimation’ is predefined to make an element slide in from an offset. Double Animations are really useful as they can change any number based property, like opacity or position, over time, and without hand-made key frames.
Storyboards are started using the C# command Begin(), for example ‘commentEntrance.Begin();’
A good way of having an element move around the screen is to use a translate transform and a double animation. For example:
<Grid.RenderTransform> <TranslateTransform x:Name="position"/> </Grid.RenderTransform>
The above will be nested into the element you want to move.
<Storyboard x:Name="menuMove"> <DoubleAnimation Storyboard.TargetName="position" Storyboard.TargetProperty="X" To="380" SpeedRatio="1.7"> <DoubleAnimation.EasingFunction> <QuadraticEase EasingMode="EaseInOut"/> </DoubleAnimation.EasingFunction> </DoubleAnimation> </Storybaord>
Then a storyboard is made. You can see the ‘To’ field is set to 380. This is the number of pixels I want to move the element by on the X axis. There is also an easing function nested in the animation element. This means the animation will accelerate at the start and decelerate to zero at the end. It makes the animation look more natural. There are quite a few different algorithms available to choose from, and the resulting animations are different. I suggest using one of the functions beginning with ‘q’ like quadratic or quartic ease. Use Intellisense to find them all.
One more thing you can do is add children transitions to your page. Adding an entrance transition can make UI elements appear into the app more fluidly and it’s really easy to implement.
<Grid.ChildrenTransitions> <TransitionCollection> <EntranceThemeTransition FromHorizontalOffset="80"/> </TransitionCollection> </Grid.ChildrenTransitions>
You can add this code to something like a grid and it will make all child elements inside transition in from the side. You can set custom offsets yourself. The animation will only play when the elements are created when the page is opened.
I hope this has been helpful. Check Intellisense for more animations and properties.
I’ve bought my first tablet! Last Saturday I ordered the Asus Vivo Tab TF810C from Amazon.co.uk and it arrived on Monday. I’ve been really excited about this specific tablet after some research into Windows 8 tablets last year. It was a difficult decision between this and the Microsoft Surface Pro. I chose the Vivo Tab because it it has a far longer battery life (Asus say up to 19 hours with the keyboard dock, we’ll see about that), and a bigger screen. While pricing hasn’t been announced in the UK for the Surface Pro yet, I’m pretty sure the Vivo Tab is also cheaper. There are no fans in the Vivo Tab too, and when it sits in the keyboard dock it can fold like a laptop and the screen can be at any angle, the Surface has only one position using the kickstand.
The tablet comes with the keyboard dock which has 2 USB ports and an additional battery. It also comes with a Wacom Digitiser pen and a nice case which doubles as a stand, which I really like. Unfortunately the case only holds the tablet on its own, not connected to the keyboard dock, I’ll have to get a proper bag for it. I have really enjoyed the Tab so far, the screen is great and Windows 8 runs well on it. The Intel Atom processor isn’t very powerful so the desktop is a bit slow, however the formally ‘Metro’ environment is very slick and runs great. We just need a bigger, better selection of apps in the Store now.
A great feature of Visual Studio is the remote debugger. It allows you to deploy your apps to another device over Wi-Fi, in debug mode, and use the app running on that hardware, but also pause the app in Visual Studio on your development machine to debug like you would normally. I’ve been able to run Kuler Touch and get a good look at how that runs using a touch screen. Speaking of Kuler Touch, I’ve made great progress and the app now loads comments, caches themes and stores your favourites locally. Still a while to go before it’s Store-ready I think. Anyway, I’m looking forward to seeing what this tablet is like to work on when I get back to university, should be good.
I really wanted to focus on UI for my next Windows 8 app. I’ve got the C# down quite well so I wanted to make a good looking app with XAML. I knew about Adobe Kuler from previous experience with the site and I thought what a great way to focus on UI with an app about colours. Adobe Kuler, for those who don’t know, is a website and API that lets users create and share colour swatches. These could be used for whatever, making themes for your own project or inspiration for a wallpaper etc.
My Windows 8 app plans to emulate the features of the website, letting you view the newest, most popular or random themes people in the community have created. You’ll be able to copy the hex colour or RGB values to use for your own. I’m hoping to have a colour editor in the app, so you can create your own themes or edit others, we’ll see how difficult that is to implement. I want it to have Windows 8 charm features like search and share too. Should be a fun project.
I’ve noticed recently a lot of apps in the Windows 8 Store have the default grey as their background/accent colours. It’s been annoying me looking at the Store and just seeing loads of grey. The colour helps differentiate your app from others and makes the app detail page look much more interesting. The only reason to have the default grey is if you don’t know how to change it or you actually think it is the right look for your app (hah). This is why I’m showing you the solution to the former:
Open your Visual Studio solution. In the ‘Package.appxmanifest’ file look for the Visual Assets page and here is ‘Background color’. Choose a hex value that suits your app. This value is also the background colour of transparent logos, the colour of the app tile in the Start menu teaser when you hover over the left corner of the screen, and the colour of the background in semantic view on the Start menu. I hope this helps get some diversity into the Store.
Woke up this morning to find the CAG app had failed certification, aaaw :( The tester at Microsoft stated that ‘The app bar, and/or Windows Settings charm appear to be advertising to our reviewers’ and this picture was provided. To be fair, it is a very good report, telling me exactly what was wrong. All very good. I’m not too happy with the actual reason it failed though. I have a link to the Windows Phone version of the app on the charms bar, just to increase awareness that this app is also available in that platform. Advertising a Windows Phone app, a Microsoft product, is against their rules?
It’s an annoying setback. I will re-release the app without the link to Microsoft’s site. I will also update to version 1.1. I hope they don’t take issue with my ‘Buy Microsoft Products Now’ app :P
Something I want to touch on is custom theme colours in Windows 8 apps. For the CAG app I restyled the app bar buttons, ListView item and slider colours. Most of the colours aren’t available in the properties of these controls. Strangely, you have to change them in the App.xaml page. Here’s an example:
<Application.Resources> <ResourceDictionary> <SolidColorBrush x:Key="ListViewItemSelectedBackgroundThemeBrush" Color="#bf7022"/> <SolidColorBrush x:Key="ListViewItemPointerOverBackgroundThemeBrush" Color="#3c3c3c"/> <SolidColorBrush x:Key="ListViewItemSelectedPointerOverBackgroundThemeBrush" Color="#bf7022"/> <SolidColorBrush x:Key="ListViewItemSelectedPointerOverBorderThemeBrush" Color="#FFEF8D2A"/> </ResourceDictionary> </Application.Resources>
Adding a SolidColorBrush to the Application Resources with the same key as an inbuilt brush will override it. This means you can change the colours of things that aren’t available in the controls properties. The above code changes the ListView’s colours, even specifically the colour of the selected item’s border when the mouse hovers over it.
I think you can put the code in a page xaml but putting it in the App.xaml means all the control’s colours change. This can be useful if you’re creating a colour scheme for your app. I found that you might also need to fiddle with colours in the properties box of the control too. I also found this page that has a full list of system brushes you can modify, very useful.
As you may know, Flashdeck for Windows 8 was supposed to in the Win8 Store before general availability, however I had a setback. Your account must be verified before any apps can be submitted for verification. When ever I tried to do this it gave me an error “We can’t connect to the service. Please try again later”. I have been onto Microsoft support about the issue and I can say they were very helpful and responses were quick (unlike other support services… EA I’m looking at you ಠ_ಠ ).
Apparently it was a known fault and was being fixed. It took them a few weeks (seems a long time to me) but it has finally been addressed and I can now submit apps to the Windows 8 Store. I have canceled the previous submission of Flashdeck as I wasn’t happy with the file system in-place. I believe I have found a solution and will try to implement it in the coming days but I have a lot of Uni work to do as well still.
We got our three words on Monday at the Three Thing Game auction. We had £500 of ’worhtless cash’ to bid on words but we never won anything and all our words were chosen randomly instead. We got Fighting, Toast and Party. An interesting combination, I can’t really say anything about the game yet as it’s a secret until the 24h developing session.
I also got into the Windows 8 Elite programme this week after submitting Flashdeck to the Win8 Store. I’m not too happy with the current state of the app but I needed it to be out of the way quick before TTG and coursework starts. I will work on updating it in my spare time. I’m really pleased to get into Elite as it will get me more opportunities with upcoming Microsoft products and events.
To wrap up, the 24 hour session is happening real soon and I hope I can get enough sleep and make it all the way to the end. Look out for more on the game soon but for now, prepare for TOAST