Silverlight custom controls

I've been having fun playing around with the new Silverlight alpha. There are some interesting gotchas I've run into today building custom controls.

1. Build setup isn't quite perfect. You can run into parser errors if the build settings aren't set up correctly. I manually edited the .csproj file as a workaround (see below).

2. Keep it simple. Adding custom properties that are based off of non-base-CLR types seems to make the parser grumpy. So for the time being I'm sticking to strings and ints and doubles.

3. Dave's controls are a good starting point, they're worth a look.

Steps to create a SampleControl with a Text property

Create a new control
File->New Project->Silverlight Project
Right click on solution explorer and choose "add new item"
Pick "Silverlight User Control", call it "SampleControl"

Create a text property
Open up SampleControl.xaml.cs (nested under SampleControl.xaml)
Add the following property

private string _text;
public string Text {
get {
return _text;
}
set {
_text = value;
}
}

Consume the control from Page.xaml
Open up Page.xaml to add the SampleControl.xaml to your page
Add the lines in red, changing as appropriate for your project name.

<Canvas x:Name="parentCanvas"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="Page_Loaded"
x:Class="SilverlightProject1.Page;assembly=ClientBin/SilverlightProject1.dll"
xmlns:sample="clr-namespace:SilverlightProject1;assembly=ClientBin/silverlightProject1.dll"
Width="640"
Height="480"
Background="White"
>
<sample:SampleControl Text="woo">
</sample:SampleControl>
</Canvas>

Fixup the project file
Now start up notepad and edit SilverlightProject.csproj (you can get there quickly this way)

The important thing seems to be to make sure that the SampleControl.xaml is included as a SilverlightPage with a custom tool (CompileXaml) AND an EmbeddedResource. I can't tell if order makes a difference, but it was a little finicky. The lines in RED should be what you need to add.

Have a quick look for any other references to SampleControl.xaml in the csproj file and remove them.

<Project ToolsVersion="3.5" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
<PropertyGroup>
<Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>
<Platform Condition=" '$(Platform)' == '' ">AnyCPU</Platform>
<ProductVersion>9.0.20404</ProductVersion>
<SchemaVersion>2.0</SchemaVersion>
<ProjectGuid>{0720306D-2E96-4BBF-8115-77F2FF69F12B}</ProjectGuid>
<ProjectTypeGuids>{A1591282-1198-4647-A2B1-27E5FF5F6F3B};{fae04ec0-301f-11d3-bf4b-00c04f79efbc}</ProjectTypeGuids>
<OutputType>Library</OutputType>
<AppDesignerFolder>Properties</AppDesignerFolder>
<RootNamespace>SilverlightProject1</RootNamespace>
<AssemblyName>SilverlightProject1</AssemblyName>
<TargetFrameworkVersion>v3.5</TargetFrameworkVersion>
</PropertyGroup>
<PropertyGroup Condition=" '$(Configuration)$(Platform)' == 'DebugAnyCPU' ">
<DebugSymbols>true</DebugSymbols>
<DebugType>full</DebugType>
<Optimize>false</Optimize>
<OutputPath>ClientBin\</OutputPath>
<DefineConstants>DEBUG;TRACE</DefineConstants>
<NoStdLib>true</NoStdLib>
<NoConfig>true</NoConfig>
<ErrorReport>prompt</ErrorReport>
<WarningLevel>4</WarningLevel>
</PropertyGroup>
<PropertyGroup Condition=" '$(Configuration)$(Platform)' == 'ReleaseAnyCPU' ">
<DebugType>pdbonly</DebugType>
<Optimize>true</Optimize>
<OutputPath>ClientBin\</OutputPath>
<DefineConstants>TRACE</DefineConstants>
<NoStdLib>true</NoStdLib>
<NoConfig>true</NoConfig>
<ErrorReport>prompt</ErrorReport>
<WarningLevel>4</WarningLevel>
</PropertyGroup>
<ItemGroup>
<Reference Include="agclr" />
<Reference Include="mscorlib" />
<Reference Include="system" />
<Reference Include="System.Core" />
<Reference Include="system.Xml.core" />
<Reference Include="system.silverlight" />
</ItemGroup>
<ItemGroup>
<Compile Include="Page.xaml.cs">
<DependentUpon>Page.xaml</DependentUpon>
</Compile>
<Compile Include="Properties\AssemblyInfo.cs" />
<Compile Include="SampleControl.xaml.cs">
<DependentUpon>SampleControl.xaml</DependentUpon>
</Compile>
</ItemGroup>
<ItemGroup>
<EmbeddedResource Include="SampleControl.xaml">
</EmbeddedResource>
</ItemGroup>
<ItemGroup>
<SilverlightPage Include="Page.xaml">
<Generator>MSBuild:CompileXaml</Generator>
</SilverlightPage>
<SilverlightPage Include="SampleControl.xaml">
<Generator>MSBuild:CompileXaml</Generator>
</SilverlightPage>
</ItemGroup>

<ItemGroup>
<None Include="TestPage.html" />
<None Include="TestPage.html.js">
<DependentUpon>TestPage.html</DependentUpon>
</None>
<None Include="Silverlight.js" />
</ItemGroup>
<Import Project="$(MSBuildExtensionsPath)\Microsoft\VisualStudio\v9.0\Silverlight\Microsoft.Silverlight.Csharp.targets" />
<!-- To modify your build process, add your task inside one of the targets below and uncomment it.
Other similar extension points exist, see Microsoft.Common.targets.
<Target Name="BeforeBuild">
</Target>
<Target Name="AfterBuild">
</Target>
-->
<ProjectExtensions>
<VisualStudio>
<FlavorProperties GUID="{A1591282-1198-4647-A2B1-27E5FF5F6F3B}">
<WebProjectProperties />
</FlavorProperties>
</VisualStudio>
</ProjectExtensions>
</Project>