We Keep Coding

ContentControl inside ListBox going outside ListBox when scrolled

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.

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

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.

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).

Auto-scroll Listbox based on TextBox text

In WPF and MVVM pattern, I have a TextBox and a ListBox. The ListBox is bound to a collection of items using a DataTemplate. The default count for this collection is about 50 or so.
What I wanted to achieve is a filter-like action. If it's possible, I wouldn't like to change the list view or anything like that, but simply to scroll to the item corresponding to the TextBox match, preferably without selecting it.
I've seen some examples and solutions using CollectionView and Filter (couldn't get it to work btw), and some using auto-scroll to the end of the list or to a new added item, but none specific to my case.
My Listbox is structured as follows:
<ListBox IsTextSearchEnabled="True" HorizontalAlignment="Stretch" Margin="6,49,0,0" Name="lbObjectA" VerticalAlignment="Stretch" ItemsSource="{Binding}">
<ListBox.ItemTemplate>
<DataTemplate DataType="{x:Type src:Dto}">
<StackPanel Height="20" Orientation="Horizontal">
<TextBlock Text="{Binding Path=Name}" Margin="0,3,0,0" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Use the DataTemplate to display the content in the exact same way as not using a DataTemplate

My ListBox currently binds as expected using
<ListBox ItemsSource="{Binding ChildDuplicate, UpdateSourceTrigger=PropertyChanged}" DataContext="{Binding}" Height="Auto" >
Where ChildDuplicate is an ObservableCollection<MyUserControl>
The problem I am facing is I need to add a button for every item within the ListBox (so it shows both my MyUserControl and the Button control).
This button cannot live within the MyUserControl for several reasons.
I was hoping to use a DataTemplate but this doesn't seem to work (XmlParser error is thrown), I've tried
<ListBox ItemsSource="{Binding ChildDuplicate, UpdateSourceTrigger=PropertyChanged}" DataContext="{Binding}" Height="Auto" >
<ListBoxItem>
<DataTemplate>
<ContentControl Content="{Binding}"></ContentControl>
</DataTemplate>
</ListBoxItem>
</ListBox>
I also tried using the ItemsControl control in the same way, the same issue.
Any idea how I use the DataTemplate to display the content in the exactly same way as not using a DataTemplate?

Try this instead:
<ListBoxItem>
<ListBoxItem.Template>
<ControlTemplate>
<ContentControl Content="{Binding}"></ContentControl>
</ControlTemplate>
</ListBoxItem.Template>
</ListBoxItem>

How to create a DataTemplate with a StackPanel of a variable number of StackPanels

I am trying to create a DataTamplate which should contain a StackPanel with a certain number of StackPanels.
<DataTemplate x:Key="DataTemplate">
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<Rectangle Fill="Aqua" Margin="2" Height="100" Width="50" VerticalAlignment="Top" HorizontalAlignment="Left"/>
</StackPanel>
</StackPanel>
</DataTemplate>
The code snippet above is just for a better understanding of my desired result, as the elements in the imbricated StackPanel will be binded.
This generates the following error message:
VisualTree of ItemsPanelTemplate must be a single element.
Any alternatives that could work?

You should ItemsControl with ItemsSource bound to your source list. In ItemsControl.ItemsPanel you can set which panel you want to use for items. In your case you should use StackPanel with Orientation=Vertical as ItemsPanel. See first sample here. But vertical StackPanel is already default ItemsPanel so you can omit it.
Inner StackPanel should be specified as ItemTemplate in your ItemsControl.
Your XAML should look like this:
<ItemsControl ItemsSource="...">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<!-- properties of your object should go here -->
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

WPF Listbox : How to bind data?

I have a listBox and add data to it like so:
for (int x = 0; x < Orchestrator.Instance.getTopicCount(); x++)
{
listTopics.Items.Add(Orchestrator.Instance.getTopic(x));
}
But I need to be able to do things like have text wrapping and divider lines, so I would like to do it the XAML.
Microsoft shows this:
<TextBlock Width="248" Height="24"
Text="{Binding ElementName=lbColor, Path=SelectedItem.Content,
Mode=OneWay}"
x:Name="tbSelectedColor"
Background="{Binding ElementName=lbColor, Path=SelectedItem.Content,
Mode=OneWay}"/>
But I don't really understand it. Here is my XAML:
<ListBox Height="261" HorizontalAlignment="Left" Margin="352,38,0,0" Name="listContent" VerticalAlignment="Top" Width="391" Grid.Column="1" HorizontalContentAlignment="Left" VerticalContentAlignment="Center" MaxWidth="391" ScrollViewer.HorizontalScrollBarVisibility="Disabled"/>
How am I able to achieve what I want? (Divider lines, text wrapping so I don't have to scroll horizontally, and data binding)

To specify the layout of each item, there are two different things you can change: the ItemContainerStyle, which provides the ControlTemplate used for each ListBoxItem, or the ItemTemplate, which provides the DataTemplate that is used to render each data item. The ItemTemplate is simpler to use if you're just getting started and haven't gotten the hang of ControlTemplates yet.
To get your text to wrap, there are two key things to do. Turn off the default horizontal scrolling of ListBox (which you got already), and set the TextWrapping property of your TextBlock to Wrap. To get to the TextBlock you need to define it in your ItemTemplate. Here's a simple example of the template declared inline, though you could also pull it out as a Resource. For the dividing line I used the simplest approach of a Border with only a bottom black line.
<ListBox x:Name="listContent" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="0,0,0,1" BorderBrush="Black">
<TextBlock Text="{Binding}" TextWrapping="Wrap"/>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

It seems that you will have to ascend the rather steep learning curve for how to use databinding in WPF first. Thereafter you should learn about DataTemplates and ItemTemplates to get the dividers and so forth.
Try this to get you started
A book I can heartily recommend is WPF in Action from Manning.

You need to define the ItemTemplate of your ListBox.
In your resources, add this:
<DataTemplate x:Key="myItemTemplate" TargetType="ListBoxItem">
<TextBlock Text="{Binding}"/>
</DataTemplate>
Supposing that your getTopic method returns a string, otherwise use {Binding MyTopicProperty} where MyTopicProperty is a property in your Topic class. Customize the TextBlock as you need.
Then use your ListBox like this:
<ListBox ItemTemplate="{StaticResource myItemTemplate"/>

here is an example how to bind listbox with RSS feed with DataTemplate:
<UserControl.Resources>
<XmlDataProvider x:Key ="DataRSS" XPath="//item" Source="http://rss.feedsportal.com/c/629/f/502199/index.rss">< /XmlDataProvider>
</UserControl.Resources>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<ListBox ItemsSource="{Binding Source={StaticResource DataRSS}}" Height="516" Margin="0,0,32,0" Background="{x:Null}" BorderBrush="#FF627DAE">
<ListBox.ItemTemplate >
<DataTemplate >
<Grid Width="400" Height="100" >
<Image Source="{Binding XPath=enclosure/#url}" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Top" />
<TextBlock TextWrapping="Wrap" Text="{Binding XPath=title}" FontWeight="Bold" Grid.Column="2"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</grid>