ScrollViewer always visible ?

[pzelektron]

Hello.
This is simplified version of my app :

  <Grid RowDefinitions="40,*">
  	<Button Grid.Row="0">TEST</Button>
  	
  	<ScrollViewer
  		Grid.Row="1"
  		HorizontalScrollBarVisibility="Visible"
  		VerticalScrollBarVisibility="Disabled">

  		<ScrollViewer 
  			 HorizontalScrollBarVisibility="Disabled"
  			 VerticalScrollBarVisibility="Visible">
  		
  			<StackPanel Grid.Column="1">
  				<TextBlock FontSize="22" Width="1000" Height="100" Background="LightBlue">Block 1</TextBlock>
  				<TextBlock FontSize="22" Width="1000" Height="100">Block 2</TextBlock>
  				<TextBlock FontSize="22" Width="1000" Height="100" Background="LightBlue">Block 3</TextBlock>
  				<TextBlock FontSize="22" Width="1000" Height="100">Block 4</TextBlock>
  				<TextBlock FontSize="22" Width="1000" Height="100" Background="LightBlue">Block 5</TextBlock>					
  			</StackPanel>
  			
  		</ScrollViewer>
  	</ScrollViewer>
  	
  </Grid>	

Its produce window like this :

This window have two ScrollViewer first is visible on the bottom but second one appears when first is on most right.
It's looks like that :

And now the question it is possible to enforce second ScrollViewer to be always visible ?
Something like that :

[timunie]

Why do you have a SV inside a SV? That doesn't work correct for sure. Solition js to use one single SV and Horizontal and Vertical both set to Visible

[pzelektron]

Well this is only example. My real app is bit more complicated and looks like this :

		<ScrollViewer 
		Grid.Row="1"
		HorizontalScrollBarVisibility="Visible"
		VerticalScrollBarVisibility="Disabled">
			
			<Grid Grid.IsSharedSizeScope="True" 
				  RowDefinitions="Auto,Auto,*"
				  ColumnDefinitions="*">

				<Grid.Styles>
					<Style Selector="ListBoxItem">
						<Setter Property="Padding" Value="0" />
					</Style>
				</Grid.Styles>

				<Grid Grid.Row="0">
					<Grid.ColumnDefinitions>
						<ColumnDefinition SharedSizeGroup="ID_KONTRAHENTA" Width="Auto" />
						<ColumnDefinition Width="1"/>
						<ColumnDefinition SharedSizeGroup="NAZWA" Width="Auto" />
						<ColumnDefinition Width="1" />
						<ColumnDefinition SharedSizeGroup="ADRES" Width="Auto" />
						<ColumnDefinition Width="1" />
						<ColumnDefinition SharedSizeGroup="END" Width="Auto" />
					</Grid.ColumnDefinitions>


					<Button Content="ID_KONTRAHENTA" HorizontalAlignment="Stretch" Grid.Column="0" />
					<GridSplitter Grid.Column="1"/>
					<Button Content="NAZWA" HorizontalAlignment="Stretch" Grid.Column="2" />
					<GridSplitter Grid.Column="3"/>
					<Button Content="ADRES" HorizontalAlignment="Stretch" Grid.Column="4" />
					<GridSplitter Grid.Column="5"/>

				</Grid>
				
				<Separator Grid.Row="1"/>

				<ScrollViewer Grid.Row="2" 
							  HorizontalScrollBarVisibility="Disabled"
							  VerticalScrollBarVisibility="Visible">
					<ListBox 
						ItemsSource="{Binding ListaWierszyMW}" 
						SelectedItem="{Binding WybranyWiersz}" 
						Padding="0 0 19 19" 
						Background="White">
					
						<ListBox.Styles>
							<Style Selector="ListBoxItem:nth-child(even)">
								<Setter Property="Background" Value="White" />
							</Style>
							<Style Selector="ListBoxItem:nth-child(odd)">
								<Setter Property="Background" Value="#eee" />
							</Style>
						</ListBox.Styles>
	
						<ListBox.ItemTemplate>
							<DataTemplate DataType="models:Wiersz">
								<Grid Name="myGrid" 
									  RowDefinitions="Auto,Auto" 
									  ShowGridLines="False">

									<Grid.ColumnDefinitions>
										<ColumnDefinition SharedSizeGroup="ID_KONTRAHENTA" />
										<ColumnDefinition Width="1" />
										<ColumnDefinition SharedSizeGroup="NAZWA"/>
										<ColumnDefinition Width="1" />
										<ColumnDefinition SharedSizeGroup="ADRES"/>
										<ColumnDefinition Width="1" />
										<ColumnDefinition SharedSizeGroup="END" />
									</Grid.ColumnDefinitions>
								
									<TextBlock Grid.Column="0" Margin="6,2" Text="{Binding Wyniki[0]}" />
									<Rectangle Grid.Column="1" Fill="LightGray" Width="1"/>
									<TextBlock Grid.Column="2" Margin="6,2" Text="{Binding Wyniki[1]}" />
									<Rectangle Grid.Column="3" Fill="LightGray" Width="1"/>
									<TextBlock Grid.Column="4" Margin="6,2" Text="{Binding Wyniki[2]}" />
								
								</Grid>
							</DataTemplate>
						</ListBox.ItemTemplate>				
					</ListBox>
				</ScrollViewer>
				
			</Grid>

		</ScrollViewer>

It is important to slide left and right all components and den up and down only part of them. Thanks of that I always can see Grid containing headers. That's why I added two ScrollViewer 's.
And this hidden ScrollViewer drives me crazy.

[timunie]

The ListBox has it's own so you now have 3 SV... You really should reconsider your Layout. maybe add the items one by one to see the outcome. Also DevTools F12 may be helpful

[pzelektron]

Hi.
Thanks for reply. Confirm I can remove one ScrollViewer and ListBox scrolling up and down works fine. And I think this is only one good news. I think Rearrange my layout can't work. And this is why :

Panel (red) and ListBox (light blue) must move togged and I think this is only way. To achieve that I must put them in one ScrollViewer (purple). Scroll bar for this ScrollViewer is always on window bottom and this is what I need.
ListBox have built in scrool bar but this bar is on right most so if ListBox is bigger than window this bar is visible only when I set ScrollViewer on right most.
And this is how I understand this.
Now I se two solutions :

1. Use some style to enforce this ListBox up down bar (blue) to be always visible on window right.
2. I found component called ScrollBar but I don't figure out how to use it. Maybe if is way to disable ListBox ScrollViewer and connect this two components together to use ScrollBar to move ListBox something like this :

		<Grid RowDefinitions="10,*">
			<Grid Grid.Row="0" Background="Red"></Grid>
			<Grid ColumnDefinitions="*,10">
				<ScrollViewer Grid.Column="0">
					<Panel>						
					</Panel>
					<ListBox >
					</ListBox>
				</ScrollViewer>

				<ScrollBar Grid.Column="1">					
				</ScrollBar>
			</Grid>
		</Grid>

will be perfect too.

Can someone add some hint?

[timunie]

Maybe try to disable ScrollViewer on ListBox explicitly. Otherwise an idea would be to add the header to the ItemsSource with own DataTemplate. Or consider using an ItemsControl if no selection needed.

Note: DataGrid has header included.

[msneijders]

You could use a pattern like this, if you want to give a listbox a header that scrolls horizontally with the listbox -- (and you cannot use DataGrid)

<Grid Grid.IsSharedSizeScope="True" RowDefinitions="Auto, *">
    <ScrollViewer
        x:Name="header_scroller"
        HorizontalScrollBarVisibility="Hidden"
        VerticalScrollBarVisibility="Hidden">
<!-- your header content here, which should have the same width as your listboxitems -->
    </ScrollViewer>
    <ListBox
        x:Name="itemscontrol"
        Grid.Row="1"
        ItemsSource="{Binding YourSource}"
        ScrollViewer.HorizontalScrollBarVisibility="Auto">
    </ListBox>
</Grid>

And then update the header_scroller offset when ever ListBox is scrolling from code behind:

public partial class MainView : UserControl
{
   ScrollViewer listbox_scrollviewer;

    protected override void OnLoaded(RoutedEventArgs e)
    {
        base.OnLoaded(e);

        var listbox_scrollviewer = this.itemscontrol.Scroll as ScrollViewer;
        listbox_scrollviewer.ScrollChanged += (s, e) =>
        {
            header_scroller.Offset = listbox_scrollviewer.Offset;
        };
    }
}

Just for fun I copy pasted your header/listboxitems into it:

And now we created a miniature readonly datagrid! ;-p.

[pzelektron]

Wow @msneijders you are genius !
I wouldn't have figure this out in 1000 years many thanks. Create something like datagrid was goal.
I write this in code :

using Avalonia.Controls.Templates;
using Avalonia.Controls;
using Avalonia.Data;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using TabelaWynikow.Models;
using TabelaWynikow.Views;
using Avalonia;
using Avalonia.Controls.Primitives;
using Avalonia.Controls.Metadata;
using Avalonia.VisualTree;
using Avalonia.LogicalTree;
using Avalonia.Interactivity;
using System.Collections.ObjectModel;
using Avalonia.Media;
using System.Drawing;
using Avalonia.Media.TextFormatting;

namespace TabelaWynikow.ViewModels
{
    // This Attribute specifies that "PART_TabelaProstaPresenter" is a control, which must be present in the Control-Template
    //[TemplatePart("PART_TabelaProstaPresenter", typeof(ItemsControl))]
    public class TabelaProstaViewModel : UserControl
    {
        // this field holds a reference to the part in the control template that holds the rating stars
        //private ItemsControl? _TabelaProstaPresenter;

        public string Tabela
        {
            get { return GetValue(TabelaProperty); }
            set { SetValue(TabelaProperty, value); }
        }
        public string SQLWhere
        {
            get { return GetValue(SQLWhereProperty); }
            set { SetValue(SQLWhereProperty, value); }
        }
        public ObservableCollection<Wiersz> ListaWynikow
        {
            get { return GetValue(ListaWynikowProperty); }
            set { SetValue(ListaWynikowProperty, value); }
        }
        public ObservableCollection<Naglowek> ListaNaglowkow
        {
            get { return GetValue(ListaNaglowkowProperty); }
            set { SetValue(ListaNaglowkowProperty, value); }
        }

        public static readonly StyledProperty<string> TabelaProperty =
            AvaloniaProperty.Register<TabelaProstaViewModel, string>(
                nameof(Tabela)                  // Sets the name of the property
                                                //defaultValue: 5,                // The default value of this property
                                                //coerce: CoerceNumberOfStars // Ensures that we always have a valid number of stars
            );

        public static readonly StyledProperty<string> SQLWhereProperty =
            AvaloniaProperty.Register<TabelaProstaViewModel, string>(
                nameof(SQLWhere)                // Sets the name of the property
                                                //defaultValue: 5,                // The default value of this property
                                                //coerce: CoerceNumberOfStars // Ensures that we always have a valid number of stars
            );

        public static readonly StyledProperty<ObservableCollection<Naglowek>> ListaNaglowkowProperty =
            AvaloniaProperty.Register<TabelaProstaViewModel, ObservableCollection<Naglowek>>(
                nameof(ListaNaglowkow)          // Sets the name of the property
                                                //defaultValue: 5,                // The default value of this property
                                                //coerce: CoerceNumberOfStars // Ensures that we always have a valid number of stars
            );

        public static readonly StyledProperty<ObservableCollection<Wiersz>> ListaWynikowProperty =
            AvaloniaProperty.Register<TabelaProstaViewModel, ObservableCollection<Wiersz>>(
                nameof(ListaWynikow)          // Sets the name of the property
                                        //defaultValue: 5,                // The default value of this property
                                        //coerce: CoerceNumberOfStars // Ensures that we always have a valid number of stars
            );

        public Wiersz? ZaznaczonyWynik { get; set; }
        private readonly ScrollViewer header_scroller;
        private readonly ListBox listBox;

        public TabelaProstaViewModel()
        {
            ListaNaglowkow = [];
            ListaWynikow = [];
            header_scroller = new()
            {
                HorizontalScrollBarVisibility = ScrollBarVisibility.Hidden,
                VerticalScrollBarVisibility = ScrollBarVisibility.Hidden,
                //Name = nameof(header_scroller),
            };

            listBox = new()
            {
                Padding = Thickness.Parse("0,0,19,19"), // odstęp dla paska przewijania
                Background = Brush.Parse("White"), // biały kolor tła
                
            };
            listBox.Classes.Add("ListaWynikow");
            
            listBox.Loaded += (s, e) =>
            {
                if (listBox.Scroll is ScrollViewer listbox_scrollviewer)
                {
                    listbox_scrollviewer.ScrollChanged += (s, e) =>
                    {
                        header_scroller.Offset = listbox_scrollviewer.Offset;
                    };
                }
            };
            
            Loaded += (s, e) =>
            {
                GenerujTabele();
            };
        }

        private void DodajGridNaglowki(ObservableCollection<Naglowek> naglowki, Grid gridWszystko)
        {
            if (naglowki is null)
                throw new Exception("Brak nagłówków !");

            Grid gridNaglowki = new() { Margin = Thickness.Parse("0,0,19,0") };
            
            int kolumna = 0;
            foreach (var naglowek in naglowki)
            {
                gridNaglowki.ColumnDefinitions.Add(new ColumnDefinition() { 
                    Width = GridLength.Parse(naglowek.SZEROKOSC.ToString())//GridLength.Auto
                    , SharedSizeGroup = naglowek.KOLUMNA });
                gridNaglowki.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Parse("1") });

                // do naglowska
                Button button = new()
                {
                    Content = naglowek.TEKST_NAGLOWKA,
                    HorizontalAlignment = Avalonia.Layout.HorizontalAlignment.Stretch,
                    VerticalAlignment = Avalonia.Layout.VerticalAlignment.Stretch
                };
                Grid.SetColumn(button, kolumna);
                gridNaglowki.Children.Add(button);
                kolumna++;


                GridSplitter gs = new() { Width = 1};
                Grid.SetColumn(gs, kolumna);
                gridNaglowki.Children.Add(gs);
                kolumna++;
            }
            gridNaglowki.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Parse("0"), SharedSizeGroup = "END" });

            header_scroller.Content = gridNaglowki;

            Grid.SetRow(header_scroller, 0);
            gridWszystko.Children.Add(header_scroller);
        }

        private Grid DodajGridDaneTemplate(ObservableCollection<Naglowek> naglowki)
        {
            Grid gridDane = new()
            {
                RowDefinitions = new RowDefinitions("Auto,Auto"),
            };

            int kolumna = 0;
            int pole = 0;
            foreach (var naglowek in naglowki)
            {
                gridDane.ColumnDefinitions.Add(new ColumnDefinition() { SharedSizeGroup = naglowek.KOLUMNA });
                gridDane.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Parse("1") });

                var wyrownanie = Avalonia.Layout.HorizontalAlignment.Left;
                if(naglowek.WYROWNANIE.Length > 0)
                switch (naglowek.WYROWNANIE)
                {
                    case "P": wyrownanie = Avalonia.Layout.HorizontalAlignment.Right; break;
                    case "S": wyrownanie = Avalonia.Layout.HorizontalAlignment.Center; break;
                }

                // do danych
                TextBlock tb = new TextBlock() { 
                    [!TextBlock.TextProperty] = new Binding("Wyniki["+pole.ToString()+"]"),
                    HorizontalAlignment = wyrownanie,
                };
                Grid.SetColumn(tb, kolumna);
                gridDane.Children.Add(tb);

                pole++;
                kolumna++;

                Avalonia.Controls.Shapes.Rectangle rectangle = new() { Width = 1, Fill = Brushes.LightGray };
                Grid.SetColumn(rectangle, kolumna);
                gridDane.Children.Add(rectangle);
                kolumna++;
            }
            gridDane.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Parse("0"), SharedSizeGroup = "END" });

            return gridDane;
        }

        private void GenerujTabele()
        {  
            Grid gridWszystko = new() { RowDefinitions = new RowDefinitions("Auto,Auto,*"), ColumnDefinitions = new ColumnDefinitions("*") };
            Grid.SetIsSharedSizeScope(gridWszystko, true);
            this.Content = (gridWszystko);

            // dodanie wszystkiego do grid
            try
            {
               DodajGridNaglowki(ListaNaglowkow, gridWszystko);
            }
            catch { return; }

            // ListBox zawiera dane
            listBox.ItemsSource = ListaWynikow;
            listBox.SelectedItem = ZaznaczonyWynik;
            listBox.ItemTemplate = new FuncDataTemplate<Wiersz>((value, namescope) => DodajGridDaneTemplate(ListaNaglowkow));
            ScrollViewer.SetHorizontalScrollBarVisibility(listBox, ScrollBarVisibility.Auto);

            Avalonia.Controls.Shapes.Rectangle rectangle = new() { Height = 1 , Fill = Brushes.LightGray ,Margin = Thickness.Parse("1")};
            Grid.SetRow(rectangle, 1);
            gridWszystko.Children.Add(rectangle);

            Grid.SetRow(listBox, 2);
            gridWszystko.Children.Add(listBox);

        }
    }
}

Thanks of that I just must add to this control two ObservableCollection Naglowki :

    public class Naglowek
    {
        public long ID_TABELE_KOLUMNY_UZYTKOWNIK { get; set; } = 0;
        public string KOLUMNA { get; set; } = "";
        public string TEKST_NAGLOWKA { get; set; } = "";
        public int SZEROKOSC {  get; set; }
        public int KOLEJNOSC { get; set; } = 0;
        public string WYROWNANIE { get; set; } = "";
    }

And Wiersz

    public class Wiersz(int IloscKolumn)
    {
        public long ID_OBIEKTU { get; set; } = 0;
        public string[] Wyniki { get; set; } = new string[IloscKolumn];
    }

Maybe this code will be useful to someone else.
All data can be stored in SQL thanks of that I can save size and order. Its work pretty good. I put to this 10000 rows and works like charm.
And this how this look like :

Problem fully solved ! Thanks everyone for help.

[msneijders]

Good job!

Out of curiosity: what is your motivation for creating a datagrid this way, instead of for example using avalonia's DataGrid or TreeDataGrid?

I believe wieslawsoltes/DataBox motivation is mostly about performance considerations.

I am asking, because soon I will need a datagrid component for some upcoming features, and possibly I run into the same issues others had before me.

[pzelektron]

1."The DataGrid is in an additional Avalonia UI package." Someone can stop develop it and then I stuck in my project highly dependent on not supported DataGrid. And very important for me I plan use a lot of it. DataGrid depends on Avalonia version so here could be problem too. Everything is fine when I start project version matches but I can't figure out what be in future.
2. This is simple and depends on standard Avalonia components so its only get more functions.
3. I don't sure about performance probably DataGrid can be better than my spaghetti code although here I use fairly simple structure for row definition class Wiersz above. All data are stored in single array so I just get data from SQL and put them in this array. For now its only for presenting data so should be good enough. Each Wiersz have ID_OBIEKTU so I know row ID in database.
This is how I get data from database :
Naglowek.KOLUMNA must correspond to column name in database. Definition for ObservableCollection are stored in database so its speeds up adding new tables. Just add new view defection some rows to table and that's all i get new god looking table in my project. But this can be do for standard DataGrid too.

                int iloscKolumn = naglowki.Count();
                StringBuilder select = new();
                select.Append(@"SELECT ""ID_OBIEKTU"","); // ID_OBIEKTU is manadatory
                for (int i = 0; i < iloscKolumn - 1; i++)
                {
                    select.Append("\"" + naglowki[i].KOLUMNA + "\",");
                }
          
                select.Append("\"" + naglowki[iloscKolumn - 1].KOLUMNA + "\"");

                select.Append(" FROM \"" +  widok + "\" ");

                if (WHERE != null)
                {
                    select.Append(WHERE);
                }

                using NpgsqlCommand cmd = new();
                cmd.Connection = Wspolne.Konfiguracja.Connection;
                cmd.CommandText = select.ToString();
    
                using NpgsqlDataReader dr = cmd.ExecuteReader();
                try
                {
                    if (dr.HasRows)
                    {
                        while (dr.Read())
                        {
                            Wiersz wynik = new(iloscKolumn);

                            try
                            {
                                wynik.ID_OBIEKTU = long.Parse(dr["ID_OBIEKTU"].ToString()??"");
                            }
                            catch { }

                            for (int i = 0; i < iloscKolumn; i++) 
                            {
                                if(naglowki[i].UPRAWNIENIE.Length == 0)
                                {
                                    wynik.Wyniki[i] = dr[naglowki[i].KOLUMNA].ToString() ?? "";
                                }
                                else
                                {
                                    wynik.Wyniki[i] = Wspolne.Uprawnienia.PodajUprawnienieOdczytu(ID_FIRMY, ID_MAGAZYNU, TABELA, naglowki[i].UPRAWNIENIE, dr[naglowki[i].KOLUMNA].ToString() ?? "");
                                }                                
                            }

                            wiersze.Add(wynik);
                        }
                    }
                    dr.Close();
                }
                catch
                {
                    throw;
                }
                finally
                {
                    dr?.Close();
                }

5. I know how this work so if I figure out something crazy I be able to add missing features. Add picture, CheckBox , Button , replace specific TextBlock on TextBox, add custom data validation ... And if I don't know how to realize my crazy ideas I can always ask.

of course for sure will appear some problems and probably choosing some well known components turn out better choice , but this is problem for future me :)

I think that's all for now, quickly.

[timunie]

Well DataGrid is a separate package but provided by Avalonia itself. Reason for separating it is simply because it's huge and not everyone needs it 🫣

[timunie]

Why don't ppl directly share what the goal is?

If I knew it from the beginning, I'd have pointed you there: https://github.com/wieslawsoltes/DataBox

[msneijders]

Hear hear ;-).