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

XAML Element Alignment issue

I have a list view that will contain notes that I input. I am having trouble figuring out how to have the list view item look how I want it to.
Below is how it should look:
And this is what it currently looks like:
How do I write the list view item in XAML so that the Date and time appear to the very top-right of each list view item, with the text of the note to the left?
<ListView x:Name="list" ItemsSource="{Binding Note}" BorderBrush="{x:Null}" BorderThickness="0">
<DataTemplate>
<ListViewItem>
<StackPanel Orientation="Horizontal">
</StackPanel>
</ListViewItem>
</DataTemplate>
</ListView>
Any help at all is much appreciated!

You are missing a number of elements required in order to get your screen to look the way you want.
You need to define the ItemTemplate for the ListView. You're on the right track here, it is a DataTemplate declared in XAML, you just have to apply it to the ListView.ItemTemplate property.
You need to set the HorizontalContentAlignment of the ListView to Stretch (the default is Left, which means your items will not fill the entire content area).
You need to use a DockPanel (or other similar panel) inside your DataTemplate to place your date content on the right, and the remainder of your content on the left.
You need to disable Horizontal Scrolling (ScrollViewer.HorizontalScrollBarVisbility) on the ListView in order to make your content wrap (otherwise it will just happily draw it all on one line).
I've included a sample ListView that should get you started.
<ListView
ItemsSource="{Binding Items}"
HorizontalContentAlignment="Stretch"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListView.ItemTemplate>
<DataTemplate>
<DockPanel>
<TextBlock
TextWrapping="Wrap"
Text="{Binding Date}"
Background="Magenta"
DockPanel.Dock="Right" />
<TextBlock Text="{Binding Content}" Background="Lime" />
</DockPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

Vertical scrollbar is not coming up in listbox

I am designing a visual studio extension in which I need a dock panel window. I am able to get this window using WPF. In this particular window I am displaying dynamic list of some strings which exceeds 100. To achieve this, I am using listbox in that window.
As this list contains more than 100 strings, all the strings are not visible. I should be able scroll the list vertically to access all the strings. But I am not getting a vertical scrollbar. I tried some things but they are not working. I am a newbie to this so, I am unable to figure out what to do. The code is as follows.
<UserControl d:DesignHeight="300" d:DesignWidth="300">
<Grid >
<StackPanel Orientation="Vertical" CanVerticallyScroll="True" CanHorizontallyScroll="True" >
<TextBlock Margin="10" HorizontalAlignment="Center" Foreground="{DynamicResource {x:Static vsfx:VsBrushes.ToolWindowTextKey}}" Text="Available Projects"></TextBlock>
<ListBox Name="AllProjects" TabIndex="0" Height="Auto" ScrollViewer.CanContentScroll="True" ScrollViewer.VerticalScrollBarVisibility="Visible" />
</StackPanel>
</Grid> </UserControl>
I did these things in xaml form only and nothing in back-end c# code. Could you guys please tell me where I am going wrong?

Use this you will see the scrollbar
<Grid >
<StackPanel Orientation="Vertical" CanVerticallyScroll="True" CanHorizontallyScroll="True" >
<TextBlock Margin="10" HorizontalAlignment="Center" Text="Available Projects"></TextBlock>
<ListBox Name="AllProjects" TabIndex="0" ScrollViewer.VerticalScrollBarVisibility="Visible" Height="100" />
</StackPanel>
</Grid>
Just fix the height property to a constant.

How to adapt the app to multiple resolution in Windows8

I have the layout code below in xaml
<Grid>
<StackPanel x:Name="TestStackPanel" Grid.Row="2" Orientation="Horizontal">
<ScrollViewer x:Name="TestScrollViewer" Height="300" VerticalScrollBarVisibility="Auto">
<GridView x:Name="TestGridView"
Width="940"
Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
ItemTemplate="{StaticResource TestTemplate}"
ItemsPanel="{StaticResource TestItemPanelTemplate}"
ItemContainerStyle="{StaticResource TestItemStyle}"
SelectionMode="None"
HorizontalAlignment="Left"/>
</ScrollViewer>
<Button x:Name="TestButton" Content="ClickMe" VerticalAlignment="Bottom" Margin="10,5,0,0" Click="TestButton_Click"/>
</StackPanel>
</Grid>
This displays well in 1366*768 resolution, but if I change the resolution to 2560*1400, it couldn't displays as expected, I know it's certain, but how to adpat the layout to different resolutions? I have tried to add a ViewBox to encapsulate the Grid, it works well in FullScreenLandScape view, but when I change the app to Snap view, the Grid displays in a samll space.
Anyone can help?

Register to the LayoutUpdated event at the UI element.
And re-calculate the layout according to Window.Current.Bounds.Width.

Controls in Listbox

I'm interesting, can I group some controls (image, 2-3 textboxes) in one element, and then push group of this elements in listbox? I'm trying to make a news reader of russian social network Vkontakte into Windwos Phone 7.
Each news has an image, text, and some other metadata. So I want to group all this info in one control and use it in listbox.
I tryied to push a grid(which had an image and two textboxes) into listbox, but it throws XamlParseException.
Also, I need to get the content of theese textboxes and images from code. In grid I can use
<Grid.Resources>
<src:Customers x:Key="customers"/>
</Grid.Resources>

Here is what you need:
A collection (ObservableCollection<T> recommended) of models (News in you case).
A ListBox
A DataTemplate
Example:
XAML:
<ListBox Name="ListBox1">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
...
<Image Source="{Binding ImagePropertyInModel}" ... />
<TextBlock Text="{Binding TextPropertyInModel}" ... />
...
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Code behind:
ListBox1.ItemsSource = <collection of models>;
Instead of the <Grid> in <DataTemplate> you can use a Custom Control (Templated Control) or a User Control that you may already have.

You can create an UserControl with the controls you want to use. With your ListBox you do something like:
<ListBox ItemsSource="{Binding Path=YourItemsSource}">
<ListBox.ItemTemplate>
<DataTemplate>
<my:MyUserControl DataContext="{Binding}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
As ItemsSource of your ListBox you could use a ObservableCollection of News and through DataContext="{Binding}" you can bind to the News properties in your UserControl, e.g.:
<UserControl...>
<Image Source="{Binding Path=photoAttachment}"/>
</UserControl>