Silverlight 3: How to store PathGeometry in a resource library - silverlight-3.0

Question

I'm having isues trying to access a PathGeometry resource in a Resource Library in a silverlight 3 app
Ive created a resource file called Geo.xaml
in my app.xaml i link to this file
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Components/Resources/Geo.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
in my resource file i have the following line which has the geometry for a simple box
<PathGeometry x:Key="CloseCross">M0,0 L188,0 L188,161 L0,161 z</PathGeometry>
and then in my MainPage.xaml i have a path trying to use that resource
<Path Data="{StaticResource CloseCross}" Stretch="Fill" Margin="10,10,0,0" Width="100" Height="100" UseLayoutRounding="False" Fill="Red"/>
and in Blend 3 (RC) it all looks fine, the path takes on the geometry and displays fine, the problem is when i build it and view it in browser i get the following error
Attribute {StaticResource CloseCross} value is out of range. [Line: 8 Position: 14]
I discovered a semi work around but even that has issues, i can create a style for target type Path and use a setter to set the Data property of the Path
<Style x:Key="PathStyle1" TargetType="Path">
<Setter Property="Data" Value="M0,0 L188,0 L188,161 L0,161 z" />
</Style>
The problem with this is that when I apply that style, the geometry isnt displayed in blend, the path is there in the hierachy tree but is not visible on the canvas but when i build and view it in a browser, its all good...
can anyone help me understand why I cant seem to put path geometry in a resource file (or in fact anywhere)

Answer 1

One problem is that in Silverlight you cannot store Paths within the ResourceDictionary. I would put the Path coordinates within a string resource, and then use http://StringToPathGeometry.codeplex.com to create the paths.

Answer 2

It is actually possible to store a path in a ResourceDictionary, the trick being to store it as a string.
However, the issue with this is that you get no design time suport if you do this, although at run time, it looks great.
The workaround for getting design time support in SL 5 is to store the path as a string in a code file, then using binding to get to the path data. This is the only way to get your path to show up at design time.
For example, say you have a toolbar button and you want to use a path as it's icon:
<c1:C1ToolbarButton x:Name="SaveChanges">
<Path Margin="5"
Data="{Binding SaveIcon,
Source={StaticResource iconTheme}}"
Stretch="Uniform" />
</c1:C1ToolbarButton>
Now you have your path bound to a class which implements INotifyPropertyChanged:
//A class for storing Paths which are turned into icons.
public class IconTheme : INotifyPropertyChanged
{
private string _saveIcon =
"M10.280033,48.087753L10.280033,54.397381 50.810078,54.397381 50.810078,48.087753z M15.900046,6.4432963E-05L23.693047,6.4432963E-05 23.693047,15.900064 15.900046,15.900064z M3.4200456,0L10.280033,0 10.280033,19.019096 50.810078,19.019096 50.810078,0 58.300069,0C60.190087,0,61.730004,1.5399642,61.730004,3.4298871L61.730004,59.237114C61.730004,61.137043,60.190087,62.667,58.300069,62.667L3.4200456,62.667C1.53003,62.667,1.896733E-07,61.137043,0,59.237114L0,3.4298871C1.896733E-07,1.5399642,1.53003,0,3.4200456,0z";
public string SaveIcon
{
get { return this._saveIcon; }
set { this._saveIcon = value;
NotifyPropertyChanged("SaveIcon");
}
}
void NotifyPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
public event PropertyChangedEventHandler PropertyChanged;
}
Lastly, you need to create an instance of the class in your App.xaml file:
<Assets:IconTheme x:Key="iconTheme" />
Now you can bind to this anywhere in your app and see the path at design time. I would prefer to have the path in Xaml, but not being able to see it at design time can be a significant drawback. Furtheremore, if I wanted to customize the Icons at runtime, I could now do so in the IconTheme class and the changes would instantly show up in the app.