Include an item in 2 different scrollviewers

Question

I have a grid divided into 4 grids A, B, C & D. I need to enable a horizontal scrollviewer only for 2 grids A and B. However, I need to enable a vertical scrollviewer only for 2 grids B & D. How can grid B be included in both the first horizontal scrollviewer and the second vertical scrollviewer? Thanks a lot in advance.

Edit: Maximizing the window always makes it positioned on the left upper part of the window as depicted in the image below:

Here's the code I added for making sure the maximized window is positioned away from the upper left region. However, nothing changes about this issue!

    private void Window_StateChanged(object sender, EventArgs e)
    {
        if (this.WindowState == WindowState.Maximized)
        {
        //   Left = System.Windows.SystemParameters.WorkArea.Width - Width;
           Left = 200;
         //  Top = System.Windows.SystemParameters.WorkArea.Height - Height;
          Top = 200;          
        }
    }

Any hints for keeping the window centered in the maximizing mode? Thanks very much in advance.

Can you clarify your question and give us the code you've tried that is not working, I'm having a hard time understanding what you want. A UniformGrid is a Grid that has unified cell size, you don't specify how many rows and columns your UniformGrid has, I assume it's 2x2 but who knows. Each cell are individual, they don't share their bounds/items together, meaning a ScrollViewer inside cell A cannot 'extend' itself inside cell C. Maybe a UniformGrid is not what you're exacly looking at, but I don't have enough information. — Roger Leblanc, Nov 19 '17 at 23:04
Thanks very much for your concern. Well, I'm sorry I meant a grid not a uniform grid. It's a normal grid divided into 4 minor grids. I need 1 minor grid to be included in a horizontal scrollviewer with 1 other grid and included in a vertical scrollviewer with another grid. Could this be attained? Thanks again. — Doua Ali, Nov 22 '17 at 22:02
After looking at the added picture, I'm still confused on what you want to achieve. Does the horizontal `ScrollViewer` would move A and B at the same time or does A and B needs to have their own separate `ScrollViewer`? Same thing for B and D, are they sharing the same `ScrollViewer` or do they have their own ones? What will be shown inside each cell? Maybe that will help to get a sense of what you're looking for. — Roger Leblanc, Nov 23 '17 at 02:44
Yes, exactly. I need grid A and B to move horizontally at the same time. That's the case as well with B and D but vertically. Thanks a lot for your help, I do appreciate it. — Doua Ali, Nov 23 '17 at 21:51

Roger Leblanc · Accepted Answer · 2017-11-24T23:52:29.877

1

I'm assuming you're not really interested in a UniformGrid, but rather looking for a way to have a vertical ScrollViewer inside an horizontal ScrollViewer.

This code gives you a 2x2 Grid : A B C D

The first element added is an horizontal ScrollViewer that span inside both A and C, this element is divided in two, the bottom part has a vertical ScrollViewer. The elements in B and D are simple elements.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>

    <ScrollViewer Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>

            <Image Grid.Row="0" Source="http://via.placeholder.com/1000x1000"/>
            <ScrollViewer Grid.Row="1" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
                <Image Source="http://via.placeholder.com/1000x1000"/>
            </ScrollViewer>
        </Grid>
    </ScrollViewer>

    <Image Grid.Column="1" Grid.Row="0" Source="http://via.placeholder.com/1000x1000"/>
    <Image Grid.Column="1" Grid.Row="1" Source="http://via.placeholder.com/1000x1000"/>
</Grid>

EDIT

Here's a new code to suit the requirements in your edit.

XAML

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>

    <ScrollViewer x:Name="A" Grid.Column="0" Grid.Row="0" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled" ScrollChanged="A_ScrollChanged">
        <Image Stretch="None" Source="http://lorempixel.com/1000/1000/"/>
    </ScrollViewer>
    <ScrollViewer x:Name="B" Grid.Column="0" Grid.Row="1" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible" ScrollChanged="B_ScrollChanged">
        <Image Stretch="None" Source="http://lorempixel.com/1000/1000/"/>
    </ScrollViewer>

    <ScrollViewer x:Name="C" Grid.Column="1" Grid.Row="0" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Visible">
        <Image Stretch="None" Source="http://lorempixel.com/1000/1000/"/>
    </ScrollViewer>
    <ScrollViewer x:Name="D" Grid.Column="1" Grid.Row="1" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Visible" ScrollChanged="D_ScrollChanged">
        <Image Stretch="None" Source="http://lorempixel.com/1000/1000/"/>
    </ScrollViewer>
</Grid>

Code behind

    private void A_ScrollChanged(object sender, ScrollChangedEventArgs e)
    {
        B.ScrollToHorizontalOffset(e.HorizontalOffset);
    }

    private void B_ScrollChanged(object sender, ScrollChangedEventArgs e)
    {
        A.ScrollToHorizontalOffset(e.HorizontalOffset);
        D.ScrollToVerticalOffset(e.VerticalOffset);
    }

    private void D_ScrollChanged(object sender, ScrollChangedEventArgs e)
    {
        B.ScrollToVerticalOffset(e.VerticalOffset);
    }

edited Nov 24 '17 at 23:52

answered Nov 19 '17 at 23:24

Roger Leblanc

1,543
1
10
9

Thanks very much. Your code is helpful but what If I need to add an item inside your vertical scrollviewer and I don't want it to be included in the horizontal scrollviewer? I'll try to post a photo of what I mean so that it can be clearer. Thanks again. – Doua Ali Nov 22 '17 at 22:19
I've just posted a photo in the question. Please, have a look. – Doua Ali Nov 22 '17 at 22:25
Thanks very much. I tried your code but there seems to be something wrong in my implementation, I don't know! The scrollviewers are now enabled but inactive (don't scroll with dynamically adding more elements to the grid). I'll post my XML in the question; I'm very thankful for your help. – Doua Ali Nov 26 '17 at 22:33
Well, it's now working properly! The problem was that I have to assign a fixed width to the horizontal scrollviewer. Thanks very very much, I'm really grateful to you. I'll mark your answer as accepted but I just have another question if you please, what if I need to make the vertical scrollviewer on the right side of the grid not on the left side? Is this possible? Plus, do you think WPF with C# is a convenient tool for generating grids of huge size? I noticed some lag when I tried to increase the number of cells on a grid! Any recommendations will be highly appreciated. Thanks a lot again. – Doua Ali Nov 26 '17 at 23:31
[Here's a link to an example from Microsoft](https://msdn.microsoft.com/en-us/library/aa970847(v=vs.85).aspx) that shows how to customize ScrollViewer to show on left side instead of right side, it's basically just applying a style and putting the `ScrollBar` element on the first column (left) of a `Grid` and the `ScrollContentPresenter` on the second column (right). – Roger Leblanc Nov 27 '17 at 02:14
For large number of elements, a `Grid` is not the best control, you should use a control that can take advantage of UI Virtualization, like `ItemsControl` or `ListBox` (ListBox inherits from ItemsControl). [See here for some more information.](https://learn.microsoft.com/en-us/dotnet/framework/wpf/advanced/optimizing-performance-controls) – Roger Leblanc Nov 27 '17 at 02:14
Thanks a bunch, Mr. Roger, you're such a kind person. I'll have a look at the links you provided. One more question if you please, maximizing this window always makes it positioned on the left upper region of the screen and with a certain width and height no matter what maximum width or height I set. I set the window's left and top values in the WindowStateChanged event on condition that the new state is maximized; I want it to be centered. However, the maximized window always shows up on the upper left region and with a certain width different than the maximum width! Any hints, if you please? – Doua Ali Nov 28 '17 at 22:57
I'm not sure I understand what's your issue, but setting `MaxHeight` and `MaxWidth` properties to the `Grid` element makes it centered in the screen without exceeding the maximum width and height specified, no matter if the window is maximized or not. Code : `` – Roger Leblanc Nov 28 '17 at 23:58
Yes, I get your point but I don't know what is wrong in particular. Maximizing the window makes it positioned on the left upper region of the screen i.e: not in the center any more! The maximized window is always on the left upper part even though I set Left=200 and Top=200 in the Window_StateChanged event on the condition of maximizing. I'll post the code in the question. – Doua Ali Nov 30 '17 at 21:29
I think this conversation has sideloaded a lot from its original question, to make sure I or someone else can help you better, you should start another question with the bare minimum code to reproduce your issue, I suggest you start over with an empty app and only include enough code to reproduce, without even including your 4 cells if they aren't needed to reproduce the issue. – Roger Leblanc Dec 01 '17 at 04:20
Oh ok, I'm sorry you're right. I've posted another question regarding this issue. I apologize for asking so many questions and loads of thanks for helping me. Here's the link of the new question :) https://stackoverflow.com/questions/47599712/c-sharp-wpf-maximized-windows-position – Doua Ali Dec 01 '17 at 18:51

Include an item in 2 different scrollviewers

1 Answers1