c# - ScrollViewer inside a ScrollViewer, Inner ScrollViewer Is Ignored (WPF) -

i have following setup

a scrollviewer around panel , inside panel groupbox surrounded scrollviewer. if items inside groupbox overflow screen want inner scrollviewer show user can scroll in groupbox outer scrollviewer makes groupbox wide needs.

the use case have different group boxes show different types of images , when there many images want user able scroll through rest. images being added dynamically in code behind. want group boxes big panel in.

this sample of issue (using buttons instead of images)

<window x:class="testing.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:testing"         mc:ignorable="d"         title="mainwindow" height="350" width="525">   <scrollviewer horizontalscrollbarvisibility="auto" verticalscrollbarvisibility="auto">       <dockpanel>           <scrollviewer horizontalscrollbarvisibility="auto" verticalscrollbarvisibility="hidden" dockpanel.dock="top">               <groupbox header="box 1" height="100">                   <grid x:name="mygrid"/>               </groupbox>           </scrollviewer>            <scrollviewer horizontalscrollbarvisibility="auto" verticalscrollbarvisibility="hidden" dockpanel.dock="top">                 <groupbox header="box 2" height="100">                     <grid x:name="mygrid2">                     </grid>                 </groupbox>             </scrollviewer>         </dockpanel>     </scrollviewer> </window> 

and code behind:

public partial class mainwindow : window {     public mainwindow()     {         initializecomponent();         (int = 0; < 20; i++)         {             columndefinition coldef = new columndefinition() { width = new gridlength(100) };             mygrid.columndefinitions.add(coldef);             button button = new button() { content = "button #" + };             grid.setcolumn(button, i);             mygrid.children.add(button);         }          (int = 0; < 3; i++)         {             columndefinition coldef = new columndefinition() { width = new gridlength(100) };             mygrid2.columndefinitions.add(coldef);             button button = new button() { content = "button #" + };             grid.setcolumn(button, i);             mygrid2.children.add(button);         }     } }