Lets’ say I want to add 25 buttons on my app. And I also want each button to have a large width so it’s as large as the screen and  I also want each button to have a sizable thickness. Obviosly, under these circumstances my buttons won’t fit to my screen. So, how can such an app be possible? In this example we will investigate that but first, let’s picture what I want from my app


This is quite easy and it doesn't require any binding. We need to create a ListBox and add all the buttons under this ListBox and it’s done.  I also added a button to make the ListBox visible / invisible. Here’s the XAML needed:


<phone:PhoneApplicationPage
    x:Class="ListofButtons.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <Button Content="Disappear List" HorizontalAlignment="Center" VerticalAlignment="Top" Click="Button_Click"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <ListBox Margin="0,0,0,10" Name="ButtonList" HorizontalContentAlignment="Stretch">
                <Button Content="Button 1" Width="446" Height="80" Background="#FF042359" Foreground="White"/>
                <Button Content="Button 2" Width="446" Height="80" Background="#FF042359" Foreground="White"/>
                <Button Content="Button 3" Width="446" Height="80" Background="#FF042359" Foreground="White"/>
                <Button Content="Button 4 " Width="446" Height="80" Background="#FF042359" Foreground="White"/>
                <Button Content="Button 5" Width="446" Height="80" Background="#FF042359" Foreground="White"/>
                <Button Content="Button 6" Width="446" Height="80" Background="#FF042359" Foreground="White"/>
                <Button Content="Button 7" Width="446" Height="80" Background="#FF042359" Foreground="White"/>
                <Button Content="Button 8" Width="446" Height="80" Background="#FF042359" Foreground="White"/>
                <Button Content="Button 9" Width="446" Height="80" Background="#FF042359" Foreground="White"/>
                <Button Content="Button 10" Width="446" Height="80" Background="#FF042359" Foreground="White"/>
                <Button Content="Button 11" Width="446" Height="80" Background="#FF042359" Foreground="White"/>
                <Button Content="Button 12" Width="446" Height="80" Background="#FF042359" Foreground="White"/>
                <Button Content="Button 13" Width="446" Height="80" Background="#FF042359" Foreground="White"/>
                <Button Content="Button 14" Width="446" Height="80" Background="#FF042359" Foreground="White"/>
                <Button Content="Button 15" Width="446" Height="80" Background="#FF042359" Foreground="White"/>
                <Button Content="Button 16" Width="446" Height="80" Background="#FF042359" Foreground="White"/>
                <Button Content="Button 17" Width="446" Height="80" Background="#FF042359" Foreground="White"/>
                <Button Content="Button 18" Width="446" Height="80" Background="#FF042359" Foreground="White"/>
                <Button Content="Button 19" Width="446" Height="80" Background="#FF042359" Foreground="White"/>
                <Button Content="Button 20" Width="446" Height="80" Background="#FF042359" Foreground="White"/>
                <Button Content="Button 21" Width="446" Height="80" Background="#FF042359" Foreground="White"/>
                <Button Content="Button 22" Width="446" Height="80" Background="#FF042359" Foreground="White"/>
                <Button Content="Button 23" Width="446" Height="80" Background="#FF042359" Foreground="White"/>
                <Button Content="Button 24" Width="446" Height="80" Background="#FF042359" Foreground="White"/>
                <Button Content="Button 25" Width="446" Height="80" Background="#FF042359" Foreground="White"/>
            </ListBox>
        </Grid>

        <!--Uncomment to see an alignment grid to help ensure your controls are
            aligned on common boundaries.  The image has a top margin of -32px to
            account for the System Tray. Set this to 0 (or remove the margin altogether)
            if the System Tray is hidden.

            Before shipping remove this XAML and the image itself.-->
        <!--<Image Source="/Assets/AlignmentGrid.png" VerticalAlignment="Top" Height="800" Width="480" Margin="0,-32,0,0" Grid.Row="0" Grid.RowSpan="2" IsHitTestVisible="False" />-->
    </Grid>

</phone:PhoneApplicationPage>


Here’s the C# section. This section pretty much only controls the ListBox.


    public partial class MainPage : PhoneApplicationPage
    {
        static int _buttonListVisiCounter = 0;
        // Constructor
        public MainPage()
        {
            InitializeComponent();

            // Sample code to localize the ApplicationBar
            //BuildLocalizedApplicationBar();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            if (_buttonListVisiCounter % 2 == 0)
            {
                ButtonList.Visibility = System.Windows.Visibility.Collapsed;
            }

            else
            {
                ButtonList.Visibility = System.Windows.Visibility.Visible;
            }

            _buttonListVisiCounter++;
        }
    }


 

And here’s the screen output