xaml UI design with datatemplate - button not showing up - xaml

Question

I'm trying to design a windows phone 8 app where I need a listbox containing information. I'm using a data template to show my data. The datatemplate looks like this:
<DataTemplate x:Key="NewPortfolioHoldingTemplate">
<Grid Width="Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25*"/>
<ColumnDefinition Width="35*"/>
<ColumnDefinition Width="30*"/>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="5*"/>
</Grid.ColumnDefinitions>
<toolkit:PhoneTextBox x:Name="Ticker" Grid.Column="0" HorizontalAlignment="Left" Height="80" TextWrapping="Wrap" VerticalAlignment="Top" Width="Auto" Text="{Binding Ticker}" Hint="Ticker" FontSize="32" />
<toolkit:PhoneTextBox x:Name="Shares" Grid.Column="1" HorizontalAlignment="Left" Height="80" TextWrapping="Wrap" Text="{Binding Share}" VerticalAlignment="Top" Width="Auto" Hint="Shares" />
<toolkit:PhoneTextBox x:Name="Price" Grid.Column="2" HorizontalAlignment="Left" Height="80" TextWrapping="Wrap" VerticalAlignment="Top" Width="Auto" Hint="Price"/>
<Button x:Name="Add" Content="+" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Column="3" FontSize="32" />
<Button x:Name="Remove" Content="-" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Column="4" FontSize="32" />
</Grid>
</DataTemplate>
And I'm using this datatemplate like this:
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<TextBlock x:Name="NewPortNameBlock" Grid.Row="0" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Name" VerticalAlignment="Top" Margin="19,19,0,0" FontSize="24"/>
<TextBox x:Name="NewPortNameBox" Grid.Row="0" HorizontalAlignment="Left" TextWrapping="Wrap" Text="PortName" VerticalAlignment="Top" Margin="87,0,0,0" FontSize="24" Width="369"/>
<TextBlock x:Name="NewPortCashBlock" Grid.Row="1" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Cash" VerticalAlignment="Top" Margin="19,19,0,0" FontSize="24"/>
<TextBox x:Name="NewPortCashBox" Grid.Row="1" HorizontalAlignment="Left" TextWrapping="Wrap" Text="CashAmt" VerticalAlignment="Top" Margin="87,0,0,0" FontSize="24" Width="369"/>
<TextBlock x:Name="NewPortHoldingBlock" Grid.Row="2" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Holding" VerticalAlignment="Top" Margin="19,10,0,0" FontSize="24"/>
<ListBox x:Name="NewPortHoldingList" Grid.Row="2" Margin="10,47,10,10" ItemsSource="{Binding Holdings}" ItemTemplate="{StaticResource NewPortfolioHoldingTemplate}">
</ListBox>
</Grid>
Notice the template for ListBox. When I run it in the emulator(WVGA 512MB) I can't see any of the buttons for some reason. What did I do wrong? The template looks just fine when I'm editing it in Blend.

Answer 1

This is a side effect of the Style of the Button control. Within the ControlTemplate of the Button is a Grid with a Border control. The Border has a Margin set to the value of the "PhoneTouchTargetOverhang" resource. It does this to ensure that there is enough space to touch the button (harder to touch with a finger than it is with a mouse pointer). To remove this Margin, do the following
Right click on your ListBox (in design view) and select Edit Additional Templates -> Edit Item Template -> Edit Current. Now you will be editing your DataTemplate.
Now right click the Button, and select Edit Template -> Edit a copy... This will create a style resource for the button.
In the style, remove the Margin property (with the value noted above) from the Border control (it should be located under the VisualStateManager element).
The Border for your Button style should look like this
<Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}" CornerRadius="0" >
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>