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();
}

how to scroll stackpanel in xaml

I'm trying to scroll items in stackpanel added programmatically, but it's not working:
<ScrollViewer HorizontalScrollMode="Enabled" >
<StackPanel x:Name="options" Orientation="Horizontal" Width="760" HorizontalAlignment="Left" Margin="1,0,0,0">
</StackPanel>
</ScrollViewer>
is there any error?

You also need to specify the horizontal visibility of the ScrollViewer. Set it to any value other than Disabled (the default) and it will work:
<ScrollViewer HorizontalScrollMode="Enabled" HorizontalScrollBarVisibility="Auto">

WPF + Expander control issue

I have a WPF application in which i want to add "Expander" control.
The XAML code is like this
<Expander Header="More Options" Margin="30,286,0,0" Height="145" Width="547">
<Grid>
<TextBox Height="104" HorizontalAlignment="Left" Margin="30,286,0,0" Name="logsTextBox" VerticalAlignment="Top" Width="547"
ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.CanContentScroll="True" />
</Grid>
</Expander>
The textBox gets updated with the output of the bat file(which runs using Process).
when I run my application, textBox is not visible when expanding the expander.
What property I have to set to make it visible when expanding the expander?
Thanks

The margin property is applied to the parent's region.
Your declaration...
<TextBox Height="104" HorizontalAlignment="Left" Margin="30,286,0,0" Name="logsTextBox" VerticalAlignment="Top" Width="547"
ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.CanContentScroll="True" />
...indicates that the TextBox should appear inside the Expander and 286 units BELOW the Exander's top. Remove the TextBox margin and you will see it as expected.

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>