Develop Reference

Setting Canvas.Zindex value in DataTemplate

In my WP 8.1 app I have the MapControl:
<Maps:MapControl x:Name="mapControl" ZoomLevelChanged="mapControl_ZoomLevelChanged" Grid.ColumnSpan="2" Grid.Column="0" Grid.Row="1">
<Maps:MapItemsControl x:Name="MapIcons" ItemsSource="{Binding}" >
<Maps:MapItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Tapped="myStack_Tapped" Maps:MapControl.Location="{Binding GeoPoint}" Maps:MapControl.NormalizedAnchorPoint="{Binding Anchor}">
<Grid x:Name="contentGrid" Background="White" Height="150" Width="220" Visibility="Collapsed"/>
<Image x:Name="myImage" Source="{Binding MapMarker}"/>
</StackPanel>
</DataTemplate>
</Maps:MapItemsControl.ItemTemplate>
</Maps:MapItemsControl>
</Maps:MapControl>
On the map I got markers, and when I click one of them, "contentGrid" apears. The code for that behavior:
private void myStack_Tapped(object sender, TappedRoutedEventArgs e)
{
StackPanel s = sender as StackPanel;
Grid contentBox = s.FindName("contentGrid") as Grid;
contentBox.Visibility = Visibility.Visible;
}
I want to see "contentGrid" always above other markers, but some of them are above my "contentGrid". I tried to set Canvas.Zindex property in XAML in "contentGrid", but it's not working.
I attach screenshot to exemplify my problem.

The StackPanel stacks vertically (by default) or horizontally.
If you want children of the StackPanel in "different layers",
you 'd better replace the StackPanel of the DataTemplate with a Grid or Canvas
A simple solution is to
<DataTemplate>
<Grid Tapped="myStack_Tapped" Maps:MapControl.Location="{Binding GeoPoint}" Maps:MapControl.NormalizedAnchorPoint="{Binding Anchor}">
<Image x:Name="myImage" Source="{Binding MapMarker}"/>
<Grid x:Name="contentGrid" Background="White" Height="150" Width="220" Visibility="Collapsed"/>
</Grid>
</DataTemplate>
Writing the Image in the XAML before the Grid puts it under graphically.
Last, you can play with the ZIndex if you add other controls are added to the Grid/Canvas.
Otherwise I am not sure the ZIndex is really necessaray
EDIT
Canvas.ZIndex is an attached property of Canvas.
But surprisingly it works with the Grid !
The greater Zindex is, the closer the control to your eye (over the other controls)
Regards

WPF Textblock With Bound Text Will Not Scroll

The text in my TextBlock is bound to an element in my code. However, when I first open my window, the Textblock is completely empty. As I add text, I need the ScrollViewer to allow me to scroll down the text, or automatically scroll down as more text is added. Using the MVVM, so no code behind would be ideal.
<StackPanel Grid.Column="0" Grid.Row="1" Margin="0 10">
<Label Style="{StaticResource LabelStyle}">Output</Label>
<ScrollViewer VerticalScrollBarVisibility="Visible" Height="100">
<TextBlock ScrollViewer.CanContentScroll="True" Height="100" VerticalAlignment="Stretch" TextWrapping="Wrap" Text="{Binding Path=ProcessingOutput}"/>
</ScrollViewer>
</StackPanel>
How can I make this happen? Is there a way to update the ScrollViewer so that it sees more text is beyond what I can see in the TextBlock and allows the user to scroll down, or allows me to set an autoscroll feature that scrolls down automatically as text is added via binding?
Thanks in advance!

scrollbar will work if you remove Height="100" from TextBlock
to make it scroll when Text changes other answers suggest to use ScrollViwer.ScrollToBottom() method, e.g. like this:
<ScrollViewer Name="scroll"
VerticalScrollBarVisibility="Visible"
Height="100">
<TextBlock ScrollViewer.CanContentScroll="True"
VerticalAlignment="Stretch"
TextWrapping="Wrap"
Text="{Binding Path=ProcessingOutput, NotifyOnTargetUpdated=True}"
TargetUpdated="Txt_OnTargetUpdated">
</TextBlock>
</ScrollViewer>
private void Txt_OnTargetUpdated(object sender, DataTransferEventArgs e)
{
scroll.ScrollToBottom();
}

Listbox won't scroll down with ishittestvisible on true

I have a page where a scrollviewer and stackpanel wrap a listbox that loads text and button. The problem is when IsHitTestVisible is false then the button doesn't work but if the IsHitTestVisible is true the listbox cannot scroll to the bottom.
<ScrollViewer Name="scrollview" VerticalScrollBarVisibility="Visible" Margin="0,0,0,0" Foreground="Black">
<StackPanel>
<ListBox Margin="0,0,0,20" Name="lbComments" VerticalAlignment="Top" IsHitTestVisible="False"/>
</StackPanel>
</ScrollViewer>
What do I need to do?

ScrollViewer cannot scroll down

I have been doing a TextBlock inside a ScrollViewer but I cant seem to scroll down the ScrollViewer when the text inside the TextBlock is full. Below are my codes:
<ScrollViewer Canvas.Left="157" Canvas.Top="292" Name="scrollViewer1" Width="362"Height="76">
<TextBlock Canvas.Left="157" Canvas.Top="292" Height="76" Name="totalIngredient" Text="" Width="362" Background="#E6F8F2F2" FlowDirection="LeftToRight"/>
</ScrollViewer>

Your TextBlock should fill the ScrollViewer completely, so set margin/width/height etc on the ScrollViewer instead. Also set horizontal scrollbar visibility to disabled, set vertical scrollbar visibility to auto (or whatever you want) and make the TextBlock wrap by setting TextWrapping to "Wrap":
<ScrollViewer Canvas.Left="157" Canvas.Top="292" Width="362" Height="76" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto" >
<TextBlock Name="totalIngredient" Background="#E6F8F2F2" FlowDirection="LeftToRight" TextWrapping="Wrap" />
</ScrollViewer>

Try this code
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Height="76" Width="362">
<TextBlock Name="totalIngredient" Text="" Background="#E6F8F2F2" TextWrapping="Wrap">
</TextBlock>
</ScrollViewer>

How to make ScrollViewer work only when texblock in it has height greater than ScrollViewer height?

In my ListBox I show different content including text. Text can be long or short. It scrolls by ScrollViewer. Code:
<ScrollViewer MaxHeight="300" VerticalAlignment="Top" Grid.Column="1" Grid.Row="1" >
<TextBlock Style="{StaticResource TextsTextBlock}" Text="{Binding Texts}" Grid.Column="1" Grid.Row="1" />
</ScrollViewer>
and it's also working if text is short, and height of this text do not reach MaxHeight of ScrollViewer. I want to make ScrollViewer works only when text is long and it's height greater than ScrollViewer's MaxHeight, else - it doesn't have to work.
Tried border
<Border BorderBrush="Aqua" BorderThickness="2" MaxHeight="300" VerticalAlignment="Top" Grid.Column="1" Grid.Row="1">
<ScrollViewer VerticalAlignment="Top" VerticalScrollBarVisibility="Auto" >
<TextBlock Style="{StaticResource TextsTextBlock}" Text="{Binding Texts}" Grid.Column="1" Grid.Row="1" />
</ScrollViewer>
</Border>
but it's still scrolls in this border.

Set the VerticalScrollBarVisibility property to Auto.
The default value is Visible which means that the scroll bar is always shown.
By contrast the HorizontalScrollBarVisibility property has a default value of Hidden.

Try removing some of the Grid. properties from the inner controls
<Border BorderBrush="Aqua" BorderThickness="2" MaxHeight="300" VerticalAlignment="Top" Grid.Column="1" Grid.Row="1">
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" >
<TextBlock Text="text" TextWrapping="Wrap"/>
</ScrollViewer>
</Border>
this works fine with one line of text
If I copy paste your code it works fine