I have a Xamarin.Forms PCL project and I am trying to add a Toolbar to my App as below and my target platform is UWP.
<ContentPage.ToolbarItems>
<ToolbarItem Icon="attach.png" Order="Primary" Priority="1" />
<ToolbarItem Icon="camera.png" Order="Primary" Priority="1" />
<ToolbarItem Text="Item1" Order="Secondary" Priority="1" />
<ToolbarItem Text="Item2" Order="Secondary" Priority="2" />
<ToolbarItem Text="Item3" Order="Secondary" Priority="3" />
<ToolbarItem Text="Item4" Order="Secondary" Priority="4" />
</ContentPage.ToolbarItems>
I have added all icon sources to root folder of UWP project. When i run the app on Windows 10 Desktop, icons appears too small. Orginal size of the image is okay though.
I would be appreciated if someone know how to fix this.
Unfortunately, I can't reproduce your issue in my side. And I have used the same icon in UWP and xamarin.forms to do a comparison. They do not make any difference in size.
The size of ToolbarItem icon is fixed. If you used icon with text description, then the image will look very small, in case of which you can set ToolBarItem Text property. When you click More Button, ToolbarItems will be expanded so that the text can be display well. And you'd better use a image whose active area is big enough.
<ToolbarItem Icon="camera.png" Order="Primary" Priority="1" Text="camera"/>
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.
Im new into developing Xamarin apps, and I'm trying to implement a Toolbar with icons and it Android works properly but not with ios, only the 1st icon is showed. I think the code is not necessary because it quite simple but I will post it:
<ContentPage.ToolbarItems >
<ToolbarItem Text="Add act" Clicked="ToolbarItem_Clicked" IconImageSource="anadir.png" Priority="1" />
<ToolbarItem Text="Add al" Clicked="ToolbarItem_Clicked" IconImageSource="adduser.png"/>
<ToolbarItem Text="Buscar" Clicked="ToolbarItem_Clicked" IconImageSource="buscar.png"/>
<ToolbarItem Text="Mostrar" Clicked="ToolbarItem_Clicked" IconImageSource="lista.png"/>
<ToolbarItem Text="Eliminar" Clicked="ToolbarItem_Clicked" IconImageSource="cerrar.png" />
</ContentPage.ToolbarItems>
By the way, Toolbar Items are out of Toolbar
The rest of images of the app works properly.
I already create a TabbedPage with 5 Tabs. The 5th Tab is called "More". In this tab, I want to create a embed listview like the image below.
May I know how can do it?
It looks like a TableView in Xamarin.Form.
TableView can be created as below.
<TableView Intent="Settings">
<TableRoot>
<TableSection Title="Ring">
<SwitchCell Text="New Voice Mail" />
<SwitchCell Text="New Mail" On="true" />
</TableSection>
</TableRoot>
</TableView>
The full example can be found here
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/tableview
I am trying xamarin forms for the first time so that I can build my app fro android and Iphone
I need to add an image to my layout MainPage.xaml and have this layout.
<?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:ReassuredMobileApp"
x:Class="ReassuredMobileApp.MainPage">
<StackLayout
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<StackLayout
VerticalOptions="Start"
HorizontalOptions="FillAndExpand"
AutomationId="TitleBar">
<Label
Text="Hello, world!"></Label>
<Image
WidthRequest="200"
HeightRequest="50"
VerticalOptions="Start"
HorizontalOptions="Start"
Source="reassured_text.png" />
</StackLayout>
</StackLayout>
But the image "reassured_text.png" is not being displayed when I run the app in the emulator. I can see the Hello, World! text just fine (still cant see the image when I remove this)
My image is under my project as "reassured_text.png"
I've tried to follow tutorials online, but don't understand what is being said, and the ones I could understand didn't work. I've also tried to format the tag like
<Image
####Stuff here>
</Image>
but that didn't have an effect.
Directory tree:
Solution 'MyApp'
c# - MyApp
Dependencies
App.xaml
App.xaml.cs
MainPage.xaml
MainPage.xaml.cs
reassured_text.png
MyApp.Android
drawable
reassured_text.png
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
layout
values
MyApp.Ios
//I haven't touched anything here
1.Put the image reassured_text.png in Android project i.e in Resource/Drawable folder.
or
2.Put the image reassured_text.png in portable project & set build action to "Embedded Resource" & in .cs file do like this:
imagecontrol.FromResource="reassured_text.png";
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}"