How to fill a scrollview with equal grids dynamically?

Question

Guys, I’m trying to fill a grid divided into lines within a scrollview (to allow the user to view all content) with other grids. Each grid is within a line and contains the content of a schedule that I want to show. I want the programming list for a radio show to appear. The grid that shows each programming should be equal and contains an image and 3 textblocks. I used a grid because I wanted to divide it into columns.

The problem is that I have several, after all is a programming list. But I wanted some library that would help me make several copies of the grids to fill in with the programming that and the server download app. If I don’t do this my code will get giant and ugly.

My XAML is like this:

<ScrollViewer 
                        Grid.Row="2" 
                        Grid.RowSpan="5" 
                        ScrollViewer.VerticalScrollBarVisibility="Hidden" >
                        <Grid Name="grid_scroll_programacao_santa_ines" Grid.Row="2">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="90"/>
                                <RowDefinition Height="90"/>
                                <RowDefinition Height="90"/>
                                <RowDefinition Height="90"/>
                                <RowDefinition Height="90"/>

                            </Grid.RowDefinitions>
                            <Grid Name="grid_programacao_santa_ines"
                          Grid.Row="0">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <TextBlock Name="txtblock1"
                                   Text="06:00" 
                                   Foreground="#1A1F49"
                                   FontSize="25" 
                                   VerticalAlignment="Center"
                                   HorizontalAlignment="Center"
                                   Grid.Column="0"/>
                                <Image Name="image"
                               Source="/Imagens/SmallLogo.png" 
                               Grid.Column="1"/>
                                <TextBlock Name="txtBlock2"
                                   Text="Acorde e Recorde"
                                   Foreground="#1A1F49"
                                   FontSize="25"
                                   HorizontalAlignment="Center"
                                   VerticalAlignment="Center"
                                   Grid.Column="2"/>
                                <TextBlock Name="txtBlock3" 
                                   Text="Nome do Locutor"
                                   Foreground="#9B9B9B"
                                   FontSize="25"
                                   HorizontalAlignment="Center"
                                   VerticalAlignment="Bottom"
                                   Grid.Column="2"/>
                            </Grid>
                        </Grid>
                    </ScrollViewer>

Answer 1

If you search for this list from a bank and want to build the screen dynamically, you can build it by code.

Just with a stackpanel created on your screen, loop each item in the list and create a Grid (Grid grid grid = new Grid();), then Voce can set your Rows and Columns, also your children (grid.children.add(new Textblock()))

Example:

XAML:

<Window x:Class="WpfApp1.MainWindow"
    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:local="clr-namespace:WpfApp1"
    mc:Ignorable="d" Loaded="Window_Loaded"
    Title="MainWindow" Height="450" Width="800">
<StackPanel x:Name="stackpanel">

</StackPanel>

Class:

private void Window_Loaded(object sender, RoutedEventArgs e)
    {
        //instancia novo grid
        Grid grid = new Grid();

        //Definir as colunas ou linhas do grid
        grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(100) });
        grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(100) });

        //instancia nova label
        Label label = new Label()
        {
            Content = "Coluna da esquerda",
            VerticalAlignment = VerticalAlignment.Center,
            HorizontalAlignment = HorizontalAlignment.Center,                
        };

        // Define em qual coluna do grid a label ficara
        Grid.SetColumn(label, 0);

        //instancia nova label
        Label label2 = new Label()
        {
            Content = "Coluna da direita",
            VerticalAlignment = VerticalAlignment.Center,
            HorizontalAlignment = HorizontalAlignment.Center,
        };

        // Define em qual coluna do grid a label ficara
        Grid.SetColumn(label, 1);

        //Adiciona os labels ao grid
        grid.Children.Add(label);
        grid.Children.Add(label2);

        //Adiciona grid ao stackpanel criado no xaml
        stackpanel.Children.Add(grid);
    }

You can create your screen in the same way as in XAML, but with the advantage of being more dynamic, especially in your case.