windev

all my wpdev/win8dev posts

Smart little helper to clean HTML based strings for [WPDEV] and [WIN8DEV]

I thought I would share this small little class I created to clean out HTML based strings into readable strings. The class is both usable for your Windows Phone app as well as your Windows 8 app.

If you use cloud based or internet data, often strings contain “–” or “–” instead of their intended letter, like you can see on this image:

htmlstringuncleaned

The method uses Regex to replace all the wrong signs and clean out all of the unwanted signs. You can also add more to that if you need to replace wrong letters.

class CleanHTML
    {      
        public static string RemoveEncoding(string text)
        {
            try
            {
                string temp="";

                temp = 
                    Regex.Replace
                    (text.
                    Replace("–", "-").
                    Replace(" ", " ").
                    Replace("’", "'").
                    Replace("&", "&").
                    Replace("&", "&").
                    Replace(""", """).
                    Replace("'", "'").
                    Replace("…", "...").
                    Replace("—", "—").
                    Replace("–", "-").
                    Replace("“", "“").
                    Replace("”", "”").
                    Replace("’", "'").
                    Replace(" ", " ").
                    Replace(">", ">").
                    Replace("”", """).
                    Replace("“", """).
                    Replace("&lt;", "<").
                    Replace("&#215;", "×").
                    Replace("&#8242;", "′").
                    Replace("&#8243;", "″").
                    Replace("&#8216;", "'"),
                    "<[^<>]+>", "");

                return temp;
            }
            catch
            {
                return "";
            }
        }

        }

As we created a class for this little helper, you can call it from everywhere within you app to clean out the string. Here is one example I am using:

 item.title = CleanHTML.RemoveEncoding(item.title);

After calling this method, your string is plain text:

Screenshot (17)

I hope this post will be helpful for some of you.

Happy coding!

Posted by msicc in Dev Stories, windev, 0 comments
WPDEV: smooth SplashScreen transition for your Windows Phone app

WPDEV: smooth SplashScreen transition for your Windows Phone app

Today I finished an update for one of my apps with adding a CustomControl as SplashScreen. I had to do it this way because my app is localized in English, German and Italian. Most annoying at this part was that there is no smooth transition between the SplashScreen and the MainPage. By the way, there is also no smooth transition with the “normal” SplashScreenImage.jpg that is included in all app templates of Visual Studio 2010.

I often use the transitions that are built into the Silverlight for Windows Phone Toolkit (download here or use the Nuget-installer of Visual Studio). These transitions can be modified and used for custom transitions. I will show you how to create a fade out effect for your custom SplashScreen control.

First we have to create a project. I called the sample SplashScreenTransition.

The first thing we have to do is to create two classes: CustomTransition.cs and SplashScreenTransition.cs.

Let´s have a look on the first class, CustomTransition.cs:

namespace SplashScreenTransition
{
    public class CustomTransition : ITransition

    {
        Storyboard storyboard;

        public CustomTransition(Storyboard sb)
        {
            storyboard = sb;
        }

        // these are used by the transition

        public void Begin()
        {
            storyboard.Begin();
        }

        public event EventHandler Completed
        {
            add
            {
                storyboard.Completed += value;
            }
            remove
            {
                storyboard.Completed -= value;
            }
        }

        // not used for SplashScreen, but needed to create the whole animation
        // if you don´t add these, you will not be able to build your project

        public void Stop()
        {
            storyboard.Stop();
        }

        public void Pause()
        {
            storyboard.Pause();
        }

        public void Resume()
        {
            storyboard.Resume();
        }

        public void SkipToFill()
        {
            storyboard.SkipToFill();
        }

        public void Seek(TimeSpan offset)
        {
            storyboard.SeekAlignedToLastTick(offset);
        }

        public void SeekAlignedToLastTick(TimeSpan offset)
        {
            storyboard.SeekAlignedToLastTick(offset);
        }

        public ClockState GetCurrentState()
        {
            return storyboard.GetCurrentState();
        }

        public TimeSpan GetCurrentTime()
        {
            return storyboard.GetCurrentTime();
        }
    }
}

As you can see, we create a new Storyboard which will hold our transition. We use the ITransition interface that comes with the Toolkit.

When I was creating my first custom ITransition, I was running into several issues. We are effectively using the Begin()-Method and the Eventhandler Completed. But we have to implement all other Methods to get this class working.

Now let´s have a look to our second class, SplashScreenTransition.cs:

namespace SplashScreenTransition
{
    public class SplashScreenTransition : TransitionElement
    {
        public override ITransition GetTransition(UIElement element)
        {
            Storyboard FadingStoryBoard = CreateStoryBoard(1.0, 0.0);
            Storyboard.SetTarget(FadingStoryBoard, element);
            return new CustomTransition(FadingStoryBoard);
        }

        private Storyboard CreateStoryBoard(double from, double to)
        {
            Storyboard result = new Storyboard();
            DoubleAnimation animation = new DoubleAnimation();
            animation.From = from;
            animation.To = to;
            Storyboard.SetTargetProperty(animation, 
                new PropertyPath(UIElement.OpacityProperty));
            result.Children.Add(animation);
            return result;
        }

    }
}

With the code above we are connecting the animation itself to an UI-Element. To get this working, we need to create a simple opacity fading Storyboard which we connect to an UIElement. We connect the Storyboard to the GetTransition-Method by overriding it. What we get is our CustomTransition.

Now the only thing we have to do is to display the animation, which gets a bit tricky.

Create a new User Control. I added a a TextBlock and an Image to the sample.

Important:

  • set the value of d:DesignHeight to 800 (to cover the whole screen)
  • put your Image/TextBlock into a Stackpanel and set the Background. If you do not, the Background will be transparent and your MainPage will be visible

To display the custom SplashScreen and its animation, we have to create a Popup and a BackgroundWorker:

  • declare the names of both in your PhoneApplicationPage:
public partial class MainPage : PhoneApplicationPage
    {
        // declaration of BackgroundWorker and Popup
        BackgroundWorker bgWorker;
        Popup SplashPopup;
  •  next step is to add a new Popup which holds our SplashScreen-UserControl and start our BackgroundWorker:
// Constructor
        public MainPage()
        {
            InitializeComponent();

            //calling Popup, using our UserControl

            SplashPopup = new Popup() { IsOpen = true, Child = new SplashScreenControl() };
            bgWorker = new BackgroundWorker();
            RunBackgroundWorker();
        }
  •  Last but not least we have to get our BackgroundWorker to do some work and display the transition:
private void RunBackgroundWorker()
        {
            bgWorker.DoWork += ((s, args) =>
            {
                Thread.Sleep(5000);
            });

            bgWorker.RunWorkerCompleted += ((s, args) =>
            {
                this.Dispatcher.BeginInvoke(() =>
                {
                    SplashScreenTransition SplashScreenTrans = new SplashScreenTransition();
                    ITransition transition = SplashScreenTrans.GetTransition(this.SplashPopup.Child);
                    transition.Completed += delegate { this.SplashPopup.IsOpen = false; };
                    transition.Begin();
                 }
            );
            });
            bgWorker.RunWorkerAsync();
        }

If you would display only the SplashPopup, you would only set IsOpen to false. But we want to get the Fading out effect, so we call a new SplashScreenTransition.  Then we connect our custom transition to ITransition of the Toolkit and let the transition begin.

Essential is the delegation of the Completed Eventhandler. If you do not set the IsOpen of SplashPopup to false, the Popup remains open. That would result in a non-responding app.

The result of the work done above will look like this:

I hope this article was helpful for creating a smooth transition of your SplashScreen.

Download the sample code here.

Posted by msicc in Dev Stories, windev, 0 comments
WPDEV: 2 tools that make localization of your Windows Phone apps easy

WPDEV: 2 tools that make localization of your Windows Phone apps easy

Today I want to show you two small tools that will help you to make localizing your apps easier.

 

Localizing in-app strings

The first tool I want you to know about is a tool called “AppTranslator”, made by Xda-Member singularity0821.

To provide the language settings, you need to name the strings in your app. I recommend to use format “x:name”, as sometimes without the “x:” your strings will not be accessible. Then you have to create a .resx file for your “neutral” language. You can find a good tutorial here at MSDN.

Once you have done this, you have to translate all strings and put them in a separate .resx file. Doing this manually in Visual Studio can really be an awful job. This is where the “AppTranslator” comes into the game.

apptranslator_1

As you can see it has a very clean UI. Everything you now have to do is to load your .resx file into the app and start to translate your app really fast:

apptranslator_2

You can save your work at every point, in the end you will get a ready to paste in .resx file.

You can download the tool here at xda.

 

Localizing app title

Ok, now you have localized your app content. But the app title will remain the one that you set in you “neutral language”.

To localize your app title, you have to generate resource-only DLLs. This could be very difficult if you are developing your apps with the VS 2010 Express. You simply can´t do it. An overview of how to do it manually and an explanation can be found here at MSDN.

No need to scream now, as also for this exists a tool from Patrick Getzmann, a German MVP.

AppTitleLocalizer

The tools uses Bing to translate your app title. You can edit all the strings also manually, if you want. Once you´re done, just hit “Save DLLs” and you are ready to integrate them into  your app.

The tool can be downloaded here.

I hope you will enjoy the tools as much as I do.

Posted by msicc in Dev Stories, windev, 3 comments

[WPDev] Add Multiline Text to a Resource File in Windows Phone

Today I had to solve the problem that I needed to add multiline text into my resource file. I did not find a Windows Phone specific solution, but enough hints to solve the problem.

Here is a short guide for you:

First I added a TextBlock control and formatted it in XAML with Linebreaks:

TextBlockLineBreaks

The result is a nicely formatted TextBlock:

TextBlockResultCorrect

Now I tried of course to copy and paste the string in my resource file, and got an ugly result:

ResourceCopyPasteTextBlockResult

As mentioned above, I found out enough hints to solve this problem. There are two ways to solve it:

  • The simple way is to add your text, and for each new line press “Shift+Enter”. The result looks like this in your resource file:

    cleanResource

    Please note that you have to click inside of the value field to display the whole content.

  • The second way is to edit the XML-File directly. To open the resource file in XML-mode, right click your resource file and choose “Open with..”. In the following menu choose XML (Text)-Editor. Locate your resource string. Also if it looks not nice in code, you have to format your entry like this:

    xmlResourceLinebreak

Both methods will result in a nicely formatted multiline TextBlock after building your app again.

I hope this short guide is helpful.

Posted by msicc in Dev Stories, windev, 0 comments

[WPDev] How-to create a tile without app title for Windows Phone

Every App has always a title on its dedicated tile for the Windows Phone start screen. But what if your tile icon contains already the title of your app?

Normally, you are setting the appearance of your app within the properties:

properties

If you have done this, your logo is displayed, but contains the title string. So how can we delete this?

In properties, you are not allowed to delete the name. You will face an error: “Title cannot be empty”.

You need to go to the Application Manifest and edit the XML manually. Go to solution explorer, and open the properties tree. With a double click on “WMAppManifest.xml” you will see the following Window:

wpappmanifest

To edit the title of the start screen, search for the section. Within this section, you will find a Title section, which contains the title of your app (as you have set within the properties). Now simply delete the title string.

TwTTile

If you now debug your application, you will see that your tile no longer displays the title.

I hope this short how-to will be helpful for you.

Posted by msicc in Dev Stories, windev, 1 comment
How to install the Windows Phone SDK 7.1.1 on W8CP (WPDev)

How to install the Windows Phone SDK 7.1.1 on W8CP (WPDev)

Screenshot (86)

This week Microsoft released the Windows Phone SDK 7.1.1 to us developers. If you are on Windows 7, you can hit the download  button and install the SDK, everything will go fine.

If you have used my tutorial on how to install the SDK on W8CP, things are a little different. You might face the following error message:

Screenshot (74)

The error says that the update is not applicable or is blocked by another condition on your computer (you can read more about that here). The Link to the KB-site does not offer anything helpful, so I played around to find a workaround.

Here is a my tutorial for installing the SDK in this case:

  • perform a “repair install” of the Windows Phone SDK 7.1.1
  • download the update
  • install the update, if no error shows up, everything will go fine
  • if you face the message again, abort the installation
  • download the update again
  • after second download, everything should go fine

I know this is a little bit confusing. In fact it was the only way for me to get the update installed. I tried several ways, and if a way did not work I restored the point before the repair install to get this tutorial done.

After the installation I also tried to open up my blog app on the 256 MB emulator. Of course I was curios whether my will start or not, luckily it did:

Screenshot (85)

So I hope with my little tutorial I was able to help you to get developing started with Windows 8 again. For my part I am happy, as I often code while I am at train, and in battery mode debugging on device does not work on W8CP.

Happy coding everyone!

Posted by msicc in Dev Stories, windev, 0 comments