如何减少WP7中WrapPanel内的按钮边距？

我正在尝试在WP7中创建一个“调色板”。在视觉上，我看起来类似于键盘（SIP）或拨号器。 我试图让按钮周围的边距比现在小。如何减少WP7中WrapPanel内的按钮边距？

但是我这样做很麻烦 - 但我试过直接设置不同的页边距厚度，并附上一个样式，但似乎无法排序。

这里是什么，我在此刻得到的图像（对不起，我是一个新用户，以便它只是一个链接）：

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>

非常感谢！任何帮助将不胜感激。

来源

2011-11-16 Fabian Tamp

这里没有问题。另外，您当前的用户界面出了什么问题？ –

我假设他的意思是让矩形周围的边缘变小。 –

谢谢！ xyzzer是正确的，只是试图使边距更小。据此编辑。 –

看来WrapPanel会为其包含的项目应用一个边距。可能有办法重新设定它来覆盖这个，或者（更简单地）你可以在PaletteObjectStyle上设置负边距。

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

您也可以简化你的风格的绑定是这样的：

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

来源

2011-11-16 13:40:26

现货！工作了一个魅力，感谢。 –

您可以尝试将填充设置为0.如果这不能让您更接近您所需的内容 - 只需使用您自己的ControlTemplate替换该按钮的整个模板即可。您可以使用Blend从按钮中提取默认模板。只需右键单击您的按钮并选择编辑模板副本的选项。

来源

2011-11-16 04:37:17

个人而言，我不会用一个按钮在这种情况下，如果你所关心的边距。

改为使用矩形并使用手势列表器观察点击事件（而不是点击）此方法的唯一缺点是不能使用来自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>

来源

2011-11-16 14:45:21 Darkside

感谢您对GestureListener的建议，我会着重于这个:) –

请注意，GestureListener应被视为已弃用（请参阅http://www.jeff.wilcox.name/2011/11/nov2011phonetoolkit/）。 Silverilght 4中的所有UIElements（Mango/v7.1所基于的）都有一个“Tap”事件，您应该使用这个事件来处理这种情况。 –

如何减少WP7中WrapPanel内的按钮边距？

回答

相关问题