Wrapping an MPVolumeView inside 2 Stack Layouts (Xamarin.IOS) - xamarin

I am creating a control based on a generic View that works with a custom renderer based on an iOS MPVolumeView, which is the simple control that allows you to select an alternate output route for audio in your app (i.e. Bluetooth Speaker). The code works just fine if I wrap inside a single stack layout, but not if it's inside two stack layouts. My XAML looks like this... very basic:
<?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="DABApp.DabTestPage" xmlns:local="clr-namespace:DABApp;assembly=DABApp">
<ContentPage.Content>
<StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="Red">
<StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand" VerticalOptions="FillAndExpand">
<local:AudioOutputView />
</StackLayout>
</StackLayout>
</ContentPage.Content>
</ContentPage>
And here's the guts of my custom renderer:
[assembly: ExportRenderer(typeof(AudioOutputView), typeof(iosAudioOutputViewRenderer))]
namespace DABApp.iOS
{
public class iosAudioOutputViewRenderer: ViewRenderer<AudioOutputView, UIView>
{
MPVolumeView view;
protected override void OnElementChanged(ElementChangedEventArgs<AudioOutputView> e)
{
base.OnElementChanged(e);
if (Control == null)
{
view = new MPVolumeView()
{
ShowsRouteButton = true,
ShowsVolumeSlider = false,
};
SetNativeControl(view);
}
}
}
}
With this XAML and code, when I push the page onto the nav stack async, the page won't even show. If I remove one of the StackLayouts, it works fine.
I changed my IOS control in the CustomRenderer to a simple UILabel and this works fine... so it looks like it has something to do with putting the MPVolumeView inside 2 StackLayouts. I need to be able to do this because of the layout requirements of my app, and it doesn't make any sense why 1 StackLayout is fine, but 2 isn't, and only for this native control.
Any ideas?

Related

Xamarin.Forms.Map is not working for UWP platform. How to make it work?

I'm trying to load street map using Xamarin.Forms.Map plugin in my project for UWP app. For that I have also get the token from MSDN. Here is what I have done:
MapePage.xaml
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:vm="clr-namespace:Map_POC.ViewModels"
xmlns:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"
xmlns:local="clr-namespace:Map_POC.CustomControls"
x:Class="Map_POC.Views.MapePage">
<ContentPage.BindingContext>
<vm:MapePageViewModel />
</ContentPage.BindingContext>
<ContentPage.Content>
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<maps:Map
x:Name="MyMap"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
MapType="Street" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
MapePage.xaml.cs
public MapePage()
{
InitializeComponent();
Position position = new Position(-37.8141, 144.9633);
var pin = new Pin
{
Type = PinType.Place,
Position = position,
Label = "I'm a Pin",
};
MyMap.Pins.Add(pin);
MyMap.MoveToRegion(
MapSpan.FromCenterAndRadius(
position, Distance.FromMiles(1)));
}
MainPage.xaml.cs (In UWP Solution)
public sealed partial class MainPage
{
public MainPage()
{
this.InitializeComponent();
Xamarin.FormsMaps.Init(Keys.UWPMapToken);
Windows.Services.Maps.MapService.ServiceToken = Keys.UWPMapToken;
LoadApplication(new Map_POC.App());
}
}
Output: With hybrid map it shows map but not showing pin and locations properly.
Other thing apart from this it not works in offline mode, can we cache map for offline mode?
Can we draw a polygon and coordinates covered inside the polygon can be clicked individually or not?
Any help on this will be highly appreciated.

How to add the ripple effect in Xamarin label or image?

I am looking at implementing a ripple effect on label text or in image.So how to add the ripple effect on any label or in image?
You can use the package TouchView from nuget
Add nuget package to your Xamarin.Forms .netStandard/PCL project and to your platform-specific projects (iOS and Android)
iOS: add TouchViewRenderer.Initialize() line to your AppDelegate
(preserve from linker)
using TouchEffect.iOS;
namespace YourApp.iOS
{
public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
{
public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
global::Xamarin.Forms.Forms.Init();
TouchViewRenderer.Initialize();
LoadApplication(new App());
return base.FinishedLaunching(app, options);
}
}
}
in xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:YourApp"
xmlns:touch="clr-namespace:TouchEffect;assembly=TouchEffect"
x:Class="App11.MainPage">
<StackLayout>
<touch:TouchView
RegularBackgroundColor="LightGray"
PressedBackgroundColor="Gray"
PressedOpacity="1"
PressedAnimationDuration="100"
RegularAnimationDuration="100"
Padding="10, 5"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand"
Completed="Handle_TouchCompleted"
>
<Label Text="Click Me"
TextColor="Black"
FontSize="30"/>
</touch:TouchView>
</StackLayout>
</ContentPage>
in code behind
private void Handle_TouchCompleted(TouchEffect.TouchView sender, TouchEffect.EventArgs.TouchCompletedEventArgs args)
{
// do something you want
}
Use XamarinCommunityToolkit Documentation YouTube Resources
In your xaml
xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
Use exactly NativeAnimation
<Frame xct:TouchEffect.NativeAnimation="True"> </Frame>
You can provide ripple and other effects using TouchEffect Library from AndreiMisiukevich.For more info: https://github.com/AndreiMisiukevich/TouchEffect
And another library is also available. https://github.com/mrxten/XamEffects
Both are well documented.

Xamarin Forms Search Bar with Picker

I have a xamarin forms app and I would like to use the search bar control that upon focus will pull up a picker. Is there anyway I can extend the search bar to provide this functionality? In other words I don’t want the user to enter text in the search bar box, rather it’s selected from the pick list. Any examples would be appreciated.
You can look at using the XFX Controls for Xamarin Forms.
https://github.com/XamFormsExtended/Xfx.Controls
In the top of your page add a namespace reference to :
xmlns:xfx="clr-namespace:Xfx;assembly=Xfx.Controls"
Then you use the control as follows:
<!-- XfxComboBox-->
<xfx:XfxComboBox
Placeholder="Select make"
SelectedItem="{Binding SelectedVehicleMake}"
Text="{Binding Description}"
ItemsSource="{Binding AssetMakes}"/>
This control allows to bind to a item source and a selected Item
Picker dialog is shown when you call Focus() on the element, so you could just place a hidden Picker and call the method from the Click Handler of the ToolbarItem.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyApp.Views.MyPage"
Title="My Page Title"
x:Name="MyPage">
<ContentPage.ToolbarItems>
<ToolbarItem Text="ShowPicker" Clicked="ShowPicker">
</ToolbarItem>
</ContentPage.ToolbarItems>
<ContentPage.Content>
<DatePicker x:Name="MyPicker" IsVisible="false" />
</ContentPage.Content>
</ContentPage>
namespace MyApp.Views
{
public partial class MyPage : ContentPage
{
public ItemsPage()
{
InitializeComponent();
}
void ShowPicker(object sender, EventArgs e)
{
MyPicker.Focus();
}
}
}

Custom navigation bar using Xamarin forms with prism broken

I'm using Prism Library for Xamarin.Forms.
And I'm going to create custom navigation bar via Control template. (Reason of creating custom navigation bar - I didn't find solution to make navigation bar transparent for display background image, also I will probably customize my navigation bar and add some controls on it).
<ControlTemplate x:Key="NavigationPageTemplate">
<AbsoluteLayout BackgroundColor="Transparent">
<Image AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All"
Aspect="AspectFill"
Source="{TemplateBinding BackgroundImageEx}" />
<ContentView Padding="0,50,0,0"
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All">
<ContentPresenter />
</ContentView>
<!--Navigation bar started here -->
<ContentView AbsoluteLayout.LayoutBounds="0,0,1,AutoSize"
AbsoluteLayout.LayoutFlags="PositionProportional, WidthProportional"
BackgroundColor="Transparent">
<ContentView.Padding>
<OnPlatform x:TypeArguments="Thickness"
Android="10"
iOS="10, 20, 10, 0" />
</ContentView.Padding>
<controls:ImageButton Command="{TemplateBinding GoBackCommand}"
HeightRequest="30"
HorizontalOptions="StartAndExpand"
Source="ic_back.png"
WidthRequest="30">
</controls:ImageButton>
</ContentView>
</AbsoluteLayout>
</ControlTemplate>
And my problem is to process back button press with Prism Navigation.
I've tried to process click on MyApp.xaml.cs file.
private void Button_OnClicked(object sender, EventArgs e)
{
NavigationService.GoBackAsync();
}
And it seems to have different navigation stack because it shows after press my first page.
I had Navigation this way:
Navigate("FirstPage"); -> Navigate(MasterDetail/NavigationPage/ViewA) -> Navigate("ViewB")
ViewB - uses Control template.
When I click custom back button on ViewB NavigationService back me to FirstPage. It is incorrect for me. I should back to ViewA!
Another question Should first page be saved when we change App.MainPage?
See the discussion of described problem on https://github.com/PrismLibrary/Prism/issues/1262
To navigate back from ViewA to FirstPage you can intercept the back event and go back again if a variable is passed with a specific value from the ViewB page. Code Example:
Sender:
var navigationParams = new NavigationParameters();
navigationParams.Add("yourVariableName", "YourVariableValue");
_navigationService.GoBackAsync(navigationParams);
Receiver:
public void OnNavigatedTo(NavigationParameters parameters)
{
string myVar = null;
if (parameters.ContainsKey("yourVariableName"))
{
myVar = (string)parameters["yourVariableName"];
}
if(myVar=="YourVariableValue"){
NavigationService.GoBackAsync();
}
}
I don't understand your second question.

Can I "include" a XAML file? [duplicate]

I am trying a new approach i.e. XAML to make application in xamarin.forms. At this time i am facing an issue to reuse my stack layout which is having a image and label. How i can reuse my layout in different pages using XAML.
You can actually define your custom component in a separate XAML file and then just link the component wherever you need it.
For example a label with image can be grouped together in a dedicated XAML file:
<?xml version="1.0" encoding="utf-8" ?>
<StackLayout xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="UserControls.ImageWithTitle"
VerticalOptions="Center" HorizontalOptions="Center" >
<Label HorizontalOptions="Center"
x:Name="TitleLabel" />
<Image Source="noimage.png" />
</StackLayout>
On the .cs file I've defined a binding for the TitleLabel
public string TitleName
{
get { return TitleLabel.Text; }
set { TitleLabel.Text = value; }
}
So when you include the component on another layout, you can assign the label value directly (or via a binding):
<usercontrols:ImageWithTitle TitleName="Home"/>

Resources