how to add an icon before the text "Share"?
below code only displays text and not icon. I have added icon into drawable folder
<ContentPage.ToolbarItems>
<ToolbarItem Name="Share" Order="Secondary" IconImageSource="icon_share.png" Icon="icon_share.png" Priority="0" />
<ToolbarItem Name="Delete" Order="Secondary" IconImageSource="icon_delete.png" Icon="icon_delete.png" Priority="1" />
</ContentPage.ToolbarItems>
The icon for Secondary Toolbar item is hidden by design .
Check the threads :
How to change icon of Secondary Toolbaritem Xamarin Forms.
https://forums.xamarin.com/discussion/47989/icon-for-toolbaritem-with-order-secondary.
I create the workaround that mentioned in the links, it works fine .
Xaml
<ContentPage.ToolbarItems>
<ToolbarItem Order="Primary" Icon="dots.png" Priority="1" Clicked="ToolbarItem_Clicked" />
</ContentPage.ToolbarItems>
<RelativeLayout>
<ListView x:Name="SecondaryToolbarListView"
VerticalOptions="Start"
HorizontalOptions="Start"
WidthRequest="150" IsVisible="False"
ItemTapped="SecondaryToolbarListView_ItemTapped"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1, Constant=-160}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal" Spacing="10" Padding="5,5,5,5">
<Image HeightRequest="30" HorizontalOptions="Start" VerticalOptions="Center" Source="{Binding ImagePath}" />
<Label FontSize="15" VerticalOptions="Center" HorizontalOptions="Start" Text="{Binding MenuText}"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</RelativeLayout>
Code behind
public class ToolbarItemModel
{
public string ImagePath { get; set; }
public string MenuText { get; set; }
}
public Page2()
{
InitializeComponent();
var items = new List<ToolbarItemModel>
{
new ToolbarItemModel {ImagePath = "dog.png", MenuText = "First Item"},
new ToolbarItemModel {ImagePath = "dog.png", MenuText = "Second Item"}
};
SecondaryToolbarListView.ItemsSource = items;
}
private void ToolbarItem_Clicked(object sender, EventArgs e)
{
SecondaryToolbarListView.IsVisible = !SecondaryToolbarListView.IsVisible;
}
private void SecondaryToolbarListView_ItemTapped(object sender, ItemTappedEventArgs e)
{
}
The Images aren't appearing because you have incorrectly added icon_share.png and icon_delete.png to your project.
Here is Microsoft's recommendations on how to add images to your Xamarin.Forms project:
Image files can be added to each application project and referenced from Xamarin.Forms shared code. This method of distributing images is required when images are platform-specific, such as when using different resolutions on different platforms, or slightly different designs.
To use a single image across all apps, the same filename must be used on every platform, and it should be a valid Android resource name (i.e. only lowercase letters, numerals, the underscore, and the period are allowed).
iOS - The preferred way to manage and support images since iOS 9 is to use Asset Catalog Image Sets, which should contain all of the versions of an image that are necessary to support various devices and scale factors for an application. For more information, see Adding Images to an Asset Catalog Image Set.
Android - Place images in the Resources/drawable directory with Build Action: AndroidResource. High- and low-DPI versions of an image can also be supplied (in appropriately named Resources subdirectories such as drawable-ldpi, drawable-hdpi, and drawable-xhdpi).
Universal Windows Platform (UWP) - By default, images should be placed in the application's root directory with Build Action: Content. Alternatively, images can be placed in a different directory which is then specified with a platform-specific. For more information, see Default image directory on Windows.
Recommendations
Permanently Remove Icon; Icon was deprecated in favor of IconImageSource
Temporarily remove IconImageSource, replacing it with Text="Share" and Text="Delete":
This will confirm that ContentPage.ToolbarItems is working properly and that you have incorrectly added your png images to the Xamarin.Forms project
<ContentPage.ToolbarItems>
<ToolbarItem Name="Share" Order="Secondary" Text="Share" />
<ToolbarItem Name="Delete" Order="Secondary" Text="Delete" />
</ContentPage.ToolbarItems>
Related
I am currently using Mapsui in my .NET Maui project. I have gotten to the point of building out my callouts and displaying one at a time, but they are anchored to the pins for the locations (seen here):
I was wondering if there was a way to make these callouts "float" (similar to Google Maps implementation shown below):
Is there a way to do this with the callouts, or am I going to need to build another layer and have it visible/hidden based on the ClickEvents?
There are samples available on the github of Mapsui : PinSample.cs
The position of the callout is defined by Callout.Anchor, you can base it on the size of the pin :
pin.Callout.Anchor = new Point(0, pin.Height * pin.Scale);
Oops just see it is not what you asked for, I am currently doing something similar by using another element on top of the map.
XAML :
<Grid VerticalOptions="FillAndExpand">
<mapsui:MapView x:Name="mapView"
VerticalOptions="FillAndExpand"
HorizontalOptions="Fill"/>
<Border
x:Name="mapContext"
IsVisible="false"
Padding="10"
Margin="5"
HorizontalOptions="Center"
VerticalOptions="Start">
<Border.StrokeShape>
<RoundRectangle CornerRadius="10" />
</Border.StrokeShape>
<Label
Text="Some content"
BackgroundColor="White"></Label>
</Border>
</Grid>
You can use the events to close / open it :
public MapTest()
{
InitializeComponent();
mapView.MapClicked += OnMapClicked;
mapView.PinClicked += OnPinClicked;
}
private void OnPinClicked(object sender, PinClickedEventArgs e)
{
mapContext.IsVisible = true;
}
private void OnMapClicked(object sender, MapClickedEventArgs e)
{
mapContext.IsVisible = false;
}
You can also change the content based on the PinClickedEventArgs.Pin.
Is it possible to scale labels, buttons, and frames with font size? I'm running into accessibility issues, where iOS has a few lines to disable all accessibility scaling and after googling android doesn't seem to have it at all. I have a number of components that have text inside and buttons that have custom fonts for arrows pause and play icons which are custom fonts. I need to scale the entire button around depending if the font size within the accessibility has been changed.
Only for iOS: Accessibility Scaling for Named Font Sizes on iOS, cannot find anything about android.
Another post: Getting Android/iOS Accessibility font sizes, first answer has this line of code for android Android.Content.Res.Resources.System.Configuration.FontScale but I can't seem to be able to access the Android.Content anywhere I try to use it.
Many Thanks in advance.
Edit: Temp Fix. Still would like to know if its even possible to do component scaling with fontsize.
Reference:
<?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="BugTestMediaElement.Page3">
<Shell.TitleView>
<StackLayout HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
BackgroundColor="Red">
<Frame BackgroundColor="White"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand">
<Label Text="Test"
FontSize="{StaticResource ToolbarIconFontSize}"
TextColor="Black" />
</Frame>
</StackLayout>
</Shell.TitleView>
</ContentPage>
I use the following approach. In App.xaml file (application wide declarations), I make the following declarations:
<Application.Resources>
<ResourceDictionary>
<OnPlatform x:Key="ToolbarIconFontSize" x:TypeArguments="x:Double" Android="48" iOS="64" />
</ResourceDictionary>
</Application.Resources>
Then on a page (I use icons from FontAwesome), I make this declaration:
<Shell.TitleView>
<Grid Style="{StaticResource GridTitle}" RowDefinitions="*" ColumnDefinitions="*, 0.20*, 0.20*">
<!-- other declarations are skipped -->
<ImageButton Grid.Row="0" Grid.Column="1" HorizontalOptions="Start" Command="{Binding SomeActionCommand}">
<ImageButton.Source>
<FontImageSource Glyph="{x:Static icons:IconFontGlyphNames.SomeActionSymbol}"
FontFamily="IconFontFamily"
Color="White"
Size="{StaticResource ToolbarIconFontSize}" />
</ImageButton.Source>
</ImageButton>
<!-- other declarations are skipped -->
</Grid>
</Shell.TitleView>
IconFontGlyphNames class declarations look like that:
public static class IconFontGlyphNames
{
public const string SomeActionSymbol = "\uf234";
// other declarations are skipped
}
I set fonts sizes for icons, and texts using this approach, and it works fine as for Android and for iOS platform.
Update #1. Explaining `Shell.TitleView` location.
Shell.TitleView is located here:
<ContentPage>
<Shell.TitleView>
<!-- Shell title view elements go here -->
</Shell.TitleView>
<ContentPage.Content>
<!-- Your page body elements go here -->
</ContentPage.Content>
</ContentPage>
I'm creating a cross platform app with Xamarin for iOS and Android which uses the camera. I didn't want to use the MediaPicker to access the camera because I wanted the app to display other information while taking a picture. I therefore used CameraView. I wrote the app and tested it with an Android emulator which was running on Android 11. However, I didn't think to test the app for previous versions of Android. The targeted version of Android is 11, but the minimum android version which works is 5.1. Therefore, the app functions on a phone which uses Android 9, but there is a bug when I try and take a picture. The method which is called upon when the user wants to take a picture is the following:
private void CaptureImage(object sender, EventArgs e)
{
xctCameraView.Shutter();
}
When I try and take a picture using Android 9, an error is thrown: System.NullReferenceException
Message=Object reference not set to an instance of an object.
I understand there may be some differences between android 9 and 11 and therefore the code doesn't work, but I've been searching for an alternative with no outcome. Can anyone help? Thanks!
EDIT:
<?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:xct="http://xamarin.com/schemas/2020/toolkit" Title="Prenez une photo" BackgroundColor="Transparent"
x:Class="App1.CameraViewPage">
<Grid x:Name="myGrid">
<xct:CameraView
x:Name="xctCameraView"
CaptureMode="Photo"
MediaCaptured="MediaCaptured"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"/>
<StackLayout VerticalOptions="EndAndExpand" Spacing="2" Padding="6">
<Button WidthRequest="70" HeightRequest="70" CornerRadius="40" BackgroundColor="Transparent" BorderColor ="White" BorderWidth="8" Clicked="CaptureImage" x:Name="captureBtn" HorizontalOptions="Center" VerticalOptions="Center"/>
</StackLayout>
<StackLayout VerticalOptions="StartAndExpand" Spacing="2" Padding="6">
<Label x:Name="labelOfMine" x:FieldModifier="public"
Text="" BackgroundColor="LightYellow">
</Label>
</StackLayout>
</Grid>
</ContentPage>
I use the code below to take a picture on Android 9 on emulator. It works. You could refer to it.
<StackLayout>
<xct:CameraView
Grid.Column="0"
x:Name="xctCameraView"
CaptureMode="Photo"
FlashMode="Off"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand" />
<Button Clicked="Button_Clicked"></Button>
</StackLayout>
Code behind:
private void Button_Clicked(object sender, EventArgs e)
{
xctCameraView.Shutter();
}
Permissions:
<uses-permission android:name="android.permission.CAMERA" />
I can't properly get the control described in XAML file. I gave button in XAML file a ClassId and tried to reach it in CS file using FindByName.
This is in a Xamarin Form project running in iOS Emulator.
In MainPage.XAML file,
<StackLayout>
<!-- Place new controls here -->
<Button Text="" />
<Label ClassId="myLabel1"
Text="Xamarin Form Demo"
HorizontalOptions="Center"/>
<Button ClassId ="btnNum"
Text="Image Control"
HorizontalOptions="Center" />
<Image ClassId="myImg"
HorizontalOptions="Center" />
<Label ClassId="myLabel2"
Text="Number"
HorizontalOptions="Center"/>
</StackLayout>
In MainPage.xaml.cs file,
public MainPage()
{
InitializeComponent();
int num = 0;
((Button)FindByName("btnNum")).Clicked += (o, e) ((Label)FindByName("myLabel2")).Text = (++num).ToString();
}
When I run the app on iOS Emulator, I always get the following error in the longest line of code in MainPage.xaml.cs file,
*********
Unhandled Exception:
System.NullReferenceException: Object reference not set to an instance
of an object
*********
Thanks for the help, and it would be nice if I can get some further information about accessing control from a different content page.
assign your control a Name
<Button x:Name="MyButton" Text="" />
then in the code-behind refer to it by name - you should not need to declare it
MyButton.Text = "blah blah blah";
You need to use the x:Name directive, which can be used in any control within Xamarin.Forms.
From the docs:
Uniquely identifies XAML-defined elements in a XAML namescope. XAML
namescopes and their uniqueness models can be applied to the
instantiated objects, when frameworks provide APIs or implement
behaviors that access the XAML-created object graph at run time.
Usage in XAML:
<Label x:Name="myLabel1"
Text="Xamarin Form Demo"
HorizontalOptions="Center"/>
<Button
x:Name ="btnNum"
Text="Image Control"
HorizontalOptions="Center" />
In Page.xaml.cs
myLabel1.Text = "test";
btnNum.Clicked +=
I'm in trouble with dynamic bind of images in a ViewCell. I have a shared project for Android and iOS. My ViewCell is so defined
<ViewCell>
<StackLayout Padding="5" Orientation="Vertical">
<StackLayout Orientation="Horizontal">
<Image WidthRequest="32" HeightRequest="32" Source="{Binding Image}"></Image>
<Label Text="{Binding Source}" FontSize="Medium" TextColor="#003056"></Label>
</StackLayout>
...
The Image property is so defined in the class
public ImageSource Image {
get
{
ImageSource imageSource = ImageSource.FromResource("MyProject.Images.image001.png");
return imageSource;
}
The Images folder is in the shared project.
The imageSource returned is not null, there are no errors but the images is not shown.
Can you help, plese?
Thanks
Ensure each image has Build option set to Embedded Resource using Properties menu(right click) as described here: https://developer.xamarin.com/guides/xamarin-forms/user-interface/images/