Cross-Platform Images in Xamarin.Forms Using SVGs

For the last four months, I’ve been working on a fast-paced Xamarin.Forms project where almost every image used has been an SVG shared between both the iOS and the Android platform apps. And it has been glorious! If an early UI design needed a few pixels shaved or added to an image we were using, no new images were needed, let alone a handful of pixel-density variations on it. It was just the few lines of code or XAML to change the rendered size. (In fact, I’ve extended our use to include stretchable buttons by adding 9-slice SVG support.) With SVGs, you use one tiny XML file to render the resulting image at any size or for any screen density. TL;DR Put SVGs in a PCL as an EmbeddedResource build action Use an SVG control (I recommend TwinTechsForms.NControl.SvgImageView, but there are other choices.) Add an SvgImageView to your C# or XAML UI the the right assembly and resource path Without SVG Images Images on iOS and Android are normally managed in slightly different ways regarding naming and location. For better or worse, Xamarin.Forms continues using these image conventions, making a detour from the focus on cross-platform sharing. On a normal… Continue reading

Explorations in Cross-Platform Assets: 9-Slice Stretchable SVGs in Xamarin.Forms Apps

There comes a time in cross-platform development where you inevitably long for a simpler mechanism for dealing with the deluge of image assets. You end up with three or more sizes of every single image with different names for every platform. At Twin, SVGs have risen to that challenge for us, and we use it everywhere we can with a custom variant of Paul Patarinski’s SvgImage control. After some minimal setup work to start using them, they render crisply at any size and resolution we throw at them. One place that SVG use has had shortcomings for us is when we needed backgrounds with varying sizes. We need a unique SVGs for each size we intend to use because you haven’t been able to selectively stretch an SVG like you could with 9-patch images on Android or StretchableImage/CreateResizableImage on iOS. In SVG terms, this appears to be called 9-slice support, and it is something we want to both use in our apps as well as make available to you. I recently took an experimental journey toward bringing 9-slice support to SVGs drawn in cross-platform Xamarin.Forms apps. Read the full 9-Slice SVG article over at Twin Technologies blog.

Giving CocosSharp v1.7.0.0-pre1 a Spin

If you didn’t see the announcement recently, the awesome people working on CocosSharp put out a new preview of CocosSharp v1.7 (v1.7.0.0-pre1). With it, comes a very cool new way of working with your game content, the ability to mix it with normal native Xamarin.iOS, Xamarin.Android, or Xamarin.Forms content. I wanted to poke at the last of those, because I’ve been buried in Xamarin.Forms code non-stop for quite a few months now. TL;DR: Getting the CocosSharp project templates working the the v1.7.0.0-pre1 packages takes a few extra steps: restoring the pre-release CocosSharp.Forms NuGet package on your shared and platform projects. Once you get things in place, though, you can do some amazing things by combining Xamarin.Forms content with your CocosSharp game content. If you want to just jump right into playing with the final code, the resulting solution is available in a GitHub repo. (I may continue to work on this repo, so if it ever looks too different, here is the exact commit to clone to get you to the end of this post.) CocosSharp Project Templates Add-in While we can spin up a new Xamarin.Forms project and add the CocosSharp bits, this also gives us a chance to… Continue reading

Xamarin.Forms: Switching TabbedPage Tabs Programmatically

Sometimes, your app uses tabs to separate different user activities. Sometimes, though, those activities aren’t completely independent. When that happens, you need an action in one tab to cause the user to switch to another tab. I’ll show you how to do that in code using Xamarin.Forms. In case you haven’t already started your tabs, we’ll start from the beginning. (Note: while the UI parts can be done quite well in XAML, this post will do it all in code.) First, Some Tabs Just in case you haven’t already made your Xamarin.Forms tab system, we’ll start there. This is as simple as using an instance of TabbedPage. Since we will want a little more control over things going forward, let’s create a subclass inheriting from it. public class MainTabbedPage : TabbedPage { public MainTabbedPage() { Children.Add(new somePage()); Children.Add(new someOtherPage()); } } You simply make this the MainPage in your App, now, and you get tabs. public class App : Application { public App() { MainPage = new MainTabbedPage(); } } If you run your app at this point, though, you’ll notice something fairly obvious missing from your tabs. No titles, no icons. In fact, on iOS, you can’t even tell… Continue reading

Abusing UIKit for Gaming in Xamarin.iOS, Part 3: Playing Sounds

This is the third in a [glacially-paced] series of Abusing UIKit blog posts giving some background on the development that want into producing Smudges, a simple game written entirely in Xamarin.iOS where fun shapes in various colors show up on the screen wherever a tap is detected. It was original created to give my two-year-old something fun to play while going tap-crazy on the screen. The game evolved from those “play-testing” sessions. If you have your own little ones and want something fun to distract them, Smudges is availabe on the App Store. At this point, I plan to continue adding features to it as I can. Let me know what you think about Smudges, or these blog posts, in the comments below or find @patridgedev on Twitter. Let There Be Noise! Playing sounds in your apps can make for some great user interactions. Of course, it can also be used for far more annoying uses. For Smudges, each time an icon is placed on the screen with a tap, a random sound is played from a set of noises originally generated via as3sfxr (think Atari-era synth sounds). As a disclaimer, this will only cover playing the random sound here… Continue reading