I'm new in Windows phone 8 development and I have problem to add button on MapLayer.
I'd like to display a button over a map so I just draw it on the map widget like this:
<Grid x:Name="MyMapGrid" Margin="10,-15,15,0" VerticalAlignment="Top" Height="296" >
<maps:Map x:Name="MyMapi" Center="31.765537,35.106812" ZoomLevel="7" Margin="0,0,0,0" VerticalAlignment="Top" Height="296" Width="442" />
<Button x:Name="myCustomButton" Visibility="Visible" Content="" HorizontalAlignment="Left" Margin="347,0,0,0" VerticalAlignment="Top" Width="84" Height="84" BorderThickness="0">
<Button.Background>
<ImageBrush ImageSource="/myZoom.png"/>
</Button.Background>
</Button>
</Grid>
After this action I need to put some icons on the map so I used MapOverlay and MapLayer like this:
Map MyMap = new Map();
MapOverlay overlay = new MapOverlay
{
GeoCoordinate = MyMap.Center,
Content = new Image()
{
Source = new BitmapImage(new Uri("customIcon.png", UriKind.Relative)),
}
};
MapLayer layer = new MapLayer();
layer.Add(overlay);
MyMap.Layers.Add(layer);
MyMapGrid.Children.Add(MyMap);
I also need my button (myCustomButton) will stay visible - but it disappear.
how can I still have some button over the map and also view some icons on it?
Thank you all!
For button Change the path to definite like ImageSource="/Assets/Icon/location.png" with the folder name and make sure that BuildAction is set to content for that image
For icon also try the same.
Related
I have created a button and added pressed event on it. The button height and width are 300x300 and the corner radius is 150. So it looks like circle.
<Button
WidthRequest="300"
HeightRequest="300"
BackgroundColor="Red"
VerticalOptions="Center"
Margin="20,0,20,0"
HorizontalOptions="CenterAndExpand"
CornerRadius="150">
<Button.Behaviors>
<behaviors:EventToCommandBehavior EventName="Pressed"
Command="{Binding ButtonPressedCommand}" />
</Button.Behaviors>
</Button>
The issue is when I click blue area it cahtches pressed event. I want blue area to not catch the event. Now it detects the button as square, not as circle.
Broadly speaking, you shouldn't do that. The touch input is imprecise and unless your button is particularly huge those blue areas on your pic are within the bounds of the imprecise measurement and as such should be treated in that way.
If you really need this, you may try with MR.Gestures.AbsoluteLayout. Here is an example where it provides the exact point that the user has tapped: https://devtut.github.io/xamarin/gestures.html#place-a-pin-where-the-user-touched-the-screen-with-mr-gestures
For iOS, you can create a custom class which inherites UIButton and override the method PointInside.
class CustomiOSButton : UIButton
{
public override bool PointInside(CoreGraphics.CGPoint point, UIKit.UIEvent uievent)
{
bool flag = base.PointInside(point, uievent);
if (flag)
{
UIBezierPath path = UIBezierPath.FromOval(this.Bounds);
if (path.ContainsPoint(point))
{
return true;
}
}
return false;
}
}
I have a Skiasharp canvas that I want to draw markers on when I tap the image. I have this code:
<skia:SKCanvasView Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="3"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
EnableTouchEvents="True"
Touch="MarkDamage">
<!-- The Behaviours element binds the canvas to a command responsible for drawing in it. -->
<skia:SKCanvasView.Behaviors>
<behaviour:PaintSurfaceCommandBehavior Command="{Binding ShowDamageScreenCommand}" />
</skia:SKCanvasView.Behaviors>
</skia:SKCanvasView>
Note the Touch=MarkDamage attribute. That successfully binds to this method:
public void MarkDamage(object sender, SKTouchEventArgs e)
According to this answer, all the things I need to draw on my canvas are inside the parameters I'm passed. But I'm struggling to see how. All I want to do is draw a really simple circle on my canvas when I tap it.
I want to set a background image to my Grid in code behind. I found in internet that we can do using XAML like this.
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Pages.PhotoPage">
<Grid >
<Image Source="background.png" Aspect="AspectFit" />
<!-- Place here the rest of the layout for the page. -->
</Grid >
But how can I set this in code behind. I cannot see anyImage or BackgroundImage property for Grid. Please help me.
Thanks
You can just create an empty Image element in the Grid and set it.
<Grid>
<Image x:Name="BackgroundImage" Aspect="AspectFit" />
<!-- Place here the rest of the layout for the page. -->
</Grid>
And now set it in code:
backgroundImage.Source = ...;
If you are building the whole UI in code, you can do this as well:
var myGrid = new Grid();
var backgroundImage = new Image();
backgroundImage.Source = ...;
myGrid.Children.Add( backgroundImage );
If your Grid has multiple rows and columns, you will want to set the Grid.ColumnSpan and Grid.RowSpan properties on the image to make it span the whole grid.
Here is my code for tabbed bar:
<Alloy>
<Window class="container">
<Label id="label" onClick="doClick">Hello, World</Label>
<TabbedBar id="bb1" platform="ios" backgroundColor="#369" top="50" height="25" width="200">
<!-- The Labels tag sets the TabbedBar.labels property. -->
<Labels>
<!-- Specify text with node text or the title attribute. -->
<!-- Can also specify the enabled, image and width attributes. -->
<Label>One</Label>
<Label>Two</Label>
<Label>Three</Label>
</Labels>
<!-- Place additional views for the TabbedBar here. -->
<Views>
<View backgroundColor='red'>1</View>
<View>2</View>
<View><Label>Does this work!</Label></View>
</Views>
</TabbedBar>
</Window>
</Alloy>
When I click on a tab, how can I make sure that the view corresponds to the button pressed - I know how to do this in titanium but not alloy.
Cheers.
I had the same problem yesterday. I'm sure there must be a better way but I couldn't see anything in the documentation, this was my solution:
var animation = require('alloy/animation');
var previousIndex = $.tabbedBar.getIndex();
$.tabbedBar.addEventListener('click', function(){
var currentIndex = $.tabbedBar.getIndex();
var viewArr = [];
viewArr[0] = $.view1;
viewArr[1] = $.view2;
viewArr[2] = $.view3;
animation.crossFade(viewArr[previousIndex], viewArr[currentIndex], 700)
previousIndex = currentIndex;
});
EDIT:
(In case you don't know, on Android there's a module to give you similar functionality: https://github.com/ricardoalcocer/viewpager but check issue #5 on the original repo as you'll have to incorporate that into any build. On the Android version, you don't need to handle the clicks yourself.)
I'm new in using Titanium. I tried to load some images into a scrollview. But only one image is loading into the scrollview area. Codes are here
XML
<Alloy>
<Window class="container">
<ScrollView showHorizontalScrollIndicator="true" id="Scroll" layout="horizontal">
</ScrollView>
</Window>
</Alloy>
JS
var scrollView = $.Scroll;
var URLs = ["http://static.flickr.com/41/81743961_588dafe12d_o_d.jpg", "http://static.flickr.com/26/64914466_eed02e2a71_o_d.jpg"];
var Views = [];
for (i =0; i < URLs.length ; i++){
Views.push(Ti.UI.createImageView({
image : URLs[i],
width : Ti.UI.SIZE,
height : 300,
top : 0,
left : 0,
})
);
}
Views.forEach(function(view){
scrollView.add(view);
});
$.index.open();
TSS
".container": {
backgroundColor:"white"
},
"#Scroll":{
width:Ti.UI.SIZE,
top: 50,
}
Screenshot
I need your help to find out my mistake.
Thanks
Its in your XML file :
<Alloy>
<Window class="container">
<ScrollView showHorizontalScrollIndicator="true" id="Scroll" layout="horizontal">
</ScrollView>
</Window>
you have set the layout to horizontal, If you will scroll horizontally you will find your second Image there.
Or you can change
horizontal to vertical
The Image will appear below the first Image.
checkout the docs.
Hope it helps.