How to fill a scrollview with the same grids dynamically?

1

Well, I'm trying to fill a grid divided into rows inside a scrollview (to allow the user to view all content) with other grids. Each grid is inside a row and contains the contents of a schedule I want to show. I want the program list of a radio program to appear. The grid that shows each schedule should be the same and contains one image and 3 textblocks. I used a grid because I wanted to split it into columns.

The problem is that I have several, after all it's a programming list. But I wanted some library that would help me make multiple copies of the grids to fill with the programming that is the low server app. If I do not do this my code will become gigantic and ugly.

My XAML looks 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>
    
asked by anonymous 14.09.2015 / 21:04

1 answer

1

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

With only one stackpanel created on your screen, loop through each item in the list and create a Grid (Grid grid = new Grid), then you can define your rows and columns, .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.

    
18.07.2018 / 15:19