A bit of a newbie, to using Xamarin forms and I was wondering if there is a way to create the toggle button in the image below in Xamarin forms and that is works on both platforms (Android and iOS).
Would the only way, to achieve this require me to import the material design library.
You could install the plugin Plugin.SegmentedControl from nuget .
iOS
Add initializer to AppDelegate
public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
global::Xamarin.Forms.Forms.Init();
Plugin.Segmented.Control.iOS.SegmentedControlRenderer.Initialize();
...
}
Usage
<control:SegmentedControl
x:Name="SegmentedControl"
SelectedSegment="{Binding SelectedSegment, Mode=TwoWay}"
TintColor="BlueViolet"
SelectedTextColor="White"
DisabledColor="Gray"
BorderColor="Black"
BorderWidth="2.0"
FontSize="Small"
FontFamily="{StaticResource PlatformFontName}"
Margin="8,8,8,8"
SegmentSelectedCommand="{Binding SegmentChangedCommand}"
OnElementChildrenChanging="OnElementChildrenChanging"
ItemsSource="{Binding SegmentStringSource}">
<!--<control:SegmentedControl.Children>
<control:SegmentedControlOption Text="{Binding ChangeText}"/>
<control:SegmentedControlOption Text="Item 2"/>
<control:SegmentedControlOption Text="Item 3"/>
<control:SegmentedControlOption Text="Item 4"/>
</control:SegmentedControl.Children>-->
</control:SegmentedControl>
Related
So I have been trying to create compositions of the animations, where I will turn on and off one particular animation according to how many times the animation is repeated, and according to some other enum statuses, but on iOS, OnRepeatAnimation event is not triggering at all, so any help here!
<forms:AnimationView
HeightRequest="{Binding Source={RelativeSource AncestorType={x:Type viewModels:HomePageViewModel}}, Path=PresenceSimulationLoaderCircleSize}"
WidthRequest="{Binding Source={RelativeSource AncestorType={x:Type viewModels:HomePageViewModel}}, Path=PresenceSimulationLoaderCircleSize}"
Margin="5,6,0,0"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
AnimationSource="AssetOrBundle"
Scale="1.6"
RepeatMode="Infinite"
IsVisible="{Binding AnimationStatus, Converter={StaticResource AnimationIsEndingShouldBeActive}}"
OnRepeatAnimation="TurnOffTheAnimationOnEnd"
OnStopAnimation="TurnOnTheAnimationBeforeEnd"
Animation="{DynamicResource LoaderEndAnimation}"
/>
Im trying to click Image,box or label object which in Carousel views content page. Android works fine but IOS not, why? Can you help or explain?
Here is simple demo:
<CarouselPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="CarouselPageNavigation.MainPage">
<ContentPage>
<ContentPage.Padding>
<OnPlatform x:TypeArguments="Thickness">
<On Platform="iOS, Android" Value="0,40,0,0" />
</OnPlatform>
</ContentPage.Padding>
<StackLayout>
<Label Text="Green" FontSize="Medium" HorizontalOptions="Center" />
<BoxView Color="Green" WidthRequest="200" HeightRequest="200" HorizontalOptions="Center" VerticalOptions="CenterAndExpand">
<BoxView.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"></TapGestureRecognizer>
</BoxView.GestureRecognizers>
</BoxView>
</StackLayout>
</ContentPage>
Here is .cs
private void TapGestureRecognizer_Tapped(object sender, System.EventArgs e)
{
DisplayAlert("sdada", "sdada", "sdadada");
}
I solved it update to beta IOS SDK update on mac side before xamarin.forms 4.5.0.617.
Now this issue has been fixed , you can update Xamrin Forms to the latest version 4.5.0.617 , then it will work in iOS 13.4 .
Thanks Junior Jiang
I have an Android/iOS/UWP Xamarin.Forms app. At the top of the screen where the TitleView is I want to place a button that leads the user to a page that shows them more information about my app.
I tried:
<NavigationPage.TitleView>
<StackLayout>
<Label Text="My App" FontSize="Large"></Label>
<Image x:Name="info"
Source="information.png"
WidthRequest="20"
HeightRequest="20"
/>
</StackLayout>
</NavigationPage.TitleView>
On UWP this result in the title of the app being shown in addition to MyApp in the TitleView. However in Android, once I add a custom TitleView, the title of the app isn't shown anymore. How do I get uniform behavior where the title text shows once on both platforms?
The default behavior is different between Android and UWP. In Android and iOS, if you custom the title view of navigation bar, the title will no long appear.
You can use OnPlatform as Evgeniy Stepanov mentioned to add additional titleLabel to show the title in iOS and Android.
You can simplily add a ToolbarItem to place the Info button on the right side of the navigationbar:
public MainPage()
{
InitializeComponent();
Title = "My App";
ToolbarItems.Add(new ToolbarItem("", "info", () => { goToInfoPage(); }, ToolbarItemOrder.Primary, 1));
}
public void goToInfoPage() {
}
Have you added "information.png" image to android resources? Check it
Try to use OnPlatform
<StackLayout Orientation="Horizontal">
<Label Text="My App" FontSize="Large"/>
<Image x:Name="info" WidthRequest="20" HeightRequest="20">
<Image.Source>
<OnPlatform UWP="logo.png" Default="logo" x:DataType="ImageSource"/>
</Image.Source>
</Image>
</StackLayout>
I have the following tableview set up in XAML for Xamarin Forms:
<TableView Intent="Menu">
<TableRoot>
<TableSection Title="Categories">
<ViewCell>
<StackLayout Orientation="Horizontal" VerticalOptions="Center" Padding="20,0,20,0">
<Label Text="Category" XAlign="Center"/>
<Label Text=">" HorizontalOptions="EndAndExpand" XAlign="Center"/>
</StackLayout>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
Can anyone let me know how to implement the clicking of the row to open another content page xamarin forms? Or do I have to separately implement in the iOS side?
Have a look at the Xamarin Documentation about the TapGestureRecognizer.
You can apply that method here as well.
I'm not completely sure if you can apply it directly to the ViewCell but you should be able to do it on the StackLayout.
So it would be something like:
<TableView Intent="Menu">
<TableRoot>
<TableSection Title="Categories">
<ViewCell>
<StackLayout Orientation="Horizontal" VerticalOptions="Center" Padding="20,0,20,0">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer
Tapped="OnTapGestureRecognizerTapped"
NumberOfTapsRequired="1" />
</StackLayout.GestureRecognizers>
<Label Text="Category" XAlign="Center"/>
<Label Text=">" HorizontalOptions="EndAndExpand" XAlign="Center"/>
</StackLayout>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
And then of course implement the event method.
You could also add the Tapped method to the ViewCell itself.
Like this:
<ViewCell Tapped="Handle_Cell_Tapped">
</View>
Then write your Handle_Cell_Tapped event handler in the code behind.
You can use the ItemTappedEventArgsConverter from Xamarin.Comunity.Toolkit to do this. It's pretty simple and straight forward. Here is a link to the documentation and there are also some samples.
Xamarin Community Toolkit - ItemTappedEventArgsConverter
I am porting an iPhone app to WP7 which contains a map with several markers/pushpins that I get from a webservice (location, icon and title).
I have setup the XAML required to display the map as well as some code for the pushpin:
<phone:PhoneApplicationPage.Resources>
<ControlTemplate x:Key="customPushpin" TargetType="my:Pushpin">
<Image Height="39" Source="Resources/Icons/Pushpins/pinGreen.png" Stretch="Fill" Width="32"/>
</ControlTemplate>
</phone:PhoneApplicationPage.Resources>
<Grid x:Name="LayoutRoot" Background="Transparent">
<my:Map Height="Auto" HorizontalAlignment="Stretch" Margin="0" x:Name="Map"
VerticalAlignment="Stretch" Width="Auto" CredentialsProvider="{Binding CredentialsProvider}"
CopyrightVisibility="Collapsed" LogoVisibility="Collapsed" Center="{Binding Mode=TwoWay, Path=Center}"
ZoomBarVisibility="Visible"
ZoomLevel="{Binding Zoom, Mode=TwoWay}">
<my:MapItemsControl ItemsSource="{Binding Pushpins}">
<my:MapItemsControl.ItemTemplate>
<DataTemplate>
<my:Pushpin MouseLeftButtonUp="Pushpin_MouseLeftButtonUp"
Location="{Binding Location}"
Template="{StaticResource customPushpin}">
</my:Pushpin>
</DataTemplate>
</my:MapItemsControl.ItemTemplate>
</my:MapItemsControl>
</my:Map>
</Grid>
I am looking for a way to add some sort of bubble when the user clicks on the pushpin. I have looked a bit into infoboxes/tooltips but since they work on hover, that's not something I can use for the phone (tap/click).
I am guessing there's no similar control in WP7 that creates a bubble - how could I go about creating something similar?
Thanks in advance,
Alex
You could simply put a square Border inside LayoutRoot with Visibility="Collapsed", then when you click your pushpin you update its content and make it visible.
Just make sure to put it after your map control (otherwise it will be rendered behind the map and will consequently be invisible).
The easiest way to achieve this is to Show/Hide the Content of the Pushpin on Tap instead of MouseLeftButtonUp because of some performance considerations.
void pushPin_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
this.border.Visibility = System.Windows.Visibility.Visible;
//stop the event from going to the parent map control
e.Handled = true;
}
private void map_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
this.border.Visibility = System.Windows.Visibility.Collapsed;
}
You could create a custom popup.
A great video that exaplains how to do this is located here.
Other solution is using the ContextMenu from the Silverlight toolkit for Windows Phone!
Just go to the Coding4Fun page on CodePlex and download it ( it contains the toolkit ) and in your XAML inside the PushPin definition add following:
<map:Pushpin x:Name="currentLocation">
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu IsZoomEnabled="False">
<toolkit:MenuItem Header="this is menu item 1" Click="MenuItem_Click" />
<toolkit:MenuItem Header="this is menu item 2" Click="MenuItem_Click" />
<toolkit:MenuItem Header="this is menu item 3" Click="MenuItem_Click" />
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu></map:Pushpin>
This way, when you tap and hold the pushpin, you'll get the contectmenu!
( good example also found here: example )