How to reduce margins on buttons inside WrapPanel in WP7? - silverlight

Question

I'm trying to make a 'palette' in WP7. Visually, I'm after a look similar to the keyboard (SIP) or the dialler. I'm trying to make the margins around the buttons smaller than what they are now.
I'm having a lot of trouble with doing this, however - I've tried setting different margin thicknesses both directly and by attaching a style, but can't seem to get the problem sorted.
Here's an image of what I've got at the moment (sorry I'm a new user so it's just a link):
http://i40.tinypic.com/bj8g9f.jpg
And here's the relevant XAML I'm using.
<phone:PhoneApplicationPage
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:tk="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
x:Class="Mathflow.MainPage"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<phone:PhoneApplicationPage.Resources>
<Style x:Key="PaletteObjectStyle" TargetType="Button">
<Setter Property="Background">
<Setter.Value>
<SolidColorBrush Color="#1F1F1F"/>
</Setter.Value>
</Setter>
<Setter Property="Margin" Value="0" />
<Setter Property="BorderThickness" Value="0" />
</Style>
<Style x:Key="PaletteObjectText" TargetType="TextBlock">
<Setter Property="Margin" Value="8" />
</Style>
</phone:PhoneApplicationPage.Resources>
<StackPanel x:Name="LayoutRoot" DataContext="">
<Canvas x:Name="FlowContainer" Height="500">
</Canvas>
<ItemsControl x:Name="Palette" DataContext="{Binding Source={StaticResource FunctionsSource}}" ItemsSource="{Binding FunctionCollection}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<tk:WrapPanel Orientation="Vertical" Height="200" ScrollViewer.VerticalScrollBarVisibility="Disabled" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Style="{Binding Source={StaticResource PaletteObjectStyle}}">
<TextBlock Text="{Binding Display}" Style="{Binding Source={StaticResource PaletteObjectText}}"/>
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</phone:PhoneApplicationPage>
Thanks very much! Any help would be greatly appreciated.

Answer 1

It appears that the WrapPanel applies a margin to the items it contains. There may be a way to retemplate it to override this, or (more simply) you could just set a negative margin on PaletteObjectStyle.
<Setter Property="Margin" Value="-6" />
You can also simplify your style bindings like this:
<Button Style="{StaticResource PaletteObjectStyle}">
<TextBlock Text="{Binding Display}" Style="{StaticResource PaletteObjectText}"/>

Answer 2

You can try setting Padding to 0. If that does not get you closer to what you need - just replace the entire Template of the button with your own ControlTemplate. You can extract the default template from the button using Blend. Just right click your button and select the option to edit template copy.

Answer 3

Personally I would not use a Button in this case if you are concerned about the Margins.
Instead use a Rectangle and Use the Gesture Lister to watch for the tap event (instead of a click) Only downside of this method is that you cannot use commanding from XAML but you could just launch the command in code if you require it.
See below: (Extract from http://bit.ly/lIleTe)
<Rectangle Fill="Orange" x:Name="rect">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener Tap="GestureListener_Tap" Hold="GestureListener_Hold" />
</toolkit:GestureService.GestureListener>