We Keep Coding

In XAML two stackpanels overlay in a grid

I have this XAML on my windows phone:
<phone:PanoramaItem Header="{Binding LocalizedResources.balance, Source={StaticResource LocalizedStrings}}">
<StackPanel Margin="15,0,0,0" >
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Grid>
<StackPanel x:Name="AccountsInfo" Grid.Column="1">
</StackPanel>
<StackPanel Grid.Column="2">
<local:RateChart x:Name="rateChart" Height="324" Margin="-12,25,0,0" Width="417" />
</StackPanel>
</Grid>
</ScrollViewer>
</StackPanel>
</phone:PanoramaItem>
In AccountsInfo Stackpanel I have like 5 accounts added programatically and RateChart is a chart. However, my rate chart should be below all the accounts and at the moment it is right in top of the screen and overlays first accounts. I don't know how to do the orientation.
Thanks for all the answers.

Looks to me like all you need is something like this. We get rid of the unnecessary panels, actually specify to your second StackPanel where it needs to be positioned within the parent Grid while ditching some unnecessary values on other properties. Hope this helps.
<phone:PanoramaItem Header="{Binding LocalizedResources.balance, Source={StaticResource LocalizedStrings}}">
<ScrollViewer HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto">
<RowDefinition Height="Auto">
</Grid.RowDefinitions>
<StackPanel x:Name="AccountsInfo">
</StackPanel>
<StackPanel Grid.Row="1">
<local:RateChart x:Name="rateChart"
Width="417"
Margin="0,25,0,0" />
</StackPanel>
</Grid>
</ScrollViewer>
</phone:PanoramaItem>

Binding listbox maxHeight to parent actual

So I am having some trouble getting the binding of a lisbox height to work. I have a user control that holds a listbox, this box is dynamically populated on the fly but it seems that if too many items are added it extends past the boundaries of the parent objects and refuses to stop and use the scoll bar...
<UserControl x:Class="TransaltionModule.Views.NoteView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d">
<Grid>
<ListBox ItemsSource="{Binding noteList}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Auto" >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="5*"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" Grid.Column="0">
<TextBlock Text="Type :" VerticalAlignment="Center" FontSize="14" Width="65"/>
<TextBox Text="{Binding noteType}" Width="auto" IsEnabled="False" VerticalAlignment="Center" FontSize="14"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">
<TextBlock Text="Date :" VerticalAlignment="Center" FontSize="14" Width="65"/>
<TextBox Text="{Binding timeStamp}" Width="auto" IsEnabled="False" VerticalAlignment="Center" FontSize="14"/>
</StackPanel>
<TextBlock Grid.Row="1" Text="{Binding text}" Grid.ColumnSpan="2"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
If i hardcode the maxheight property everything works as intended, but with the multiple display resolutions I will be working against that is not a solution I can use. Can anyone recommend a fix

You can bind it to an element by using Path=ActualHeight
For this to work don't forget to name the Grid containing the Listbox
Try something like this :
<Grid x:Name = "grdListBoxTest">
<ListBox x:Name="lstBoxTest"
MaxHeight="{Binding ElementName=grdListBoxTest, Path=ActualHeight}">
<!-- Your Listbox Stuff Here -->
</ListBox>
</Grid>
By doing this you link the height of the Listbox to it's parent Grid. That way if the grid's size changes the MaxHeight of the Listbox will change.

Xaml, middle column not taking up full width

How do I make my middle column take up the full width available while allowing space for the comment section so that all those comment boxes are nicely aligned to the right:
<DataTemplate x:Key="ActivityStreamItemTemplate">
<StackPanel VerticalAlignment="Top" Margin="5,0,0,0">
<Button Command="{Binding Path=DataContext.LoadSpacesCommand, ElementName=OrganisationList}" CommandParameter="{Binding}" Padding="-5,0,-5,-5" Margin="-7,-12,-7,-7" Height="auto" BorderThickness="0" HorizontalAlignment="Left" VerticalAlignment="Stretch" HorizontalContentAlignment="Left" UseLayoutRounding="True" FontSize="0.01">
<Grid Height="auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="67" />
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="60" />
</Grid.ColumnDefinitions>
<StackPanel Height="auto" Grid.Column="0" Background="Transparent">
<Border Background="Transparent" BorderThickness="0" Width="62" Height="62" HorizontalAlignment="Left" Margin="0,0,0,5">
<Image Source="{Binding created_by.image.link}" Width="62" Height="62"></Image>
</Border>
</StackPanel>
<StackPanel Height="auto" Grid.Column="1">
<TextBlock Text="{Binding type}" HorizontalAlignment="Left" FontSize="30" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" />
<TextBlock Text="{Binding ttitle}" HorizontalAlignment="Left" FontSize="15" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" TextWrapping="Wrap"/>
<TextBlock Text="{Binding created_by.name}" HorizontalAlignment="Left" FontSize="11" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" />
</StackPanel>
<StackPanel Height="60" Grid.Column="2" Margin="10,0,0,0">
<StackPanel.Background>
<ImageBrush Stretch="Fill" ImageSource="/Assets/Icons/CommentsIcon.png"/>
</StackPanel.Background>
<TextBlock Text="{Binding comments.Count}" HorizontalAlignment="Center" FontSize="20" Foreground="Black" TextAlignment="Center" Padding="0,8,0,0"/>
</StackPanel>
</Grid>
</Button>
</StackPanel>
</DataTemplate>
I tried placing horizontal align on the third stackpanel but that actually didn't work.
EDIT: Thanks for the tries but no cigar:

You need to alter the style of the ListBoxItem itself to ensure that the content is stretched across the available width.
Define this style:
<Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
</Style>
Then the Right alignment of the "Comments" image will work and the central text box will stretch to fill the available space.
You might find that just using a StackPanel with an horizontal orientation works better than a Grid for the item template, especially if the data in columns 0 and 2 are a constant width.

Play around with the space given for the columns, for example:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="67" />
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
This gives the center column 3 times more space than the right column

It's hard to tell exactly what you want because of how you've blurred your image. But I think the key is to make the container of the grid take up all available space, HorizontalAlignment="Stretch".
<DataTemplate>
<StackPanel HorizontalAlignment="Stretch">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="67" />
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="60" />
</Grid.ColumnDefinitions>
<!-- items here -->
</Grid>
</StackPanel>
The item you set to have Grid.Column="0" will have width 67dip, the one with Grid.Column="2" will be width 60dip, and the one with Grid.Column="1"will fill up the rest of the space.
dip = device independent pixels - all Windows Phone apps are measured as if the screen is 480x800 and then rendered at the actual resolution of the screen.

Inside a StackPanel you can't do HorizontalAlignment to right while its orientation is LeftToRight, as far as I know. Avoid using it.

The problem stems from using a StackPanel as the top-most UIElement. Use a Grid instead and follow the rest of this advice:
Right align content in ListBox
Which leads to this answer as well:
C# windows phone -Alignment in xaml ListBox.ItemTemplate

Your problem is the Button, if it's not mandatory try deleting it and add a "Tap" Event to the StackPanel, i've tried it and it works.
<DataTemplate x:Key="ActivityStreamItemTemplate">
<StackPanel Tap="...">
// no <Button> here
<Grid>
---
</Grid>
// no </Button> here
</StackPanel>
</DataTemplate>
better option
<DataTemplate x:Key="ActivityStreamItemTemplate">
<Grid Tap="...">
...
</Grid>
</DataTemplate>

3 column grid for xaml is not taking up expected space

I have the following xaml:
<DataTemplate x:Key="ActivityStreamItemTemplate">
<StackPanel VerticalAlignment="Top" Margin="5,0,0,0">
<Button Command="{Binding Path=DataContext.LoadSpacesCommand, ElementName=OrganisationList}" CommandParameter="{Binding}" Padding="-5,0,-5,-5" Margin="-7,-12,-7,-7" Height="auto" BorderThickness="0" HorizontalAlignment="Left" VerticalAlignment="Stretch" HorizontalContentAlignment="Left" UseLayoutRounding="True" FontSize="0.01">
<Grid Height="auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="67" />
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="67" />
</Grid.ColumnDefinitions>
<StackPanel Height="auto" Grid.Column="0" Background="Transparent">
<Border Background="Transparent" BorderThickness="0" Width="62" Height="62" HorizontalAlignment="Left" Margin="0,0,0,5">
<Image Source="{Binding created_by.image.link}" Width="62" Height="62"></Image>
</Border>
</StackPanel>
<StackPanel Height="auto" Grid.Column="1">
<TextBlock Text="{Binding type}" HorizontalAlignment="Left" FontSize="30" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" />
<TextBlock Text="{Binding ttitle}" HorizontalAlignment="Left" FontSize="15" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" TextWrapping="Wrap" MaxWidth="Infinity" />
<TextBlock Text="{Binding created_by.name}" HorizontalAlignment="Left" FontSize="11" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" />
</StackPanel>
<StackPanel Height="auto" Grid.Column="2">
<TextBlock Text="{Binding comment_count}"></TextBlock>
</StackPanel>
</Grid>
</Button>
</StackPanel>
</DataTemplate>
As you can see I would like to have the first column of my grid set to 67.. perfect, and working fine...
The next column needs to fill as much as it can of the screen minus the extra columns width after it.
How do I go about doing this?
Kind of linked to this: How to TextWrap a TextBlock within a width Auto Column? but I couldn't get the * thing to work... I'm not sure it really does what I need it to do

It's because you've got:
MaxWidth="Infinity"
on your TextBlock and
<ColumnDefinition Width="Auto"/>
on your column.
This means that the XAML thinks it can grow that column as much as it likes to fit the text in.
If you want the text to wrap you'll have to provide a limit to either the width of the column, the width of the grid or the width of the stack panel.
If you want the middle column to take the remaining space then just specify it's width with a *:
<ColumnDefinition Width="*"/>

Logical scrolling no longer working when applying a itemscontrol

When applying a itemsControl i found that logical scrolling (canContentScroll="true") no longer seems t be working.
With logical scrolling i mean viewing item per item when clicking for example 2 navigation buttons that moves the scrollviewer.
The content of the itemControl is as the following:
<Grid Height="70" Width="900">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="LeftScrollRow2" Width="Auto"/>
<ColumnDefinition x:Name="HorizontalContentRow2" Width="*"/>
<ColumnDefinition x:Name="RightScrollRow2" Width="Auto"/>
</Grid.ColumnDefinitions>
<RepeatButton Content="left" x:Name="btnLeft" Grid.Column="0" Style="{DynamicResource RepeatButtonStyleLeft}" Click="btnLeft_Click"></RepeatButton>
<ScrollViewer Grid.Column="1" VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Hidden" x:Name="sv" CanContentScroll="True" Margin="0" Height="73" >
<ListBox x:Name="list1" ItemsSource="{Binding Reg, ElementName=Window}" Background="{x:Null}" BorderBrush="{x:Null}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button x:Name="TestButton" HorizontalAlignment="Center" Height="71" Width="151"
Margin="5,0,10,0" Style="{DynamicResource ButtonStyleTest}"
Click="TestButton_Click"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ListBox>
</ScrollViewer>
<RepeatButton Content="right" x:Name="btnRight" Grid.Column="2" Style="{DynamicResource RepeatButtonStyleRight}" Click="btnRight_Click"></RepeatButton>
</Grid>
When i navigate the items that are being loaded in the stackpanel (buttons) only continues scrolling appears, and content slowly appears.
A possible solution to this would be using HorizontalOffSet but this involving giving a exactly distance which i think would not be a good solution at all.
Thanks in advance,
Jackz

I would go about this differently.
I would add the scroll bar in the style. Read this and see the note in the Scrollbar section.
http://www.wpfsharp.com/2012/03/18/itemscontrol-vs-listbox-vs-listview-in-wpf/