Develop Reference

Grid wrap in ListView item

I have a very beautiful Grid control with a WebView in it and I am trying for more than 2 hours to wrap it in a ListViewItem.
This is my grid:
<Grid Width="450" Margin="0,-270,0,-200" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<WebView x:Name="Browser" Source="http://someurl.com" Margin="0,0,0,-150/>
</Grid>
and I am very happy with it's design.
When I try to wrap it in a ListViewItem the margins change a lot and I cant seem to find the correct one to make it look exactly the way the old Grid used to.
This is my ListView:
ListView x:Name="MyList1" BorderThickness="0" Width="500">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Width="450" Margin="0,-270,0,-200" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<WebView x:Name="Browser" Source="http://someurl.com" Margin="0,0,0,-150/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
The margins are hiding some part of the WebView. Hence the reason I need exactly the same margin.
I am trying to wrap it to a ListView to be able to create multiple Items.

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

Change XAML Margin in universal app based on resolution

I am working on a Universal app for Wp8.1/WinRt.
For the phone, I have a gridview that displays grids containing stackpanels as 'ItemTemplate'.
The grids have margins specified explicitly, like so:
<GridView ItemsSource="{Binding CurrentItems}">
<GridView.ItemTemplate>
<DataTemplate>
<Grid Width="140" Margin="6,0,6,6" x:Name="I_WANT_TO_ADJUST_MY_MARGINS">
<Border Background="{StaticResource PhoneAccentBrush}"/>
<Grid Height="140" Width="140">
<Image VerticalAlignment="Top" Margin="10" Width="100" Height="100" Source="{Binding Converter={StaticResource ImageConverter}}" HorizontalAlignment="Center" />
</Grid>
<Grid VerticalAlignment="Bottom">
<Border Background="{StaticResource PhoneBackgroundBrush}" Opacity="0.6"/>
<TextBlock Text="{Binding DisplayedName}" Style="{StaticResource BodyTextBlockStyle}" Margin="3" TextWrapping="Wrap"/>
</Grid>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
This looks great on a 6" inch phone giving me a 3 column look. But on a small phone, while I get two columns, the amount of negative space on the right is horrible.
I want to be able to make the margins of the grid I_WANT_TO_ADJUST_MY_MARGINS bigger if the screen is smaller?
Note: This layout is specifically for running on the phone.

This is how I solved it:
Add two datatemplates (big/small screen) to a resources dictionary - I used the page resources, but you can probably use any.
Add a DataTemplateSelector to the page resources. Specify the above two templates as properties, like so:
<local:WpDataTemplateSelector x:Key="WpDataTemplateSelector" BigScreenTemplate="{StaticResource BigScreen}" SmallScreenTemplate="{StaticResource SmallScreen}"></converters:WpDataTemplateSelector>
In the DataTemplateSelector use the following to determine screen width:Window.Current.Bounds.Width
Specify the ItemTemplateSelector property on the GridView

Windows Store App - XAML UI element not visible in C# code

I have the following XAML code and the only element available in the C# code behind are the Grid and the FlipView. How can I make the ScrollViewer, Image or the Viewbox visibile in the code?
XAML:
<Grid x:Name="gridViewPages">
<FlipView x:Name="FlipView1" Loaded="FlipView1_Loaded" Style="{StaticResource FlipViewPreviewIndicator}" Tapped="FlipView1_Tapped">
<FlipView.ItemTemplate>
<DataTemplate>
<ScrollViewer x:Name="pagesScrollViewer" ZoomMode="Enabled"
HorizontalAlignment="Center"
VerticalAlignment="Center"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden"
MinZoomFactor="1.0"
MaxZoomFactor="3.0"
Margin="0"
Width="1500" DoubleTapped="PagesScrollViewer_DoubleTapped">
<Viewbox x:Name="pagesViewbox">
<Image Source="{Binding}"
Height="730"
x:Name="pageImage" Stretch="Uniform" Loaded="MainImage_Loaded"/>
</Viewbox>
</ScrollViewer>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
</Grid>
The flipview is customized and contains also a listview defined in which is not visible in the code too...:
<Page.Resources>
...
<ListView x:Name="pagesPreview" HorizontalAlignment="Center" Height="100" VerticalAlignment="Bottom" Width="Auto"
ItemsSource="{TemplateBinding ItemsSource}"
SelectedItem="{Binding SelectedItem, Mode=TwoWay, RelativeSource={RelativeSource Mode=TemplatedParent}}"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
ScrollViewer.HorizontalScrollMode="Enabled"
ScrollViewer.VerticalScrollMode="Disabled"
Background="AliceBlue"
Opacity="1"
SelectionChanged="pagesPreview_SelectionChanged"
Visibility="Visible">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Image Source="{Binding}" Stretch="UniformToFill"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
...
</Page.Resources>

See the basic concept of the flipview is to have multiple pages to have a flip effect. So whatever the Data template contains is repeated multiple times. So if you want the x:Name to come up then you wont have any success.
There are two ways As per my knowledge :
VisualTreeHelper -> for a better detail of it go through this link
Get elements from data template
you can manually iterate over the flipview elements and track down the children of the flipview. Try that in debug mode you'll get a fair idea of what comes after what. Just keep track of the element at which selected index position you want modified
Thanks.

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.