1

I have CanContentScroll property set to True in the parent Scrollviewer. This ScrollViewer is applicable to the entire Window. Now, this ScrollViewer has ItemsControl as its child. Each item in the ItemsControl is templated as an Expander and the content of this Expander contains another ItemsControl embedded in the child ScrollViewer. If I remove the child ScrollViewer, the Window content is scrollable, however, if I put it back in, I'm unable to Scroll.

I need the child ScrollViewer because I am limiting the height of the Expander content. When I scroll, the event is not being fired to the parent ScrollViewer in the Visual Tree. How and by using which event I can bubble it to the parent ScrollViewer in the Visual Tree?

This is my code:

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:behaviors="clr-namespace:AttributeSelector" xmlns:sys="clr-namespace:System;assembly=mscorlib"
    MinHeight="350" MinWidth="525" MaxWidth="1200" MaxHeight="900" WindowStartupLocation="CenterScreen" SizeToContent="WidthAndHeight">
    <sys:Boolean x:Key="BooleanTrue">True</sys:Boolean>
    <sys:Boolean x:Key="BooleanFalse">False</sys:Boolean>
    <behaviors:TextToHighlightedTextBlockConverter x:Key="TextToHighlightedTextBlockConverter" />
    <behaviors:GroupNameToICollectionViewConverter x:Key="GroupNameToICollectionViewConverter" />
    <LinearGradientBrush x:Key="LinearGradientBrush" StartPoint="0.5,0" EndPoint="0.5,1">
        <GradientStop Color="White" Offset="0"/>
        <GradientStop Color="#E3E3E3" Offset="1"/>
        <!--<GradientStop Color="#C0C0C0" Offset="1"/>-->
    </LinearGradientBrush>
    <Style x:Key="MainBorderStyle" TargetType="{x:Type Border}">
        <Setter Property="Background" Value="{StaticResource ResourceKey=LinearGradientBrush}" />
        <Setter Property="BorderBrush" Value="LightGray" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="CornerRadius" Value="5" />
        <Setter Property="SnapsToDevicePixels" Value="True" />
    </Style>
</Window.Resources>
<DockPanel LastChildFill="True" Margin="10">
    <StackPanel DockPanel.Dock="Top" Orientation="Horizontal" Margin="10">
        <!-- 3-4 TextBlocks/TextBoxes defined here -->
    </StackPanel>
    <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" CanContentScroll="True">
        <ItemsControl ItemsSource="{Binding UniqueGroups}" ScrollViewer.CanContentScroll="True"
                  ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <VirtualizingStackPanel IsItemsHost="True" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Border Margin="5" Style="{StaticResource ResourceKey=MainBorderStyle}">
                        <Expander x:Name="GroupExpander" Header="{Binding}" IsExpanded="True" Margin="5">
                            <Expander.HeaderTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{Binding}" Background="Transparent" Margin="10,0,0,0"
                                               FontWeight="DemiBold" FontSize="16" FontStretch="Expanded"
                                               HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                                               Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Expander}}, Path=ActualWidth}"/>
                                </DataTemplate>
                            </Expander.HeaderTemplate>
                            <Expander.Content>
                                <ScrollViewer Margin="20,5,10,5" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" CanContentScroll="True">
                                    <ItemsControl ItemsSource={Binding SubItems} ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto">
                                        <ItemsControl.ItemsPanel>
                                            <ItemsPanelTemplate>
                                                <WrapPanel MaxHeight="300" Orientation="Vertical" UseLayoutRounding="True" IsItemsHost="True" />
                                            </ItemsPanelTemplate>
                                        </ItemsControl.ItemsPanel>
                                        <ItemsControl.GroupStyle>
                                            <GroupStyle>
                                                <GroupStyle.Panel>
                                                    <ItemsPanelTemplate>
                                                        <VirtualizingStackPanel Orientation="Horizontal" IsItemsHost="True" />
                                                    </ItemsPanelTemplate>
                                                </GroupStyle.Panel>
                                            </GroupStyle>
                                        </ItemsControl.GroupStyle>
                                    </ItemsControl>
                                </ScrollViewer>
                            </Expander.Content>
                        </Expander>
                    </Border>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </ScrollViewer>
</DockPanel>

Rytis I
  • 1,105
  • 8
  • 19
Shankar Raju
  • 4,356
  • 6
  • 33
  • 52
  • Hi, could you answer me all the questions please. You are mentioning some event that you wish to be bubbled up. What event? Why do you need GroupStyle inside your inner ItemsControl? Why arent you using ListBox with custom DataTemplate? Or why dont you use TreeView with custom DataTemplate instead all this? It looks to me like your data is structured like a "tree". Post us your ViewModel please with data. So we can run the project. – ninja hedgehog Aug 27 '13 at 12:30
  • When you try to scroll, the content does scroll. This is because the child ScrollViewer tries to handle the event and is not bubbling it to the parent. I will try to use ListBox, that seems to be like a good idea. I just wanted to keep the UI as light as possible, so went with ItemsControl. I posted another question here: http://stackoverflow.com/q/18425015/640607 From that example, I'm trying to assign expanders for groups. I will post my viewmodel soon. – Shankar Raju Aug 28 '13 at 00:29
  • You are again talking about some event. What event do you mean? Give me the name of that event. Tell us about your results once you tried it out with ListBox. Also could you post us your ViewModel soon with some test data. – ninja hedgehog Aug 28 '13 at 06:50
  • Finally found the solution [here][1]. [1]: http://stackoverflow.com/a/16110178/640607 – Shankar Raju Aug 29 '13 at 00:15
  • @ninjahedgehog, I found the solution and posted the link here. Thank you though. – Shankar Raju Aug 29 '13 at 00:16
  • I took a look at that solution. I think you will lose virtualization if you do it that way. Do you need virtualization of items? – ninja hedgehog Aug 29 '13 at 07:24
  • yea, because I have to deal with a lot of items and I make use of VirtualizationStackPanel. Is there any better way? – Shankar Raju Aug 29 '13 at 21:09
  • Well as I mentioned before if you want to have virtualization you will have to use ListBox or TreeView. You still haven't posted us your ViewModel with test data. Give us more code so we can debug or try few things out. I don't want to start from scratch and I have no idea how have you organized your data. – ninja hedgehog Aug 30 '13 at 07:27

0 Answers0