如何減少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內的按鈕邊距？

回答

相關問題