code

Jan

2020

Visual Studio Extensions that will make your life easier in 2020

Xaml Styler

Download Link: https://marketplace.visualstudio.com/items?itemName=TeamXavalon.XAMLStyler

Project Site: https://github.com/Xavalon/XamlStyler

In Visual Studio 2019, writing XAML normally ends up in very long lines because it does not automatically break into new lines. In May 2019, I discovered the Xaml Styler extension by watching a video on Channel9.

Xaml Styler, even in its default configuration (which I did never change, tbh), breaks your XAML code into new lines once the count of properties of an element exceeds a certain amount. The extension as tons of options to configure, but for me, the default config always worked well.

Here is a sample:

As you can see, the XAML file is a by far more readable now. The different colors on the namespace declarations and closing tags are coming from the next extension on my list.

Viasfora

Download Link: https://marketplace.visualstudio.com/items?itemName=TomasRestrepo.Viasfora

Project Site: https://viasfora.com/

Viasfora aims to make your code more readable. To achieve that goal, it is coloring the code inside Visual Studio. The coloring makes it easy to see the scopes of each line, method, and even classes. As I discovered the extensions only a few weeks ago, I decided to not change any of the default settings, but it is already making my code a whole lot more readable.

Here is a sample from one of my recent projects:

VSColorOutput

Download Link: https://marketplace.visualstudio.com/items?itemName=MikeWard-AnnArbor.VSColorOutput

Project Site: https://mike-ward.net/vscoloroutput/

Ever tried to search the Visual Studio output for warnings, build errors or exceptions? Of course, you did. VSColorOutput makes this search a whole lot easier, as it colors errors/exceptions in red, warning in yellow, and build success messages in green. You see everything at a glance, which can save you a lot of time. See yourself:

CodeMaid

Download Link: https://marketplace.visualstudio.com/items?itemName=SteveCadwallader.CodeMaid

Project Site: http://www.codemaid.net/

CodeMaid is a very powerful extension. I am pretty sure I am not even using half of its functions, to be honest. I mainly use it to let it automatically sort my code files to my gusto and let it generate regions around it. This way, my code stays always organized in the same way and I don’t even have to think about it. I will explore more of the other functions moving onwards.

Here is a sample of a code file after CodeMaid cleaned it up (collapsed regions):

Material icons generator

Download Link: https://marketplace.visualstudio.com/items?itemName=nikainteristi.Materialiconsgenerator

Project Site: https://github.com/interisti/vs-material-icons-generator

If you are developing mobile applications, chances are high you will need one or another icon within an app. Material icons generator tries to replicate the popular function of Android Studio, with the added bonus of making it also available for iOS and UWP apps. The extension sadly does not create Image Asset folders and .json files for iOS correctly, but it creates the images so one can create an Image Asset from it in just a minute. The project does seem to be actively developed according to Github – I put this extension on the list because I did not find a better alternative until now.

Markdown Editor

Download Link: https://marketplace.visualstudio.com/items?itemName=MadsKristensen.MarkdownEditor

Project Site: https://github.com/madskristensen/MarkdownEditor

If you have to deal with Markdown files, there are floating quite a few helper apps around the web. I prefer to work on them in Visual Studio, as I use Markdown most of the time on Github when writing readme or similar files. Markdown Editor makes it easy to do so, and I almost immediately see the result in the preview window, which is quite helpful from time to time.

The extension is written by the creator of Markdig, which is by far your best option if you have to deal with Markdown in your C# app. Here is a sample:

Regex Editor

Download Link: https://marketplace.visualstudio.com/items?itemName=GeorgyLosenkov.RegexEditorLite

Project Site: N/A

If you ever had to deal with validations, chances are high you solved it with Regex. The extension provides a bunch of options that will help you to write Regex-patterns. You can test it in the same Window with some sample data to verify it will do what it is supposed to do. As a bonus, it is able to create a sample method of how to use it if you want to. Here is what it looks like with an email verification pattern:

Conclusion

To kick off my blogging year 2020, I showed you some of the most helpful Visual Studio extensions I installed on my machine. I hope some of you will find the one or another extension as helpful as I do. If you have an extension that is not on my list and you consider it useful, feel free to sound off in the comments or via social media.

Until the next post, happy coding!

Nov

2019

What I’ve learned from porting my first app ever to Android and iOS with Xamarin

What’s the app about?

The app is about fishing knots. It sounds boring for most people, but for me, this app made me becoming a developer. So I have a somewhat emotional connection to it. It was back in time when Windows Phone 7 was new and hot. A new shiny OS from Microsoft, but clearly lacking the loads of apps that were available on iOS and Android. At that time, I also managed to get my fishing license in Germany.

As I had a hard time to remember how to tie fishing knots, I searched the store and found… nothing. I got very angry over that fact, partly because it meant I had to use one of the static websites back then, but more about the fact that there was this damn app gap (WP7 users will remember). So I finally decided to learn how to write code for Windows Phone and wrote my first app ever after some heavy self-studying months.

Why porting it?

Writing code should soon become my favorite spare-time activity, effectively replacing fishing. And so the years went on, I made some more apps (most of them for Windows Phone) and also managed to become employed as a developer. After some time, S. Nadella became the CEO of Microsoft, and Windows for mobile phones was dead. So I had created all my “babies”, and they were now set to die as Windows Phone/Mobile did. Not accepting this, I started to create a plan to port my apps over to the remaining mobile platforms. After Facebook effectively killed my most successful app (UniShare – that’s another story, though), I stopped porting that one and started with Fishing Knots +.

Reading your own old code (may) hurt

When I was starting to analyze which parts of the code I could reuse, I was kind of shocked. Of course, I knew that there was this code that I wrote when I didn’t know it better, but I refused to have a look into it and refactor it (for obvious reasons from today’s perspective). I violated a lot of best practices back then, the most prominent ones

No MVVM
Repeating myself over and over again
Monster methods with more than 100 lines within

In the end, I did the only right thing and did not reuse any line of my old code.

Reusing the concept without reusing old code

After I took the right decision to not use my old codebase, I needed to abstract the concept from the old app and translate it into what I know now about best practices and MVVM. I did not immediately start with the implementation, however.

The first thing I did was drawing the concept on a piece of paper. I used a no-code language in that sketch and asked my family if they understand the idea behind the app (you could also ask your non-tech friends). This approach helped me to identify the top 3 features of the app:

Controllable animation of each knot
Easy-to-follow 3-step instructions for each knot
Read-Aloud function of the instructions

Having defined the so-called “Minimum Viable Product“, I was ready to think about the implementation(s).

The new implementation

Finding the right implementation isn’t always straight forward. The first thing I wrote was the custom control that powers the controllable animation behind the scenes. I wrote it out of the context in a separated solution as I packed it into a NuGet package after finishing. It turned out to be also the most complex part of the whole app. It uses a common API in Xamarin.Forms, and custom renderers for Android and iOS. I had to go that route because of performance reasons – which is one of the learnings I took away from the porting.

It was also clear that I will use the MVVM pattern in the new version. So I was setting up some basic things using my own Nuget packages that I wrote during working on other Xamarin based projects.

When it came to the overall structure of my app, I thought a Master/Detail implementation would be fine. However, somehow this never felt right, and so I turned to Shell (which was pretty new, so I tried to give it a shot). In the end, I went with a more custom approach. The app uses a TabbedPage with 3 tabs, one being for the animation, the second for the 3-Step tutorial, and last but not least the Settings/About page. The first two pages share a custom top-down menu implementation, bound to the same ViewModel for its items and selection.

More Xamarin.Forms features I learned (to love)

Xamarin and Xamarin.Forms itself are already powerful and have matured a lot since the time I used it to write my first Xamarin app for Telefonicá Germany. Here is a (high level) list of features I started to use:

Xamarin.Essentials – the one library that kickstarts your application – seriously!
Xamarin Forms Animations – polish the appearance of your app with some nice looking visual activity within the UI
Xamarin Forms Effects – easily modify/enhance existing controls without creating a full-blown custom renderer
Xamarin Forms VisualStateManager – makes it (sometimes) a whole lot easier to change the UI based on property changes
Xamarin.Forms Triggers – alternative approach to modify the UI based on property changes (but not limited to that)

The three musketeers

Because of Xamarin and Xamarin.Forms are such powerful tools, you may run into the situation of needing help/more information. My three musketeers to get missing information, implementation help or solution ideas:

Microsoft Xamarin Docs – the docs for Xamarin are pretty extensive and by reading them (even again), I often had one of these “gotcha!”- moments
Github – if the docs don’t help, Github may. Be it in the issues of Xamarin(.Forms) or studying the renderers, Github has been as helpful as the docs to me.
Web Search – chances are high that someone had similar problems/ideas solved and wrote a blog about it. I don’t blindly copy those solutions. First I read them, then I try to understand them and finally, I implement my own abstraction of them. This way, I am in a steady learning process.

Learn to understand native implementations

I guarantee you will run into a situation where the musketeers do not help when focusing solely on Xamarin. Accept the situation that Xamarin is sitting on top of the native code of others and does the heavy conversion for us. Learn to read Objective-C, Swift, Java and Kotlin code and translate it into C# code. Once you found possible solutions in one of the native samples, blog posts or docs, you will see that most of them are easy to translate into Xamarin code. Do not avoid this part of Xamarin development, it will help you in future, trust me.

Conclusion

Porting over my first app ever to Android and iOS has provided me not only a lot of fun but also huge learnings/practicing. Some of them are of behavioral nature, some of them are code implementations. This post is about the behavioral part – I will write about some of the implementations in my upcoming blog posts.

I hope you enjoyed reading this post. If you have questions or have similar experiences and want to discuss, feel free to leave a comment on this post or connect to me via social media.

Until the next post, happy coding!

Helpful links:

Mar

2014

AppAdditives PromotionalCodes, Telerik trial reminder and how to let users unlock the full app on Windows Phone

I love it when I am discovering new awesome stuff to provide a unique User Experience in my apps. AppAdditives by ExGrip LLC are the newest tools I felt in love with.

AppAdditives allow you to create promo images, social cards and widgets for your blog very easy. On top of that, they provide you an easy to use promotional code system. According to their developers, they are planning even more awesome stuff for Windows Phone and Windows 8 in future to help especially small and indie developers/publishers.

Let’s have a look on how easy it is to generate a list of promo codes after you registered for their free service.

To generate a new list of promo codes, click on Promotional Codes. Then choose which way you provide – one time codes (every code gets invalid after being redeemed) or multi-user codes (one code for up to 2 million users). I am using the one time codes for my app.

After you selected the proper time zone, you will get the following settings menu:

Enter all your settings, and click on start to generate your list of promo codes. It will look like this:

That’s all we need to do here. Let’s fire up Visual Studio. Open NuGet, and install the package ‘ExGrip.PromotionalCodes’ in your preferred way.

First, add your API Key and API Secret to your app (you will find them on the Promotional Codes page). Then, add the following code to your button/function that will redeem the code for your users:

            if (PromoCodeTextBox.Text != string.Empty)
            {
                PromotionCodeManager promoCodeMan = new PromotionCodeManager(AppAdditivesAPIKey, AppAdditivesAPISecret);

                bool validateCode = await promoCodeMan.ValidatePromoCode(this.PromoCodeTextBox.Text);

                if (validateCode == true)
                {
                    progress.Text = "redeeming promo code...";

                    bool redeemCode = await promoCodeMan.RedeemPromoCode(this.PromoCodeTextBox.Text);

                    if (redeemCode == true)
                    {
                        App.isPromoCodeActivated = true;

                        RedeemPromoCodeWindow.IsOpen = false;
                        redeemPromoCode.IsEnabled = false;

                        await RadMessageBox.ShowAsync("You unlocked the full version.", "Success", MessageBoxButtons.OK);

                    }
                    else
                    {
                        await RadMessageBox.ShowAsync("The code you entered cannot be redeemed. Please try again or contact our support.", "unable to redeem your code", MessageBoxButtons.OK);
                    }
                }
                else
                {
                    await RadMessageBox.ShowAsync("The code you entered is not valid. Please try again.", "invalid promo code", MessageBoxButtons.OK);
                }
            }
        }

As you can see, I am using an chain to first validate the promo code, and only if it is valid, I allow to redeem the code.

But that’s not all. I am using Telerik’s RadTrialApplicationReminder to manage the trial state of my app. Windows Phone does not allow to redeem a code for a full version via the Store, so we need to be creative here.

As I am not limiting features but use a time based trial, I can use three already existing properties of RadTrialApplicationReminder. If my Boolean is true after the app start, I am setting all periods to 9999 days and skip all further reminders:

                if (isPromoCodeActivated == true)
                {
                    trialReminder.FreePeriod = TimeSpan.FromDays(9999);
                    trialReminder.OccurrencePeriod = TimeSpan.FromDays(9999);
                    trialReminder.AllowedTrialPeriod = TimeSpan.FromDays(9999);
                    trialReminder.AreFurtherRemindersSkipped = true;
                }

This way, I can easily provide this clearly missing features by using Promotional Codes from AppAdditives. The only thing I need to do is to tell users to only download the trial version of my app and give them a promo code.

Additional hint: If you have users that switch devices, they are not able to redeem the code again. Just tell that to your users, they will be either asking you for another code – or buy your app, anyways.

As always, I hope this post is helpful for some of you.

Happy coding, everyone!

Dec

2013

Xamarin: Resources of an Android app project

As I mentioned already in my first blog post about Xamarin, Android has a different project structure – even if you use Xamarin.

A very important part of this structure are resources. We have different kind of resources in an Android app:

Icons & Images
Layout (XML files)
Values (string resource files)

Let’s start with Icons & Images.

As you can see in the solution window, there is a folder called ‘Resources’. Here you will put all kind of resources, like images, icons, layouts and so on.

The corresponding class for images in Android is called ‘drawable’, that holds a reference to’ Icon.png’. The project structure is based on that, that’s why the resources folder has all images inside the folder ‘drawable’. As Android has various screen sizes, you may have a folder for structure like ‘drawable’, ‘drawable-hdpi, ‘drawable-ldpi’ and so on. Android scales your image resources to match the screen automatically if you do not define alternate layouts.

To make your files available in your app, you need to set the Build Action to ‘Android Resource’:

Let’s have a look to the Layout files:

Layout files are XML files that contain the UI of a page, control or a view. You can use these XML files for example to define items of a ListView or simply the application page. Every new project has a ‘Main.axml’ file.

There are two ways to create a layout. The first one is using the visual designer:

This works for basic layouts like adding the button above. Also, if you don’t know the properties of a control you added, you will be able to add it here to get started.

If you are familiar with writing your UI in code (like XAML) and want to do so in your Android app, just click the ‘Source’ tab at the bottom in the visual designer. You will see something like this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:id="@+id/myButton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello" />
</LinearLayout>

If you want to add and modify a control, but don’t know how the properties are, this page has a list of all controls, which are called ‘widgets’ in Android. That’s also the corresponding namespace: android.widget.

Like in an Windows Phone app, you also have a string resource file in Android projects. This file is once again a XML file, but with a different structure:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="hello">Hello World, Click Me!</string>
<string name="app_name">gettingstarted</string>
</resources>

All strings need to be declared inside the <resources> tag. The definition is always like <string name=”yourstringname”>stringcontent</string>. Empty strings are not supported and will throw an error at building your project.

Let’s have a look on how we can work with our resources, based on our gettingstarted project. We have the following code inside our MainActivity class:

int count = 1;

		protected override void OnCreate (Bundle bundle)
		{
			base.OnCreate (bundle);

			// Set our view from the "main" layout resource
			SetContentView (Resource.Layout.Main);

			// Get our button from the layout resource,
			// and attach an event to it
			Button button = FindViewById<Button> (Resource.Id.myButton);
			button.Text = GetString (Resource.String.hello);

			button.Click += delegate {
				button.Text = string.Format ("{0} clicks!", count++);
			};
		}

As you can see, the we are defining our view from our Layout file ‘Main.axml’ by using the SetContentView() method. The file is added to our resources list as Layout with the name we defined.

Our MainActivity does not know that we have a button inside our layout. To make the button visible to our MainActivity, we need to reference it. This is done by declaring a Button instance and using the FindViewById<T>(ResourceName) method.

If you have not given your button a name, now is the right time to do so. In our example the button has the name “myButton”. The syntax is very important, make sure you add “@+id/” to the name.

android:id="@+id/myButton"

Now our button is visible to our MainActivity code page and can be accessed. The sample project references the button content in the Layout file:

android:text="@string/hello"

After referencing our button, we could also use the following code to get the button content from the resource file:

button.Text = GetString (Resource.String.hello);

Whenever your want to get a string from the resource file in an Activity, the GetString() method is used.

I hope this post helps you to understand how resources are used in an Android app and how to handle it a Xamarin project.

Happy coding everyone!

Xaml Styler

Viasfora

VSColorOutput

CodeMaid

Material icons generator

Markdown Editor

Regex Editor

Conclusion

Until the next post, happy coding!

What’s the app about?

Why porting it?

Reading your own old code (may) hurt

Reusing the concept without reusing old code

The new implementation

More Xamarin.Forms features I learned (to love)

The three musketeers

Learn to understand native implementations

Conclusion

Until the next post, happy coding!

Helpful links:

Recent Posts

Tags