Как уменьшить поля на кнопках внутри WrapPanel в WP7?

Question

Я пытаюсь создать «палитру» в WP7. Визуально я после взгляда похож на клавиатуру (SIP) или звонилку. Я пытаюсь сделать поля вокруг кнопок меньше, чем сейчас.

Однако у меня много проблем с этим - я пытался установить различные значения толщины полей как напрямую, так и путем добавления стиля, но не могу решить проблему.

Вот изображение того, что у меня есть в данный момент (извините, я новый пользователь, так что это просто ссылка):

http://i40.tinypic.com/bj8g9f.jpg

А вот соответствующий XAML, который я использую.

<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>

Большое спасибо! Любая помощь будет принята с благодарностью.

Answer 1

Похоже, что WrapPanel применяет поле к элементам, которые оно содержит. Может быть способ пересобрать его, чтобы переопределить это, или (проще) вы можете просто установить отрицательное поле на PaletteObjectStyle.

<Setter Property="Margin" Value="-6" />

Вы также можете упростить привязки своего стиля следующим образом:

<Button Style="{StaticResource PaletteObjectStyle}"> 
<TextBlock Text="{Binding Display}" Style="{StaticResource PaletteObjectText}"/> 

Answer 2

Лично я бы не стал использовать кнопку в этом случае, если вы беспокоитесь о марже.

Вместо этого используйте Rectangle и используйте Gesture Lister для отслеживания события касания (вместо щелчка). Единственным недостатком этого метода является то, что вы не можете использовать команды из XAML, но вы можете просто запустить команду в коде, если вам это нужно .

См. Ниже: (выдержка из http://bit.ly/lIleTe)

<Rectangle Fill="Orange" x:Name="rect">
<toolkit:GestureService.GestureListener>
    <toolkit:GestureListener  Tap="GestureListener_Tap" Hold="GestureListener_Hold"  />
</toolkit:GestureService.GestureListener>

Answer 3

Вы можете попробовать установить Padding в 0. Если это не приблизит вас к тому, что вам нужно - просто замените весь шаблон кнопки на свой собственный ControlTemplate.Вы можете извлечь шаблон по умолчанию из кнопки, используя Blend.Просто щелкните правой кнопкой мыши и выберите опцию для редактирования копии шаблона.