#323 – Provide Space Around StackPanel Children Using Margin

By default, StackPanel provides no extra space around the child controls that it contains, but packs them tightly.

    <StackPanel>
        <Label Content="Gene Autry the singing cowboy" Background="Pink"/>
        <Button Content="I Like Gene" />
        <Label Content="Roy Rogers" Background="Aqua"/>
        <Button Content="I Like Roy Rogers Yes I Do"/>
        <Label Content="Spade Cooley had a sad story" Background="DodgerBlue"/>
    </StackPanel>


You can specify a margin that should be used around the outside of each control using the Margin property.

    <StackPanel>
        <Label Content="Gene Autry the singing cowboy" Background="Pink" Margin="5"/>
        <Button Content="I Like Gene" Margin="5"/>
        <Label Content="Roy Rogers" Background="Aqua" Margin="5"/>
        <Button Content="I Like Roy Rogers Yes I Do" Margin="5"/>
        <Label Content="Spade Cooley had a sad story" Background="DodgerBlue" Margin="5"/>
    </StackPanel>

In this example, we used a single value whenever we set the Margin property.  This causes the container to add the specified margin (in WPF units) along all four sides of the child control.

About these ads

About Sean
Software developer in the Twin Cities area, passionate about .NET technologies. Equally passionate about my own personal projects related to family history and preservation of family stories and photos.

3 Responses to #323 – Provide Space Around StackPanel Children Using Margin

  1. Is there a way to do this using styles so that you don’t have to repeat the margin value?

    • Sean says:

      Absolutely. That’s actually a good idea, because it moves that margin value into a single spot. Here’s the example re-written to use a style that just specifies the Margin:

          <Window.Resources>
              <Style x:Key="smallMargin" TargetType="FrameworkElement">
                  <Setter Property="Margin" Value="5"/>
              </Style>
          </Window.Resources>
      
          <StackPanel>
              <Label Content="Gene Autry the singing cowboy" Background="Pink" Style="{StaticResource smallMargin}"/>
              <Button Content="I Like Gene" Style="{StaticResource smallMargin}"/>
              <Label Content="Roy Rogers" Background="Aqua" Style="{StaticResource smallMargin}"/>
              <Button Content="I Like Roy Rogers Yes I Do" Style="{StaticResource smallMargin}"/>
              <Label Content="Spade Cooley had a sad story" Background="DodgerBlue" Style="{StaticResource smallMargin}"/>
          </StackPanel>
      
  2. Pingback: #429 – Child Element Properties that Affect Layout « 2,000 Things You Should Know About WPF

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 375 other followers

%d bloggers like this: