I am working on a Xamarin.Forms project and am having issues with the scaling of images with Windows Phone. Windows and Android
I'm using a Grid to display all of the icons, here is the code I used for 1 image button.
<Button Image="cam.png"
VerticalOptions="Center"
Grid.Row="0" Grid.Column="0"
BorderColor="Transparent"
BackgroundColor="Transparent"
Clicked="OnTrafficClicked"/>
I've found a couple similar posts about this, but I don't understand how I would implement scaling on platform when there are multiple images.
I tried this, but am unable to run the program
<Image.Scale>
<OnPlatform x:TypeArguments="Scale"
WinPhone="1.5" />
</Image.Scale>
https://forums.xamarin.com/discussion/19525/image-source-with-onplatform-in-xaml
I was able to figure it out, in case anyone has this same issue this is what I did:
<ContentPage.Resources>
<ResourceDictionary>
<OnPlatform x:Key="stdScaling" x:TypeArguments="x:Double"
iOS="1.0"
Android="1.0"
WinPhone="2.5" />
</ResourceDictionary>
</ContentPage.Resources>
then for the button, I put
Scale= "{StaticResource stdScaling}"
Related
I have been dipping my toes in the .NET Maui framework, but unfortunately so far it has been quite disappointing. There seem to be multiple errors related to Shell (title view not working properly) and controls themselves. I have the following main page xaml file:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiApp1.MainPage">
<StackLayout Background="#111111" >
<Frame HasShadow="True" Margin="10" CornerRadius="10" BackgroundColor="#222222">
<StackLayout Spacing="30">
<Grid ColumnDefinitions="30,*">
<Label Text="R" FontSize="Medium" TextColor="White" />
<Slider GridLayout.Column="1" MinimumTrackColor="Red" ThumbColor="Red" MaximumTrackColor="#AAAAAA" />
</Grid>
<Grid ColumnDefinitions="30,*">
<Label Text="G" FontSize="Medium" TextColor="White" />
<Slider GridLayout.Column="1" MinimumTrackColor="#7FFF00" ThumbColor="#7FFF00" MaximumTrackColor="#AAAAAA" />
</Grid>
</StackLayout>
</Frame>
</StackLayout>
</ContentPage>
which is just a stack layout with a single frame that houses two sliders with labels. However, the two sliders seem to have a predefined width, as they are not filling the remaining space:
As soon as I add anything to any of the controls in the xaml while the app is running, for example a green background to the first grid, both sliders resize to the correct size:
However, when I reload the application with this change, the sliders go back to the wrong size:
There are additional issues that I encountered as well, when placing this content page as a flyout item in the shell where android behaviour was as described here, but additionally the Sliders are not interactable in Windows version. In this example with a clean project they do work in Windows version.
Try with any third-party packages like syncfusion, etc. to meet your requirements.
So I have an odd thing happening with last Xamarin update and I am not sure what to do about it.
I have a view
<ContentView.Content>
<AbsoluteLayout WidthRequest="100" HeightRequest="100">
<Button x:Name="BackgroundButton" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" />
<Image x:Name="Icon" InputTransparent="True" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" Margin="20,15,20,25"/>
<Label x:Name="CountLabel" Style="{StaticResource HubButtonLabel}" HorizontalTextAlignment="End" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" />
<Label x:Name="ButtonLabel" Style="{StaticResource HubButtonLabel}" HorizontalTextAlignment="Center" VerticalTextAlignment="End" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" />
</AbsoluteLayout>
</ContentView.Content>
</ContentView>
Is basically just a button wrapper, with some extra icons, and text. I have a few of these in the project of different layouts and styles. Until the last update they worked fine. Now the button renders overtop of everything else. I can confirm that by setting the button color to something semi transparent.
This only happens on Android, it still works as expected on ios
Anyone have a fix for that? or do I need to rework all these views?
Update - So while this isn't really a fix, but also kind of is. If I swap out the Button for an ImageButton - they work again as expected on both platforms.
Bug perhaps with button on Android?
Got an answer on another forum. - Apparently it is a known bug with an easy fix, https://forums.xamarin.com/discussion/comment/394729
Put
global::Xamarin.Forms.Forms.SetFlags("UseLegacyRenderers");
Before the xamarin init in Main Activity Oncreate.
I have a xaml page where I set Background Image to some Image and it works good on Emulator(API 27) and Android 9.0 real device. When I deploy the same app to another device (Android 8.1 and 7.0), the background Image does not show in these devices.
I have created a new page and added just the background image property and it turns out the same. Worked well on Android 9.0 and Emulator but not on Android 8.1 and lower versions of android. I have also changed the target framework version of my project to API 27 and the minimum to allow Android 7.0 and that didn't help either.
I expect the background image to show across all the devices I deploy on.
This is how I am defining my image in my xaml page:
<AbsoluteLayout>
<Image Source="Mop3.jpg" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" Aspect="AspectFill"></Image>
<StackLayout AbsoluteLayout.LayoutBounds="0.5,0.4,1,0.3" AbsoluteLayout.LayoutFlags="All" Spacing="10">
<Label Text="Cleanliness" TextColor="White" HorizontalTextAlignment="Center" FontSize="Medium" FontAttributes="Italic"></Label>
<Label Text="Starts with us" TextColor="White" HorizontalTextAlignment="Center" FontSize="40" FontAttributes="Bold"></Label>
<Button x:Name="Learnbtn" Text="Learn more" TextColor="White" BackgroundColor="Purple" BorderColor="Purple" CornerRadius="40" BorderWidth="1"
HorizontalOptions="Center" HeightRequest="50" WidthRequest="130" Clicked="GotoHowPage"></Button>
</StackLayout>
<StackLayout AbsoluteLayout.LayoutBounds="0,0.99,1,0.05" AbsoluteLayout.LayoutFlags="All"
Padding="0">
<Button Text="Get Started" BackgroundColor="Transparent" TextColor="White" FontAttributes="Bold" FontSize="Large" BorderRadius="5" Clicked="GotoBothPage"></Button>
</StackLayout>
</AbsoluteLayout>
The Mop3.jpg is the image not showing on other real devices (Android 8.1 and below )
PS: I tried another image and turned out the same, I also created another page in the project and tried setting the image Control and background image property to some image and didn't work too. But worked well when I created a new project and deployed to these devices so I suspect it is something wrong with the current project.
So I found a solution to it.. it turned out the image I was using is large in size and in dimension too and couldn't display properly on Android 8.1 and lower. So I compressed the image at tinypng.com and re added to the drawable folder and it worked well.
I'm using Font Awesome 5 in my xamarin app. I would like to show an icon in a RadButton (Telerik):
<telerikInput:RadButton
Grid.Row="0" Grid.Column="0"
Text=""
FontSize="30"
Style="{StaticResource TelerikButtonStyle}"
Command="{Binding MyCommand}">
<telerikInput:RadButton.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="Android" Value="FontAwesome5Free-Solid-900.otf#Font Awesome 5 Free Solid" />
<On Platform="Windows" Value="Assets/Fonts/FontAwesome5Free-Solid-900.otf#Font Awesome 5 Free Solid" />
</OnPlatform>
</telerikInput:RadButton.FontFamily>
</telerikInput:RadButton>`
For Android, this works fine, but in UWP it shows a blank box.
On Platform should be using "UWP" instead of the ""Windows""
<On Platform="UWP" Value="Assets/Fonts/FontAwesome5Free-Solid-900.otf#Font Awesome 5 Free Solid" />
Font Awesome does not contain Solid in the Font Name. Try removing Solid from the name as below:
<On Platform="Windows" Value="Assets/Fonts/FontAwesome5Free-Solid-900.otf#Font Awesome 5 Free" />
EDIT:
If you are using Xamarin.Forms 2.3.4 or greater than replace Windows with UWP as below:
<On Platform="UWP" Value="Assets/Fonts/FontAwesome5Free-Solid-900.otf#Font Awesome 5 Free" />
I have tried this in blank solution and got it working as follows:
Added the font in the Assets/Fonts folder in UWP project and made sure it has the correct name (in my case I renamed the font to FontAwesome5.otf) and Build Action of Content:
Used the following to reference the font (note - this sample only sets UWP path, so you should add the other platforms as in your question):
XAML:
<Label Text=""
FontSize="40"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="UWP" Value="Assets/Fonts/FontAwesome5.otf#Font Awesome 5 Free" />
</OnPlatform>
</Label.FontFamily>
</Label>
The proper # suffix can be found out using some font viewer apps, like dp4 Font Viewer:
Result:
I am attempting to make a multipage app and would like to use a common navigation toolbar across all pages. The page includes:
<Page.TopAppBar>
<AppBar >
<StackPanel Orientation="Horizontal">
<Button />
</StackPanel>
</AppBar>
</Page.TopAppBar>
In App.xaml I can define the AppBar that goes into the Page.TopAppBar:
<Application.Resources>
<AppBar x:Key="CommonAppBar" x:Name="AppBarCommon">
<StackPanel Orientation="Horizontal">
<Button />
</StackPanel>
</AppBar>
</Application.Resources>
But how can I use this AppBar defination in the Page xaml?
You can use the Frame control on one page and show another your pages inside that frame. Then you can add an AppBar to this page.
By the way, the AppBarButton is the button that is used inside an AppBar, not StackPanel and Buttons (your approach will still work, but if you expect the same behaviour and look as in other UWP apps, it's easier to use AppBarButtons).