UWP ToggleButton 拒绝在 StackPanel 中放弃其边距

Question

我有一个Page，其中包含：

• 背景图片
• StackPanel 带有几个切换按钮

ToggleButtons 应该定位在确切的位置（您可以在下图中看到它们应该覆盖的位置），我尝试通过设置 ToggleButtons 的边距来实现。

但是，由于某种原因，ToggleButton 有另一个我无法摆脱的 Margin。我通过设置 ToggleButton (Aquamarine) 的背景颜色和边框使其可见。

我怎样才能摆脱这个“额外的”边距？

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

Answer 1

ToggleButton 的默认填充为"8,4"。所以只需将 Margin setter 替换为

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