How can I make platform specific RelativeLayout.XConstraint in XAML? - xamarin

I want to take RelativeLayout.XConstraint with some platform specific value. And also i want to do this in xaml with OnPlatform keyword.
I tried this one without luck,
<RelativeLayout>
<RelativeLayout.XConstraint>
<OnPlatform x:TypeArguments="Constraint" Android="{ConstraintExpression Type=Constant,Constant=6" iOS="{ConstraintExpression Type=Constant,Constant=3}" />
</RelativeLayout.XConstraint>
</RelativeLayout>
And also tried this one https://forums.xamarin.com/discussion/57281/how-can-i-make-platform-specific-relativelayout-xconstraint-in-xaml but it is showing exception "Constraints as specified contain an unsolvable loop".
Here what would be the x:TypeArguments for RelativeLayout.XConstraint or any other approach? Looking forward to any hints/suggestion on this.

You are applying the constraint to the RelativeLayout itself, but constraint are meant to be applied on items of the layout, like this.
<RelativeLayout>
<Label Text="Foo">
<RelativeLayout.XConstraint>
<OnPlatform x:TypeArguments="Constraint" Android="{ConstraintExpression Type=Constant,Constant=6}" iOS="{ConstraintExpression Type=Constant,Constant=3}" />
</RelativeLayout.XConstraint>
</Label>
</RelativeLayout>
Also, you're missing a closing curly brace (}) on the first ConstraintExpression markup.
I tested this, it works just fine with XamlC turned off.
If you are running XF 2.3.3, you might be hitting https://bugzilla.xamarin.com/show_bug.cgi?id=48242, but a fix exists (https://github.com/xamarin/Xamarin.Forms/pull/580) and will be released as part of the coming service release.

Related

Change ToolbarItem Text/Icon parameters

I am new to MAUI. And I haven't done anything complex with Xamarin as well.
The application I am testing with, has Shell navigation. And I can't find a way to change the toolbar items.
I would like to be able to change either the FontSize of the text, or the color of the SVG image. And I do not want those changes to affect the rest of my application, if possible. But if there is no other way, I can live with it.
I have managed to add styling to buttons, Labels etc... If styling is an option to this, it will be even better.
If I am on the wrong path, if you point me out why, I will be also grateful.
Thank you in advance!
If you want to just change a part of pages in your project. You can try to use a <Shell.TitleView> instead of the <Shell.ToolBarItem> in the content pages you want. Such as:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiAppTest.MainPage">
<Shell.TitleView>
<HorizontalStackLayout Margin="5" HorizontalOptions="End">
<Label Text="hello" TextColor="Red" FontSize="Medium" VerticalOptions="Center" HorizontalOptions="End" />
<Image Source="your image" Margin="10" Background="green"/>
</HorizontalStackLayout>
</Shell.TitleView>
You can change style of TabBar in Style.xaml in path \Resources\Style\. Search in file for Shell.TabBarForegroundColor. You will get TargetType="Shell" and this is style for AppShell.xaml.

Visual Studio "Auto" width / height in XAML-Designer

I'm trying to build a UserControl in a UWP application and I'm not able to see its "Auto" size (based on its content) in the XAML-Designer.
I'm aware I can hardcode d:DesignHeight and d:DesignWidth to absolute values, but since the size should be based on its content, I don't want to hardcode the values.
Is there something like d:DesignHeight="Auto" / d:DesignWidth="Auto" ?
E.g. - for the sample User Control below
<UserControl
x:Class="MyCompany.UserControls.MyUserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="using:MyCompany.UserControls.UserControls"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<StackPanel>
<Button Content="First" />
<Button Content="Second" />
</StackPanel>
</UserControl>
I'm seeing
However I'd like to see the size of the control based on its content.
Unfortunately, this is a limitation of the XAML designer. The control will still be sized properly at runtime.
However, this is a very good feedback and I suggest you send it as enhancement request in through Visual Studio feedback, I would definitely upvote it :-) .
If delete d:DesignHeight & d:DesignWidth in user control, it will layout as to it's content.
if it doesn't, then you can add VerticalAlignment & HorizontalAlignment to your user control while using.
<local:MyUserControl2 VerticalAlignment="Top" HorizontalAlignment="Left"
BorderBrush="Red" BorderThickness="1"/>
It should work.

How to create LibVLCSharp custom playback controls in Xamarin Forms?

I've been searching for days now for a guide on how to create the custom playback controls for LibVLCSharp that everyone seems to talk about, which I never found a guid for.
I simply want to create other buttons with event handlers for the bottom playback control panel, I tried this but throws a System.NullReferenceException exception on startup while getting into break mode...
<vlc:MediaPlayerElement MediaPlayer="{Binding MediaPlayer}" LibVLC="{Binding LibVLC}">
<vlc:MediaPlayerElement.PlaybackControls>
<vlc:PlaybackControls>
<vlc:PlaybackControls.ControlTemplate>
<ControlTemplate>
<Grid>
<StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand">
<Button Grid.Column="0" Text="Test 1"/>
<Button Grid.Column="1" Text="Test 1"/>
<Button Grid.Column="2" Text="Test 1"/>
</StackLayout>
</Grid>
</ControlTemplate>
</vlc:PlaybackControls.ControlTemplate>
</vlc:PlaybackControls>
</vlc:MediaPlayerElement.PlaybackControls>
</vlc:MediaPlayerElement>
I want it to act just like the original one (Auto hides, overlays on tapping, etc...) but with my own layout and controls. I also thought about using the existing one and try to override their handler to implement my own code and override the text property for each button to change its icon but no luck of finding any help.
Thanks in advance ^_^
The code you are interested in is here: https://code.videolan.org/videolan/LibVLCSharp/-/blob/3.x/src/LibVLCSharp.Forms/Shared/Themes/Generic.xaml
I also thought about using the existing one and try to override their handler to implement my own code and override the text property for each button to change its icon
That'd be the way to go.
This previous SO question might answer your question: https://stackoverflow.com/a/14217500/4064749
Just create a new Style based on PlaybackControlsStyle, override what you want and then set it on the PlaybackControls element.
I created https://code.videolan.org/videolan/LibVLCSharp/-/issues/309 recently to track the need of a tutorial to customize the MediaElement.
Further docs on style inheritance: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/styles/xaml/inheritance
I finally found the problem which was making exceptions, when I create custom control template which completely correct, the MediaPlayerElement code behind by LibVLCSharp developers itself cannot find the elements with the names defined anymore as they used hardcoded names for the buttons and views instead of using bindings and dynamic setters.
Thus, several workarounds could be made to fix such issue, here are some of my ideas:
Use the generic style documented here and modify it without removing any elements but rather hide them out or overlay them.
Create your own style with controls obtaining the same names of the original ones.
Find a way to modify or maybe create a whole new playback control element using the original one which can be found here and here.
Thanks to mfkl's answer which helped me find out how everything worked under the hood to come up with the explaination, even though this took me a couple of days to figure out.

Android toolbar menu Xamarin Forms custom renderer [NOT RESOLVED]

I am new to custom renderers and can only do basic things like customizing entries, pickers etc. I am really trying to implement an android toolbar menu into my navbar on x.forms and I know I will need to do this through a custom renderer.
I just really do not know where to start. It has proven difficult to find what I need online so I am hoping someone could point me in the right direction.
What I want is something that looks like this:
Which simply drops down and presents a list of options. Thanks in advance.
If you don't need it on iOS then all you need to do is:
<ToolbarItem Title="title" Order="Secondary"/>
If you need it on iOS then even Custom Renderer won't help you.
As lvan said, if you want to implement this like picture, you just add ToolbarItem for ContentPage.
<ContentPage.ToolbarItems>
<ToolbarItem
Name="MenuItem1"
Order="Secondary"
Priority="0"
Text="Item 1" />
<ToolbarItem
Name="MenuItem2"
Order="Secondary"
Priority="1"
Text="Item 2" />
</ContentPage.ToolbarItems>
You don't need to custom render.
You can take a look the following article for more info.
https://xamarinhelp.com/xamarin-forms-toolbar/

Windows Phone 7 Databinding Outside Attributes (Nonstatic Hyperlink text)

I currently have a listBox in a WP7 application that uses databinding to populate it. The problem I'm having though is with this particular line:
<Hyperlink NavigateUri="{Binding LinkUrl}" TargetName="_blank">{Binding Name}</Hyperlink>
It seems that I can't bind things in this way (outside of an element's attributes). All this does is create a hyperlink with the literal text {Binding Name} linked to the url. Instead what I'm looking for is for it to use the actual Name variable in its place.
I've tried googling for an answer and looked into the Inlines attribute, but I keep coming up empty handed.
Any help would be appreciated
In WPF, the space between the tags is usually the 'content' (but not always) and bindable via the Content property. I'm unfamiliar with <Hyperlink> in Windows Phone, but a <HyperlinkButton> should work just as well.
<HyperlinkButton NavigateUri="{Binding LinkUrl}" TargetName="_blank" Content="{Binding Name}"/>
EDIT: For a <Hyperlink> in a <RichTextBox> try this:
<RichTextBox>
<Paragraph>
<Hyperlink>
<Hyperlink.Inlines>
<Run Text="{Binding Name}"/>
</Hyperlink.Inlines>
</Hyperlink>
</Paragraph>
</RichTextBox>

Resources