2017-09-04 18 views
0

我有一個Page其中包含:UWP切換按鈕拒絕放棄它的利潤率在一個StackPanel

  • 背景圖像
  • 一個StackPanel有一些的ToggleButtons

的的ToggleButtons都應該定位在精確的位置(你可以看到他們想要在下面的圖像中重疊的位置),我試圖通過設置ToggleButtons的邊距來實現。

但是,由於某種原因,ToggleButton有另一個我不能擺脫的保證金。通過設置ToggleButton(海藍寶石)的背景顏色和邊框,我可以看到它。

我該如何擺脫這個「額外」邊距?

enter image description here

<Page 
    x:Class="ElectricalCars.MildHybridPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:Interactivity="using:Microsoft.Xaml.Interactivity" 
    xmlns:Core="using:Microsoft.Xaml.Interactions.Core" 
    xmlns:electricalCars="using:ElectricalCars" 
    mc:Ignorable="d" 
    d:DataContext="{d:DesignInstance electricalCars:MildHybridViewModel, d:IsDesignTimeCreatable=False}"> 

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 

     <Image Source="Images/MildHybridBackground.png"/> 
     <Grid> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="294"/> 
       <RowDefinition Height="*"/> 
      </Grid.RowDefinitions> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="9"/> 
       <ColumnDefinition Width="*"/> 
      </Grid.ColumnDefinitions> 

      <StackPanel 
       Grid.Row="1" Grid.Column="1" 
       Orientation="Vertical"> 

       <StackPanel.Resources> 
        <Style TargetType="ToggleButton"> 
         <Setter Property="Background" Value="Aquamarine"/> 
         <Setter Property="BorderBrush" Value="Black"/> 
         <Setter Property="BorderThickness" Value="1"/> 
         <Setter Property="MaxWidth" Value="120" /> 
         <Setter Property="MaxHeight" Value="25" /> 
         <Setter Property="Margin" Value="0,0" /> 
        </Style> 
       </StackPanel.Resources> 
       <ToggleButton 
        IsChecked="{Binding SignalButtonSelected}" 
        Command="{Binding SignalButtonCommand}"> 

        <Image Source="Images/SignalButtonUnselected.png"> 
         <Interactivity:Interaction.Behaviors> 
          <Core:DataTriggerBehavior Binding="{Binding SignalButtonSelected}" Value="true"> 
           <Core:ChangePropertyAction PropertyName="Source" Value="Images/SignalButtonSelected" /> 
          </Core:DataTriggerBehavior> 
         </Interactivity:Interaction.Behaviors> 
        </Image> 
       </ToggleButton> 
       <ToggleButton x:Name="ElectricMotoringButton" IsChecked="{Binding IsCheckedState}"> 
        <Image Source="Images/SignalButtonUnselected.png"> 
         <Interactivity:Interaction.Behaviors> 
          <Core:DataTriggerBehavior Binding="{Binding IsCheckedState}" Value="true"> 
           <Core:ChangePropertyAction PropertyName="Source" Value="Images/SignalButtonSelected" /> 
          </Core:DataTriggerBehavior> 
         </Interactivity:Interaction.Behaviors> 
        </Image> 
       </ToggleButton> 
      </StackPanel> 
     </Grid> 
    </Grid> 
</Page> 
+1

理想情況下,不提供代碼作爲圖像,它使得很難嘗試重現您的問題,我不打算重新鍵入您的代碼。 –

+0

嘗試設置「間距」和/或「填充」。直到我嘗試之前,我總是混淆他們。我認爲Spacing for StackLayout是你正在尋找的。如果這沒有幫助,請創建一個示例項目,我可能會看看。屏幕截圖沒有給出樣例代碼 –

+0

@YuriS複製/粘貼的XAML提供 – bas

回答

1

切換按鈕具有"8,4"默認填充。所以只需更換邊距設置器

<Setter Property="Padding" Value="0,0" /> 
+0

Thx!今晚會嘗試 – bas