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

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

Answer 3

如果您担心边距，我个人不会在这种情况下使用Button。

而是使用矩形并使用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>

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

3 个答案: