WP7 - Control Template - unknown exception

Question

I'm working through a beginners book to wp7 and in one of the basic tutorials I have been encountering an unknown exception.

The control template defined in the Application resources (App.xaml) file is as below.

<Application.Resources>
    <Style x:Key="CustomButtonStyle" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Border Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                        <StackPanel>
                            <Image Source="Images\image.png" Width="200" Height="300" />
                            <TextBlock Text="{TemplateBinding Content}" TextAlignment="Center" />
                        </StackPanel>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Application.Resources>

Then when I create a button that uses this template eg

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Button x:Name="CustomButton" Width="250" Height="350" Content="Custom Button" Style="{StaticResource CustomButtonStyle}" />
        </Grid>

I always get a unknown exception raised. I've narrowed it down to the

Text="{TemplateBinding Content}"

Attribute in the control template but, why is there an exception? I have the content there, its in a string format. I don't know what else it may be? When I create a project I target Windows Phone 7.1. Was there some change I'm unaware of? Any help is appreciated. Thanks Joe

Answer 1

Change <TextBlock Text="{TemplateBinding Content}" TextAlignment="Center" /> to <ContentPresenter HorizontalAlignment="Center" />

           <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Border Width="{TemplateBinding Width}"
                            Height="{TemplateBinding Height}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                        <StackPanel>
                            <Image Width="200"
                                   Height="300"
                                   Source="Images\image.png" />
                            <ContentPresenter HorizontalAlignment="Center" />
                        </StackPanel>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

Some details about ContentControls