on windows phone 8, i have a page that contains a map on double click the zoom level increases. i need on click to place a landmark and get the coordinates of that landmark.
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<StackPanel Name="mapContainer" Grid.Row="0" >
<maps:Map Name="Mymap" VerticalAlignment="Top" Height="{Binding ElementName=mapContainer, Path=ActualHeight}" Width="{Binding ElementName=ContentPanel,Path=ActualWidth}" LandmarksEnabled="True" MouseLeftButtonDown="Mymap_MouseLeftButtonDown"/>
</StackPanel>
Add a tap handler to the map.
And have the handler as follows ::
private void MapControl_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
GeoCoordinate geocoordinate = this.MapControl.ConvertViewportPointToGeoCoordinate(e.GetPosition(this.MapControl));
}
You will have the map coordinates in the geocoordinate object.
Hope i got the question right and the solution helps.
You can convert the clicked pixel location to a coordinate with Map.ConvertViewportPointToGeoCoordinate Method
Related
I need the items in my listView to have a height so it the list exactly fits the screen. Here's my code given below. I tried setting the Height of rows in my grid to a custom value, but that would work well, fitting the screen in some devices, while there would be an empty space in other devices due to a different screen size.
<ListView
ItemsSource="{Binding PenStocks}"
ItemSelected="Event_ItemSelected"
ItemTapped="Event_ItemTapped"
SeparatorVisibility="None"
Margin="5,5,5,0"
>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="9" ColumnSpacing="0" RowSpacing="0" HorizontalOptions="FillAndExpand" >
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.408*"/>
<ColumnDefinition Width="0.051*"/>
<ColumnDefinition Width="0.252*"/>
<ColumnDefinition Width="0.033*"/>
<ColumnDefinition Width="0.153*"/>
<ColumnDefinition Width="0.102*"/>
</Grid.ColumnDefinitions>
What can I do for this? Please help me and thank you!
EDIT:
Rewrote this to use a bindablelayout.
View:
<StackLayout x:Name="ParentFlexLayout" BindableLayout.ItemsSource="{Binding Colors}" HorizontalOptions="FillAndExpand" >
<BindableLayout.ItemTemplate>
<DataTemplate>
<Frame BackgroundColor="{Binding .}" VerticalOptions="FillAndExpand"/>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
Here we use a bindablelayout - it's very flexible, so you could give it at go and see it it meets your needs
Codebehind:
public ObservableCollection<Color> Colors { get; set; } = new ObservableCollection<Color>();
public MainPage()
{
InitializeComponent();
BindingContext = this;
Colors.Add(Color.Blue);
Colors.Add(Color.Red);
Colors.Add(Color.Green);
Colors.Add(Color.Yellow);
}
Result:
If you want to your listViewItem to stretch to the height of it's inner control you can use
<RowDefinition Height="Auto"/>
It would be better if you share some screen shots.
Or you can check out the below post:
RowDefinition Height not working when using bound property on Grid in ListView?
I tried using an absolutelayout within the viewcell, but when I do, it doesn't work either.
<AbsoluteLayout AbsoluteLayout.LayoutBounds="0,0,1,0.167" AbsoluteLayout.LayoutFlags="All">
I am trying to fill a Button with an Image. The button resides within a Grid. The problem is that the image is not fully filling the button. I have also tried to use the ImageButton control.
Here is how I am building my U.I:
<Grid Grid.Row="1" Grid.Column="1" x:Name="VotingGrid" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="45*" />
<ColumnDefinition Width="10*" />
<ColumnDefinition Width="45*" />
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.Column="0" Image="yay.png" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
<Button Grid.Row="0" Grid.Column="2" Image="meh.png" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
</Grid>
It currently looks like the image attached below, but I'd like to image to fill my button.
Any help will be appreciated!
Try to place an image instead of button.
You can make use of Tap Gesture Gesture Recognizer to take click events.
Try something like this :
<Image Source="tapped.jpg">
<Image.GestureRecognizers>
<TapGestureRecognizer
Tapped="OnTapGestureRecognizerTapped" />
</Image.GestureRecognizers>
</Image>
The code for the event handler
void OnTapGestureRecognizerTapped(object sender, EventArgs args) {
var imageSender = (Image)sender;
// Do something
DisplayAlert ("Alert", "Tap gesture recoganised", "OK");
}
Refer : Adding a Tap Gesture Gesture Recognizer
I have not used it myself but maybe you can use this one from XLab
https://github.com/XLabs/Xamarin-Forms-Labs/wiki/ImageButton
First of all YES I've read all the suggested "Questions that may already have your answer", so I belive this is not a dublicate.
I have this grid on a Page:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="70"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="Please sign below." Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Image x:Name="SignImage" />
</Grid>
<Grid Background="Transparent" Grid.Row="2" Margin="12,0,10,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<Button x:Name="ClearButton" Content="Clear" Grid.Column="1"/>
<Button x:Name="OkButton" Content="Ok" Grid.Column="2"/>
</Grid>
</Grid>
Then this CodeBehind:
public MainPage()
{
InitializeComponent();
this.Loaded += MainPage_Loaded;
// Sample code to localize the ApplicationBar
//BuildLocalizedApplicationBar();
}
....
private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
MessageBox.Show($"SignImage.ActualWidth: {SignImage.ActualWidth}, SignImage.ActualWidth: {SignImage.ActualWidth} ");
}
The problem is that the size of my Image is 0 (zero).
How do I make my Image fill out the cell I've placed it in?
First there is difference between * and Auto. Please do check the size of the main grid. "*" means stretch to fill the available space, and is a fraction, so if one row is * and the other row is 2* then the second row will be twice the size of the first row.
Auto means it takes whatever/or only space it needs.
If you have set the size of whole Grid to a small height then there will be a problem. Set the MinHeight for the Main Grid component.
Second you have not set the image for SignImage with a size which mean you will obviously get ActualWidth and ActualHeight as Zero. The image tag is empty in which no Source is set.
<Image x:Name="SignImage" Source="C:\Users\Administrator\Pictures\user-thumbnail.png"/>
Check after setting the image source if you are getting the ActualWidth and ActualHeight
Have a look at this image I have written your code. You can see that for Grid 0 and 2 there is Height set for Grid 1 there is no Height set as you have written * for it so it is necessary to set the height to parent.
Now look at this image I have set the height for the parent element as 200 and hence you can see the Gird 1 is visible and the height is not 0.
So it is necessary to set the height or set the image source for the height not to be zero.
I know that this question has been posted about a thousand times, but I did not find a solution that solved my problem.
I've got a LongListSelector with this ItemTemplate:
<DataTemplate x:Key="AddrBookItemTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock FontWeight="Bold" Text="{Binding Name}" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="0" Grid.Row="0" />
<Button x:Name="itembutton" CommandParameter="{Binding ItemID}" Content="{Binding ButtonCaption}" Width="150" HorizontalAlignment="Right" Grid.Column="1" Grid.Row="0" Click="ItemButtonClick"/>
</Grid>
</DataTemplate>
So what happens is simply that I get this beautiful error message that I posted in the title. And I do not have a clue, why?!
private void ItemButtonClick(object sender, RoutedEventArgs e)
{
if (sender == this.itemButton) {
....
From the DataTemplate it looks like you're showing this button in a container like a ListBox or LongListSelector.
That means that there isn't an itembutton in this scope (presumably this is either UserControl or PhoneApplicationPage): there is in fact one for each of your ListBoxItems!
You'll have to find another way of finding your button.
Update:
You should find that the DataContext of your button matches the item of the list it is contained in. That's probably the easiest way of proceeding: however if all else fails you can use the Tag property as you suggest.
Like:
private void ItemButtonClick(object sender, RoutedEventArgs e)
{
var theButton = (Button) sender;
var myItem = (TypeOfAnObjectInMyList) theButton.DataContext;
doSomethingWithMyItem(myItem);
I have a Silverlight 4 application. The MainPage which is the RootVisual of the application has many controls on it - one of which is a user control called VideoPlayerView. What I would like is when a user clicks on the fullscreen icon on this control, for this control to "pop out" of the page and go full screen (i.e. all the other controls on this page must be hidden and only the VideoPlayerView control would show fullscreen).
The MainPage has Row and Column definitions set up as follows:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="143"/>
<ColumnDefinition Width="4"/>
<ColumnDefinition Width="81"/>
<ColumnDefinition Width="27"/>
<ColumnDefinition Width="624"/>
<ColumnDefinition Width="125"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="15"/>
<RowDefinition Height="40"/>
<RowDefinition Height="10"/>
<RowDefinition Height="21"/>
<RowDefinition Height="10"/>
<RowDefinition Height="199"/>
<RowDefinition Height="220"/>
<RowDefinition Height="21"/>
<RowDefinition Height="160"/>
<RowDefinition Height="26"/>
<RowDefinition Height="45"/>
</Grid.RowDefinitions>
When the VideoPlayerView is made full screen, I assume it needs to go to the 0,0 position and those definitions should be set to Auto at that point?
I have tried removing the VideoPlayerView control from its current parent, clearing the MainPage.LayoutRoot's children collection and adding the videoplayerview to the MainPage's Layoutroot - but for some reason the VideoPlayerView only showed in the top 1/4 of the screen.
If anyone knows of a way of doing this please let me know!
Probably the reason why the video player is filling only a quarter of the screen is because it is added by default to the first row and column of the grid. If you want it to span several rows and columns you have to use Grid.ColumnSpan=8 and Grid.RowSpan=11 so that it fills the whole screen.
Also, it is not strictly necessary for you to remove all the controls from the children collection; turning their visibility to Collapsed should be enough.
You could handle all these changes using visual states and then you could do something like:
VisualStateManager.GoToState(this, "Normal", true);
and:
VisualStateManager.GoToState(this, "Fullscreen", true);
The problem was in our XAML - there was a Clip property set on the video player view that was cutting off the video in full screen mode. Removing this property in full screen mode solved the problem.