ContentControl inside ListBox going outside ListBox when scrolled

Question

I currently have a ListBox that has a DataTemplate (for a custom class) that is a TabControl (bound to a list of charts) that contains a ContentControl (to show the chart).

When I scroll the ListBox, the tabs of the TabControl goes off the screen correctly. However the chart of the ContentControl within the TabControl goes out of the ListBox and over other elements.

Code Sample:

<ListBox x:Name="ListBox" ItemsSource="{Binding ChartItemsList}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListBox.Resources>
    <DataTemplate DataType="{x:Type m:ChartItemsWrapper}">
        <StackPanel Orientation="Horizontal">
            <shared:PixelSnapper>
                <TabControl Background="White" BorderBrush="DarkGray" ItemsSource="{Binding Items}" Margin="3,0" Padding="0" TabStripPlacement="Right">
                    <TabControl.ContentTemplate>
                        <DataTemplate>
                            <DockPanel LastChildFill="True">
                                <Border BorderBrush="DarkGray" BorderThickness="0,1,0,0">
                                    <Grid Background="White">
                                        <Stuff>
                                        <Grid Margin="0,25,0,0">
                                            <ContentControl Content="{Binding Chart}" Visibility="Collapsed" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" x:Name="mainChart"/>
                                        </Grid>
                                    </Grid>
                                </Border>
                            </DockPanel>
                        <DataTemplate.Triggers ... />
                        </DataTemplate>
                    </TabControl.ContentTemplate>
                    <TabControl.ItemTemplate ... />
                    <TabControl.ItemContainerStyle ... />
                </TabControl>
            </shared:PixelSnapper>
        </StackPanel>
    </DataTemplate>
</ListBox.Resources>
<ListBox.ItemsPanel>
    <ItemsPanelTemplate>
        <WrapPanel FlowDirection="LeftToRight" IsItemsHost="True"  Orientation="Horizontal"></WrapPanel>
    </ItemsPanelTemplate>
</ListBox.ItemsPanel>

I tried setting ZIndexes, changing the binding, but it just seems that ListBoxes and ContentControls don't mix. Any help would be appreciated.

score 0 · Answer 1 · answered May 10 '16 at 03:22

0

Add HorizontalContentAlignment="Stretch" to your ListBox. I had similar issue before and this fixed my issue.

answered May 10 '16 at 03:22

ViVi

4,339
8
29
52

score 0 · Answer 2 · answered May 10 '16 at 05:04

0

Other than HorizontalContentAlignment="Stretch" suggested by vishakh369, you can also try ClipToBounds="True". Not sure what are the differences though, maybe you can try it out to see which one does it better.

answered May 10 '16 at 05:04

Jai

8,165
2
21
52

score 0 · Accepted Answer · edited May 23 '17 at 12:23

Sorry this is not going to be the answer most people in the future will find useful but in my particular case the binding of <ContentControl Content="{Binding Chart}" .../> was pointing to a chart that can only be displayed within a WinFormHost.

Since WinForms and WPF are different rendering technologies, and WinForms UI elements will always be overlaid over WPF ones which is causing my WinForm charts to go outside the ListBox when they were supposed to be scrolled "off screen."

For more on this, refer to this stackoverflow question or this MSDN post. A note, in my research, some people were saying this problem was fixed in the .NET 4.5 release but it seems that it was not due to complications and had to be dropped from the release (see link).

ContentControl inside ListBox going outside ListBox when scrolled

3 Answers3