UWP ToggleButton refuses to give up its margin in a StackPanel

Question

I have a Page which contains a:

Background image
A StackPanel with a few ToggleButtons

The ToggleButtons are supposed to be positioned on exact positions (you can see the place where they suppose to overlay in the image below), which I try to achieve by setting the Margins of the ToggleButtons.

But, for some reason the ToggleButton have another Margin which I can't get rid of. I made it visible by setting the background color and border of the ToggleButton (Aquamarine).

How can I get rid of this "additional" margin?

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

Ideally do not provide code as an image, it makes it very difficult to try to reproduce your issue, I'm not going to retype your code. — Titian Cernicova-Dragomir, Sep 04 '17 at 19:46
try to set "Spacing" and/or "Padding". I always confuse between them till I try. I think Spacing for StackLayout is what you are looking for. If that doesn't help please create a sample project I might be able to take a look. Screenshot doesn't give as much as a sample code — Yuri S, Sep 04 '17 at 19:48
May be something from here will help: https://stackoverflow.com/questions/932510/how-do-i-space-out-the-child-elements-of-a-stackpanel and http://blogs.microsoft.co.il/eladkatz/2011/05/29/what-is-the-easiest-way-to-set-spacing-between-items-in-stackpanel/ — Yuri S, Sep 04 '17 at 20:00

score 2 · Accepted Answer · answered Sep 04 '17 at 23:17

2

ToggleButton has a default padding of "8,4". So just replace the Margin setter with

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

answered Sep 04 '17 at 23:17

Jessica

2,057
1
15
24

Thx! Will try tonight – bas Sep 05 '17 at 05:10

UWP ToggleButton refuses to give up its margin in a StackPanel

1 Answers1