Loading Path control from string with Binding


I’ve been wrestling with this dang idea for a long time lately and I found the answer.. hopefully this will help many others… as it turns out i don’t think you can Bind path data to a string, however you can get it to work with this:

Loading Path Markup Syntax at Runtime

First a little background path markup syntax is the path data language used in XAML StreamGeometry and PathFigureCollections. However EVERY sample out there seems to be only using it from hard coded Xaml or by using resource XAML. But what if you want to save your images as part of your data say in a SQL database? Trying to Bind to this is not easy, in fact I am not sure that it can even be done!! Well as it turns out (after about 16 hrs on the search engines)  I came across the solution:

<Page
    x:Class="BlankAppFor_Scratch.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:BlankAppFor_Scratch"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid  x:Name="mainGrid"  
                   Background="{StaticResource ApplicationPageBackgroundThemeBrush}" >
    </Grid>
</Page>
using System.Globalization;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Markup;
using Windows.UI.Xaml.Navigation;
using Windows.UI.Xaml.Shapes;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

namespace BlankAppFor_Scratch
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {

            this.InitializeComponent();
            this.mainGrid.Children.Add(LoadPathMarkupSyntax(cloudData));

        }

        string cloudData = "F1 M 0,11.6925C 0,10.5225 0.424988,9.5275 1.27496,8.70752C 2.125,7.88751 3.14502,7.47751 4.33496,7.47751C 4.39502,7.47751 4.47998,7.48499 4.59003,7.5C 4.69995,7.51501 4.78754,7.52252 4.85248,7.52252C 4.78754,7.13751 4.75494,6.83749 4.75494,6.6225C 4.75494,4.7825 5.37994,3.21875 6.62994,1.93124C 7.87994,0.643738 9.38745,0 11.1525,0C 12.5925,0 13.8713,0.45752 14.9888,1.3725C 16.1062,2.28751 16.875,3.46002 17.295,4.89001C 17.685,4.83002 18.0049,4.79999 18.2549,4.79999C 19.85,4.79999 21.2062,5.33374 22.3237,6.40125C 23.4412,7.46875 24,8.77499 24,10.32C 24,11.865 23.4412,13.1713 22.3237,14.2388C 21.2062,15.3062 19.85,15.84 18.2549,15.84L 4.33496,15.84C 3.14502,15.84 2.125,15.4325 1.27496,14.6175C 0.424988,13.8025 0,12.8275 0,11.6925 Z ";

        public Windows.UI.Xaml.Shapes.Path LoadPathMarkupSyntax(string data) 
        {
            string pathXamlFormat = @"<Path xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation""
                    xmlns:x=""http://schemas.microsoft.com/winfx/2006/xaml""  Width=""100"" Height=""100"" Stretch=""Uniform"" UseLayoutRounding=""False"" Fill=""Green"" 
                    Data=""{0}"" />";
            return (Path)XamlReader.Load(string.Format(CultureInfo.InvariantCulture, pathXamlFormat, data).ToString());
        }

        /// <summary>
        /// Invoked when this page is about to be displayed in a Frame.
        /// </summary>
        /// <param name="e">Event data that describes how this page was reached.  The Parameter
        /// property is typically used to configure the page.</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {

        }
    }

}

And here is what it looks like (cropped down):

Here is the original stackverflow posting, and here is a site that you can get the cloud PathGeometry data as a XAML file. If your looking to convert images to Xaml or SVG I recommend Online-Convert.com.

Here is a short tutorial on how to make your own custom PathGeometry or SVG images.

1. make an image I like to use Power Point and Paint.Net. I use power point for it’s ability to work with shapes easily (like a full vector graphics program such as Inkscape) and that it has boolean operators, layers, and grouping.  Which allow you to do some really cool art very quickly.

Learn about making custom shapes with Powerpoint

Here is an example of what you can accomplish with 5 basic shapes:
2. Take a screen shot of your final results and past it into paint.net, Save as a png (or whatever you fancy).

3. Go to Online-Convert.com and upload your image, it will let you download your SVG.

4. Open your SVG in either a text editor like notepad or view source on your browser, copy and paste this into your XAML, and there you go.. you have the path data.

Here is one of my creations saying Hi:Robot

Advertisements

About Larry Louisiana

I'm a Microsoft Partner Consultant.
This entry was posted in Graphics, Programming, Touch, User Interface (UI), Windows 8 and tagged , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s