locked
WP 8.1 App Grid has padding on the top and bottom...

    Question

  • I have a Grid as shown below.  When I have height/width set to auto on the row and column definitions.  As expected the buttons in each column are flush against each.  The height always has a padding at the top and bottom of the grid cell.  

    Why would it have padding a the top and bottom and how do I remove it since there is no padding attack property?

    Thanks,

       Michael

    Example below:

    		<Grid x:Name="ContentRoot"
    		      Grid.Row="1"
    		      Margin="19,9.833,53,0" HorizontalAlignment="Center" VerticalAlignment="Top">
    			<Grid.RowDefinitions>
    				<RowDefinition Height="Auto" />
    				<RowDefinition Height="Auto" />
    			</Grid.RowDefinitions>
    			<Grid.ColumnDefinitions>
    				<ColumnDefinition Width="Auto" />
    				<ColumnDefinition Width="Auto" />
    				<ColumnDefinition Width="Auto" />
    			</Grid.ColumnDefinitions>
    
    			<Button Content="1" />
    			<Button Grid.Column="1" Content="2" />
    			<Button Grid.Column="2" Content="3" />
    
    			<Button Grid.Row="1" Content="4" />
    			<Button Grid.Row="2"
    			        Grid.Column="1"
    			        Content="5" />
    			<Button Grid.Row="3"
    			        Grid.Column="2"
    			        Content="6" />
    		</Grid>


    Sunday, February 15, 2015 2:06 PM

Answers

  • The default control template of the buttons contains a Border element with a margin of 3 and that's what is causing these gaps.

    You could use negative margins (-3) for the Buttons to get rid of them:

     <Grid x:Name="ContentRoot"
            Grid.Row="1"
            Margin="19,9.833,53,0" HorizontalAlignment="Center" VerticalAlignment="Top">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition x:Name="c1" Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
    
                <Button x:Name="test" Content="1" Background="Red" Margin="-3" />
                <Button Grid.Column="1" Content="2" Margin="-3" />
                <Button Grid.Column="2" Content="3" Margin="-3" />
    
                <Button Grid.Row="1" Content="4" Margin="-3" />
                <Button Grid.Row="2"
               Grid.Column="1"
               Content="5" Margin="-3" />
                <Button Grid.Row="3"
               Grid.Column="2"
               Content="6" Margin="-3" />
            </Grid>
    

    Hope that helps.

    Please remember to mark helpful posts as answer to close your threads and then start a new thread if you have a new question.

    Sunday, February 15, 2015 3:18 PM
  • @Magnus Thanks, that worked.  I can't believe I completely missed that when I look at the buttons ControlTemplate!  However I would need to put a margin of -9.5 and not -3.  Here is the fix:

    		<Grid x:Name="ContentRoot"
    		      Grid.Row="1"
    		      Margin="19,9.833,53,0"
    		      HorizontalAlignment="Center"
    		      VerticalAlignment="Top">
    			<Grid.RowDefinitions>
    				<RowDefinition Height="Auto" />
    				<RowDefinition Height="Auto" />
    			</Grid.RowDefinitions>
    			<Grid.ColumnDefinitions>
    				<ColumnDefinition Width="Auto" />
    				<ColumnDefinition Width="Auto" />
    				<ColumnDefinition Width="Auto" />
    			</Grid.ColumnDefinitions>
    
    			<Button Margin="0,-9.5" Content="1" />
    			<Button Grid.Column="1"
    			        Margin="0,-9.5"
    			        Content="2" />
    			<Button Grid.Column="2"
    			        Margin="0,-9.5"
    			        Content="3" />
    
    			<Button Grid.Row="1"
    			        Margin="0,-9.5"
    			        Content="4" />
    			<Button Grid.Row="2"
    			        Grid.Column="1"
    			        Margin="0,-9.5"
    			        Content="5" />
    			<Button Grid.Row="3"
    			        Grid.Column="2"
    			        Margin="0,-9.5"
    			        Content="6" />
    		</Grid>

    Note,  I could have fixed it by changing the button ControlTemplate too, which I may end up doing.



    Sunday, February 15, 2015 4:49 PM

All replies

  • The margin in the grid is causing the gap.  I would remove it

    <Grid x:Name="ContentRoot"
    		      Grid.Row="1"
    		      Margin="19,9.833,53,0" HorizontalAlignment="Center" VerticalAlignment="Top">

    Sunday, February 15, 2015 3:05 PM
  • The default control template of the buttons contains a Border element with a margin of 3 and that's what is causing these gaps.

    You could use negative margins (-3) for the Buttons to get rid of them:

     <Grid x:Name="ContentRoot"
            Grid.Row="1"
            Margin="19,9.833,53,0" HorizontalAlignment="Center" VerticalAlignment="Top">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition x:Name="c1" Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
    
                <Button x:Name="test" Content="1" Background="Red" Margin="-3" />
                <Button Grid.Column="1" Content="2" Margin="-3" />
                <Button Grid.Column="2" Content="3" Margin="-3" />
    
                <Button Grid.Row="1" Content="4" Margin="-3" />
                <Button Grid.Row="2"
               Grid.Column="1"
               Content="5" Margin="-3" />
                <Button Grid.Row="3"
               Grid.Column="2"
               Content="6" Margin="-3" />
            </Grid>
    

    Hope that helps.

    Please remember to mark helpful posts as answer to close your threads and then start a new thread if you have a new question.

    Sunday, February 15, 2015 3:18 PM
  • @Magnus Thanks, that worked.  I can't believe I completely missed that when I look at the buttons ControlTemplate!  However I would need to put a margin of -9.5 and not -3.  Here is the fix:

    		<Grid x:Name="ContentRoot"
    		      Grid.Row="1"
    		      Margin="19,9.833,53,0"
    		      HorizontalAlignment="Center"
    		      VerticalAlignment="Top">
    			<Grid.RowDefinitions>
    				<RowDefinition Height="Auto" />
    				<RowDefinition Height="Auto" />
    			</Grid.RowDefinitions>
    			<Grid.ColumnDefinitions>
    				<ColumnDefinition Width="Auto" />
    				<ColumnDefinition Width="Auto" />
    				<ColumnDefinition Width="Auto" />
    			</Grid.ColumnDefinitions>
    
    			<Button Margin="0,-9.5" Content="1" />
    			<Button Grid.Column="1"
    			        Margin="0,-9.5"
    			        Content="2" />
    			<Button Grid.Column="2"
    			        Margin="0,-9.5"
    			        Content="3" />
    
    			<Button Grid.Row="1"
    			        Margin="0,-9.5"
    			        Content="4" />
    			<Button Grid.Row="2"
    			        Grid.Column="1"
    			        Margin="0,-9.5"
    			        Content="5" />
    			<Button Grid.Row="3"
    			        Grid.Column="2"
    			        Margin="0,-9.5"
    			        Content="6" />
    		</Grid>

    Note,  I could have fixed it by changing the button ControlTemplate too, which I may end up doing.



    Sunday, February 15, 2015 4:49 PM