question

EmonHaque-1485 avatar image
0 Votes"
EmonHaque-1485 asked EmonHaque-1485 commented

How to use SharedSizeGroup properly and fix scrolling issue in SharedSizeScope?

As I was searching on the web to solve the alignment/size problem of my application, I found some articles suggesting SharedSizeGroup and it actually takes up as much space as is required by the contents of columns and solves my problem BUT I've some scrolling issue in the ListBox with this. The structure in my view is: it's a StackPanel for title, two Grid for header and footers and a ListBox for entries. Similar to this:

 <Grid Grid.IsSharedSizeScope="True" Margin="20">
     <Grid.RowDefinitions>
         <RowDefinition Height="Auto"/>
         <RowDefinition Height="Auto"/>
         <RowDefinition />
         <RowDefinition Height="Auto"/>
     </Grid.RowDefinitions>
     <StackPanel HorizontalAlignment="Center">
         <TextBlock Text="Title" />
         <TextBlock Text="Subtitle"/>
         <TextBlock Text="Period"/>
     </StackPanel>
     <Grid Grid.Row="1" Name="Header">
         <Grid.ColumnDefinitions>
             <ColumnDefinition SharedSizeGroup="c1"/>
             <ColumnDefinition />
             <ColumnDefinition SharedSizeGroup="c3"/>
             <ColumnDefinition SharedSizeGroup="c4"/>
             <ColumnDefinition SharedSizeGroup="c5"/>
         </Grid.ColumnDefinitions>
         <TextBlock Text="Date"/>
         <TextBlock Grid.Column="1" Text="Particulars" />
         <TextBlock Grid.Column="2" Text="Debit" />
         <TextBlock Grid.Column="3" Text="Credit" />
         <TextBlock Grid.Column="4" Text="Balance" />
     </Grid>
     <ListBox Grid.Row="2" 
              ItemsSource="{Binding Entries}"
              HorizontalContentAlignment="Stretch">
         <ListBox.ItemTemplate>
             <DataTemplate>
                 <Grid>
                     <Grid.ColumnDefinitions>
                         <ColumnDefinition SharedSizeGroup="c1"/>
                         <ColumnDefinition />
                         <ColumnDefinition SharedSizeGroup="c3"/>
                         <ColumnDefinition SharedSizeGroup="c4"/>
                         <ColumnDefinition SharedSizeGroup="c5"/>
                     </Grid.ColumnDefinitions>
                     <TextBlock Text="{Binding Date}"/>
                     <TextBlock Grid.Column="1" Text="{Binding Particulars}" />
                     <TextBlock Grid.Column="2" Text="{Binding Debit}" />
                     <TextBlock Grid.Column="3" Text="{Binding Credit}" />
                     <TextBlock Grid.Column="4" Text="{Binding Balance}" />
                 </Grid>
             </DataTemplate>
         </ListBox.ItemTemplate>
     </ListBox>
     <Grid Grid.Row="3" Name="Footer">
         <Grid.ColumnDefinitions>
             <ColumnDefinition SharedSizeGroup="c1"/>
             <ColumnDefinition />
             <ColumnDefinition SharedSizeGroup="c3"/>
             <ColumnDefinition SharedSizeGroup="c4"/>
             <ColumnDefinition SharedSizeGroup="c5"/>
         </Grid.ColumnDefinitions>
         <TextBlock Text="Total"/>
         <TextBlock Grid.Column="2" Text="XXXXX" />
         <TextBlock Grid.Column="3" Text="XXXXX" />
     </Grid>
 </Grid>

and I've used SharedSizeGroup wherever I needed. Now, as I move the mouse see how the Thumb behaves:

99549-test.gif

For this I've following code in MainWindow.xaml.cs:

 public partial class MainWindow : Window
 {
     public ObservableCollection<Entry> Entries { get; set; }
     public MainWindow() {
         InitializeComponent();
         Entries = new ObservableCollection<Entry>();
         Random rand = new();
         for (int i = 0; i < 500; i++) {
             Entries.Add(new Entry() {
                 Date = new DateTime(rand.Next(2000,2021), rand.Next(1,13), rand.Next(1,29)),
                 Particulars = "Some Text",
                 Debit = rand.Next(10,100000),
                 Credit = rand.Next(10,1000),
                 Balance = rand.Next(10,10000)
             });
         }
         DataContext = this;
     }
 }
 public class Entry
 {
     public DateTime Date { get; set; }
     public String Particulars { get; set; }
     public int Debit { get; set; }
     public int Credit { get; set; }
     public int Balance { get; set; }
 }

How to solve this problem?

windows-wpf
test.gif (782.2 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

DaisyTian-1203 avatar image
1 Vote"
DaisyTian-1203 answered EmonHaque-1485 commented

Soultion for scrolling issue : Please add ScrollViewer.CanContentScroll="False" to your ListBox.

Reason for SharedSizeGroup properly: The SharedSizeGroup works well on your Header Grid and Footer Grid and they are in one Grid which I call gridRoot, the Grid in ListBox is in ListBox DataTemplate but not in gridRoot. They are not in same scope. For example, if you add Name="txt" to < TextBlock Text="{Binding Date}"/> , you cannot get txt by using ElementName in Header Grid , Footer Grid and gridRoot.


If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

@DaisyZhou-MSFT, yes with virtualization loss, CanContentScroll="False" it's perfect, What I've seen in my actual app is they get aligned right even if they are not in the same scope. Here in the Demo I haven't set the ScrollViewer.Template with my fixed width Vertical ScrollBar and that's why they are placed far right and not aligned.

0 Votes 0 ·