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
Related
I have a stack panel and it has one grid and I'd like the grid to have same height as stack panel.
I tried playing with VerticalAlignment stretch or height 100% nothing works
I tried setting the values programatically OnNavigatedTo but it doesn't have the effect
Any suggestions to resolve this are welcome
Please find the code below
<StackPanel Grid.Row="0" Grid.RowSpan="4" Background="#CFFF" Visibility="Visible" Orientation="Vertical" Name="ProgressOverlay">
<Grid Name="Overlaygrid"">
<StackPanel VerticalAlignment="Center" Grid.Row="0">
<ProgressBar
IsIndeterminate="True"
IsEnabled="True" Foreground="Black"/>
<TextBlock Visibility="Visible" Foreground="Black" FontSize="25” T HorizontalAlignment="Center" Text="Loading"/>
</StackPanel>
</Grid>
</StackPanel>
A StackPanel takes by default the size needed by its content and shrinks to the size required, while a container control like Grid stretches to the full size available (e.g full page).
If you want to keep the outer StackPanel, you will have to set VerticalAlignment="Stretch" on the StackPanel, not on the Grid.
But since the Grid is the only single content item in your outer StackPanel, you can remove it and move the properties Grid.RowSpan="4" Background="#CFFF" Visibility="Visible" to the Grid. Always try to keep your XAML structure as simple as possible.
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();
}
I have a FlipView which shows the pages of a leaflet as the user swipes through it. I want the user to be able to zoom in a page.
What I found so far is that if I wrap my Image inside a ScrollViewer and set ZoomMode = Enabled, the user can zoom. The strange thing is that if I zoom in the right side of the page, it automatically goes back to the left side after I lift up my fingers from the screen. Any idea how to solve this issue?
XAML:
<Grid Name="grRoot">
<FlipView x:Name="flipView1"
BorderBrush="Black"
ItemsSource="{Binding}">
<FlipView.ItemTemplate>
<DataTemplate>
<ScrollViewer ZoomMode="Enabled" MinZoomFactor="1">
<Image Source="{Binding url_dotcom}"
Stretch="Fill"
Holding="imgHolding"/>
</ScrollViewer>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
</Grid>
Setting the FlipView's width and height:
flipView1.Width = Window.Current.Bounds.Width;
flipView1.Height = Window.Current.Bounds.Height;
Try something like this:
<Grid Name="grRoot">
<FlipView x:Name="flipView1"
BorderBrush="Black"
ItemsSource="{Binding}">
<FlipView.ItemTemplate>
<DataTemplate>
<ScrollViewer ZoomMode="Enabled" MinZoomFactor="1"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto">
<Image Source="{Binding url_dotcom}"
Stretch="Fill"
Holding="imgHolding"
MaxWidth="{Binding ElementName=YourPage, Path=DataContext.Width}"
MaxHeight="{Binding ElementName=YourPage, Path=DataContext.Height}"/>
</ScrollViewer>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
</Grid>
There are 2 important changes here:
Set ScrollViewer's HorizontalScrollBarVisibility and VerticalScrollBarVisibility to Auto
Bind Image's MaxWidth and MaxHeight to Window.Current.Bounds.Width and Window.Current.Bounds.Height respectively exposed through Width and Height public properties inside a ViewModel that is a DataContext to that specific page. This is for scenarios where your FlipView is taking up the whole page. If you need the FlipView to be smaller on the page, then set the Width and Height properties in the ViewModel based on the size you expect/need/want.
EDIT:
More info in my blog post Why is my zoomable ScrollViewer snapping the image to the left?
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">
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.