How to make buttons inside a stackpanel expand to use up the whole space?

Question

I have a windows 8 C#- xaml app. I have a stack panel which has 6 stackpanels in it.. Each stack panel has 7 buttons. So the whole thing is 6x7 buttons forming a calendar. The main stackpanel is placed in a grid.

Now the buttons have no content set. In the code behind, the dates for these buttons is set as content.

My problem is, for different resolutions, the grids expand hence the stackpanel, but the buttons inside is smaller as to jus fit the content. I want the buttons to expand so as to fill up the whole stack panel. The height and width of the main grid, main stack panel within it, the sub stack panels and the buttons are set to Auto..

I have been trying to achieve this for a while. But in vain! Any suggestions?

EDIT:

There is a main grid which holds BackButtonGrid, CalendarGrid, NotesGrid and StatusGrid.

The CalendarGrid has a

1. MonthPanel(StackPanel) which has previous and next month buttons and month name.
2. DaysPanel(StackPanel ) which has 7 textblocks for Mon, Tue... Sun.
3. CalendarButton Grid which now holds all the 42 buttons.

4. 2 textboxes to show some values.

    <Grid Style="{StaticResource LayoutRootStyle}"> <Grid.RowDefinitions> <RowDefinition Height="140"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="120"/> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <!-- Back button and page title --> <Grid x:Name="BackButtonGrid" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" > <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/> <TextBlock x:Name="pageTitle" Grid.Column="1" Text="Calendar" Style="{StaticResource PageHeaderTextStyle}"/> </Grid> <Grid x:Name="CalendarGrid" Width="Auto" Height="Auto" Grid.Column="1" Grid.Row="1" VerticalAlignment="Stretch"> <Grid.Background> <ImageBrush ImageSource="Assets/Images/Background/img_bg_home.jpg"/> </Grid.Background> <Grid.RowDefinitions> <RowDefinition Height="3*"/> <RowDefinition Height="2*"/> <RowDefinition Height="7*"/> <RowDefinition Height="1*"/> <RowDefinition Height="2*"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <StackPanel x:Name="MonthPanel" Margin="85,54,38,453" Orientation="Horizontal"> <Button x:Name="prevMonth" Content="&lt;" HorizontalAlignment="Left" Height="45.681" VerticalAlignment="Top" Width="53.481" Foreground="#FF121212" Tapped="PrevMonth"/> <TextBlock x:Name="currMonth" HorizontalAlignment="Left" Height="24" TextWrapping="Wrap" VerticalAlignment="Top" Width="126" Foreground="#FF121212" FontSize="16" TextAlignment="Center"/> <Button x:Name="nextMonth" Content="&gt;" HorizontalAlignment="Left" Height="45.681" VerticalAlignment="Top" Width="53.481" Foreground="#FF121212" Tapped="NextMonth"/> </StackPanel> <StackPanel x:Name="DaysPanel" Orientation="Horizontal" Grid.Row="1"> <TextBlock x:Name="Day1" HorizontalAlignment="Left" Height="20" TextWrapping="Wrap" VerticalAlignment="Top" Width="54.305" TextAlignment="Center" Foreground="#FF121212"/> <TextBlock x:Name="Day2" HorizontalAlignment="Left" Height="20" TextWrapping="Wrap" VerticalAlignment="Top" Width="54.305" TextAlignment="Center" Foreground="#FF121212"/> <TextBlock x:Name="Day3" HorizontalAlignment="Left" Height="20" TextWrapping="Wrap" VerticalAlignment="Top" Width="54.305" TextAlignment="Center" Foreground="#FF121212"/> <TextBlock x:Name="Day4" HorizontalAlignment="Left" Height="20" TextWrapping="Wrap" VerticalAlignment="Top" Width="54.305" TextAlignment="Center" Foreground="#FF121212"/> <TextBlock x:Name="Day5" HorizontalAlignment="Left" Height="20" TextWrapping="Wrap" VerticalAlignment="Top" Width="54.305" TextAlignment="Center" Foreground="#FF121212"/> <TextBlock x:Name="Day6" HorizontalAlignment="Left" Height="20" TextWrapping="Wrap" VerticalAlignment="Top" Width="54.305" TextAlignment="Center" Foreground="#FF121212"/> <TextBlock x:Name="Day7" HorizontalAlignment="Left" Height="20" TextWrapping="Wrap" VerticalAlignment="Top" Width="54.305" TextAlignment="Center" Foreground="#FF121212"/> </StackPanel> <Grid x:Name="CalendarButtonGrid" Grid.Row="2" Width="Auto" Margin="0,0,-37,0" > <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="*"/> <RowDefinition Height="*"/> <RowDefinition Height="*"/> <RowDefinition Height="*"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Button x:Name="b00" Grid.Row="0" Grid.Column="0" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Stretch" Width="54.305" Foreground="#FF121212"/> <Button x:Name="b01" Grid.Row="0" Grid.Column="1" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Stretch" Width="54.305" Foreground="#FF121212"/> <Button x:Name="b02" Grid.Row="0" Grid.Column="2" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Stretch" Width="54.305" Foreground="#FF121212"/> <Button x:Name="b03" Grid.Row="0" Grid.Column="3" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Stretch" Width="54.305" Foreground="#FF121212"/> <Button x:Name="b04" Grid.Row="0" Grid.Column="4" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Stretch" Width="54.305" Foreground="#FF121212"/> <Button x:Name="b05" Grid.Row="0" Grid.Column="5" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Stretch" Width="54.305" Foreground="#FF121212"/> <Button x:Name="b06" Grid.Row="0" Grid.Column="6" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Stretch" Width="54.305" Foreground="#FF121212"/> <Button x:Name="b10" Grid.Row="1" Grid.Column="0" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/> <Button x:Name="b11" Grid.Row="1" Grid.Column="1" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/> <Button x:Name="b12" Grid.Row="1" Grid.Column="2" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/> <Button x:Name="b13" Grid.Row="1" Grid.Column="3" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/> <Button x:Name="b14" Grid.Row="1" Grid.Column="4" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/> <Button x:Name="b15" Grid.Row="1" Grid.Column="5" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/> <Button x:Name="b16" Grid.Row="1" Grid.Column="6" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/> <Button x:Name="b20" Grid.Row="2" Grid.Column="0" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/> <Button x:Name="b21" Grid.Row="2" Grid.Column="1" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/> <Button x:Name="b22" Grid.Row="2" Grid.Column="2" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/> <Button x:Name="b23" Grid.Row="2" Grid.Column="3" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/> <Button x:Name="b24" Grid.Row="2" Grid.Column="4" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/> <Button x:Name="b25" Grid.Row="2" Grid.Column="5" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/> <Button x:Name="b26" Grid.Row="2" Grid.Column="6" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/> <Button x:Name="b30" Grid.Row="3" Grid.Column="0" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/> <Button x:Name="b31" Grid.Row="3" Grid.Column="1" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/> <Button x:Name="b32" Grid.Row="3" Grid.Column="2" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/> <Button x:Name="b33" Grid.Row="3" Grid.Column="3" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/> <Button x:Name="b34" Grid.Row="3" Grid.Column="4" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/> <Button x:Name="b35" Grid.Row="3" Grid.Column="5" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/> <Button x:Name="b36" Grid.Row="3" Grid.Column="6" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/> <Button x:Name="b40" Grid.Row="4" Grid.Column="0" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/> <Button x:Name="b41" Grid.Row="4" Grid.Column="1" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/> <Button x:Name="b42" Grid.Row="4" Grid.Column="2" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/> <Button x:Name="b43" Grid.Row="4" Grid.Column="3" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/> <Button x:Name="b44" Grid.Row="4" Grid.Column="4" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/> <Button x:Name="b45" Grid.Row="4" Grid.Column="5" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/> <Button x:Name="b46" Grid.Row="4" Grid.Column="6" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/> <Button x:Name="b50" Grid.Row="5" Grid.Column="0" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/> <Button x:Name="b51" Grid.Row="5" Grid.Column="1" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/> <Button x:Name="b52" Grid.Row="5" Grid.Column="2" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/> <Button x:Name="b53" Grid.Row="5" Grid.Column="3" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/> <Button x:Name="b54" Grid.Row="5" Grid.Column="4" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/> <Button x:Name="b55" Grid.Row="5" Grid.Column="5" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/> <Button x:Name="b56" Grid.Row="5" Grid.Column="6" Content="" Click="OnClick" DoubleTapped="OnDoubleTapped" Holding="OnLongPress" HorizontalAlignment="Left" Height="47.91" VerticalAlignment="Top" Width="54.305" Foreground="#FF121212"/> </Grid> <TextBlock Grid.Row="3" x:Name="statusPreview" HorizontalAlignment="Left" Height="22" Margin="86,481,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="219"> <Run/> <LineBreak/> <Run/> </TextBlock> <TextBlock Grid.Row="4" x:Name="notesPreview" HorizontalAlignment="Left" Height="22" Margin="86,508,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="219"> <Run/> <LineBreak/> <Run/> </TextBlock> </Grid> <Grid x:Name="NotesGrid" HorizontalAlignment="Left" Height="553" Grid.Column="2" Grid.Row="1" VerticalAlignment="Top" Width="399"> </Grid> <Grid x:Name"StatusGrid" HorizontalAlignment="Left" Height="553" Grid.Column="3" Grid.Row="1" VerticalAlignment="Top" Width="339"> <Grid.Background> <ImageBrush ImageSource="Assets/Images/Background/img_bg_notes.jpg"/> </Grid.Background> </Grid> 

Answer 1

For a calendar, I would consider replacing your StackPanel with a Grid . Grid 's make it easy to stretch child controls. To accomplish this, create a 6x7 Grid and set both the height and width to * . This will cause them to evenly distribute the space within the parent container (even in the case of a resize). When you drop a button into each grid cell, it will automatically fill the entire space.

Grid 's are generally advisable when elements need to line up with each other. Use a StackPanel when you don't care if elements line up in a particular axis.

<Grid>
   <Grid.RowDefinitions>
      <RowDefinition Height="*" />
      <RowDefinition Height="*" />
      <RowDefinition Height="*" />
      <RowDefinition Height="*" />
      <RowDefinition Height="*" />
      <RowDefinition Height="*" />
      <RowDefinition Height="*" />
   </Grid.RowDefinitions>
   <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="*" />
   </Grid.ColumnDefinitions>
   <Button
      Grid.Column="0"
      Grid.Row="0"
      Content="Test"
      />
</Grid>