We Keep Coding

Visual C#: Can't find correct relative width for listbox

So I have a listbox and I'm trying to use a stackpanel inside as an item with a border. Now I want every item to be the same width as my listbox, which is anchored to the sides of the window. I found how to set the width relative to the parent but for some reason it turns out to be wider. Can't seem to figure out why. Picture below code of how it looks.
<ListBox x:Name="listBoxSecrets" Margin="10,107,10,10" Background="{x:Null}">
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Orange" CornerRadius="2,2,2,2" BorderThickness="2,2,2,2">
<StackPanel Background="White"
Width="{Binding RelativeSource=
{RelativeSource FindAncestor,
AncestorType={x:Type ListBox}},
Path=ActualWidth}"
>
<TextBlock Text="{Binding Path=Name}" />
<TextBlock Text="{Binding Path=Totp}" />
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

ListBox.ActualWidth is too much for ListBoxItems. But ListBoxItems will use all available width if ListBox has HorizontalContentAlignment set to "Stretch":
<ListBox HorizontalContentAlignment="Stretch"

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

How to remove header space on ComboBox in XAML

I'm trying to line up a TextBox and a ComboBox inside of a StackPanel, but the ComboBox seems to have some extra space at the top of it that I can't get rid of.
How can I get these two controls to align with each other properly?
<StackPanel Orientation="Horizontal">
<TextBox IsTextPredictionEnabled="False" Margin="0,0,0,0" BorderBrush="Gray"
Text="{Binding ZoneName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
PlaceholderText="YourCompany"/>
<ComboBox VerticalAlignment="Stretch" BorderBrush="Gray" Padding="0,0,0,0" Margin="0,0,0,0"
ItemsSource="{Binding Path=DomainChoices}"
SelectedValue="{Binding Path=SelectedDomainChoice, Mode=TwoWay}"
SelectedValuePath="{Binding id}"
DisplayMemberPath="{Binding text}"
Foreground="Black" Width="200">
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding text}"/>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</StackPanel>

When you take a look at ComboBox's style then you will find that <Border x:Name="ShortListOuterBorder" .... has a Margin with value of Margin="{ThemeResource PhoneTouchTargetOverhang}". This resource is defined in the style above:
<Thickness x:Key="PhoneTouchTargetOverhang">0,9.5</Thickness>
You can easily define your own style in which you can change the above value, or change margin of the Border. You can also try to set the margin of your ComboBox to 0,-9.5,0,0 without applying the style.

XAML layout ItemsControl

I have searched extensively on Google and am struggling to find an easy example to follow for an ItemsControl which I think I need to be able to do the following.
I currently have a Grid with a scrollable Listbox containing Checkboxes which works as expected using the following XAML layout
<Grid>
<ListBox ScrollViewer.VerticalScrollBarVisibility="Auto"
ItemsSource="{Binding Selections}" Margin="12,22,12,94">
<ListBox.ItemTemplate>
<DataTemplate>
<CheckBox IsChecked="{Binding IsChecked}"
Content="{Binding Path=Item.SelectionName}">
</CheckBox>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
I now want to add a TextBox to the right of each Checkbox so it's aligned horizontally with 1 Checkbox and 1 Textbox per row. I thought I would have to use an ItemsControl to allow two controls but using the ItemsControl as below I lose the ability to scroll
<Grid>
<ItemsControl ScrollViewer.VerticalScrollBarVisibility="Auto"
ItemsSource="{Binding Selections}" Margin="12,22,12,94">
<ItemsControl.ItemTemplate>
<DataTemplate>
<CheckBox IsChecked="{Binding IsChecked}"
Content="{Binding Path=Item.SelectionName}">
</CheckBox>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
Also, if I try and add a textbox similar to
<DataTemplate>
<CheckBox IsChecked="{Binding sChecked}" Content="{Binding Path=Item.BookieName}" />
<TextBox />
</DataTemplate>
I get an error The object 'DataTemplate' already has a child and cannot add 'TextBox'
Essentially, I want it to look like this
Can anyone give me a few pointers on how to structure the controls in XAML to get my desired layout?

Just use a StackPanel in your DataTemplate and set the orientation to horizontal.
<DataTemplate>
<StackPanel Orientation="Horizontal">
<CheckBox IsChecked="{Binding sChecked}" Content="{Binding Path=Item.BookieName}" />
<TextBox />
</StackPanel>
</DataTemplate>

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>