creating childern from xaml and C# Xamarin Forms - xamarin

I have 2 labels in my Xamarin forms page which are added from Xaml
I want to add a new label from C#
How is that possible?
Xaml Code:
<?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="Lecture11.Page1">
<ContentPage.Content>
<StackLayout>
<Label Text="Label from Xaml" />
<Label Text="Hi There!!"
</StackLayout>
</ContentPage.Content>
</ContentPage>
`
C# Code:
public partial class Page1 : ContentPage
{
public Page1 ()
{
InitializeComponent ();
//Code to add the label to the page.....?
}
Label _lblNew = new Label
{
Text = "Label from C#",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center,
};
}
`

You would normally just create an instance of a 'Label' with whatever attributes you need it to have.
Label newLabel = new Label {
Text = "Hello, Forms!",
FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label)),
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.CenterAndExpand,
},
Then you simply add it to your view, it might be that your other labels are in a vertical stack layout, in which case you just have to add it to the stack layout in the position you'd like it.
mainStackLayout.Children.Add(newLabel);
Please find the Xamarin developer centre guide to the labels control here.

Related

How to do you change the color of the "underline" marking the selected tab on a TabbedPage in Xamarin.Forms?

I'm currently adding several different themes (10-ish) to a Xamarin.Forms app. I've figured out how to dynamically change the color of everything except the "underline" on a tab on TabbedPage (see the attached image).
Screenshot identifying the TabbedPage "underline" with a red rectangle
I've tried to set the five different color properties (that I know of) on the TabbedPage as well as the BackgroundColor on the ContentPages in the tabs:
TabbedPage tabbedPage = new TabbedPage { Title = "Tabbed Page" };
tabbedPage.BarBackgroundColor = Color.Black;
tabbedPage.BarTextColor = Color.Gray;
tabbedPage.SelectedTabColor = Color.Black;
tabbedPage.UnselectedTabColor = Color.Black;
tabbedPage.BackgroundColor = Color.Black;
tabbedPage.Children.Add(new ContentPage { Title = "Page 1", BackgroundColor = Color.Gray });
tabbedPage.Children.Add(new ContentPage { Title = "Page 2", BackgroundColor = Color.Gray });
await Application.Current.MainPage.Navigation.PushAsync(tabbedPage);
Is it possible to set the color of the "underline" in Xamarin.Forms? Or do I need to make platform-specific changes to achieve this?
Use app:tabIndicatorColor.
All you have to do is to create a Tabar.xml file with below code in the layout folder(create one if needed) in the Android project's Resources folder and change the color via app:tabIndicatorColor;
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.tabs.TabLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#ff0000"/>
And then add below code in onCreate method of MainActivity.cs
TabLayoutResource = Resource.Layout.Tabar;

How to bind in Codebehind from a global variable in App class in Xamarin

I'm trying to create an NavigationPage TitleView with traditional Cart Icon saying (3) Items etc.
So the global CartCount variable is Declared in App class.
My CommonToolbarPage class Lays out the top of all 50 pages with Logo, search button and Cart icon like every shop on the internet. I'm using Prism.
What I'm after is what goes here to bind to CartCount so BadgeText updates when the CartCount updates.
BadgeText = App.CartCount , // Jiberish
Cut down class
public class CommonToolbarPage : ContentPage
{
public CommonToolbarPage()
{
//NavigationPage.SetHasBackButton(this, false);
ShowDefaultTitle();
//this.BindingContext= new CommonToolbarPageViewModel(navigationService);
}
private void ShowDefaultTitle()
{
SfButton sfButton = new SfButton
{
CornerRadius = 4,
HorizontalOptions = LayoutOptions.End,
VerticalOptions = LayoutOptions.Center,
Style = (Style)Application.Current.Resources["IconButtonStyle"],
Text = (String)Application.Current.Resources["Cart"],
FontFamily = "UIFontIcons",
TextColor = Color.White,
// Command = new Command(GoCart)
};
var Endlayout = new StackLayout
{
Orientation = StackOrientation.Horizontal,
HorizontalOptions = LayoutOptions.EndAndExpand,
};
var imSfBadgeView = new SfBadgeView
{
BadgeText = App.Cart, // Jiberish
Margin = new Thickness(0, 0, 10, 0),
Padding = new Thickness(0),
WidthRequest = 40,
// Content = sfButton,
HorizontalOptions = LayoutOptions.EndAndExpand,
VerticalOptions = LayoutOptions.Center,
BackgroundColor = Color.Transparent,
BadgeSettings = new BadgeSetting
{
BackgroundColor = (Color)Application.Current.Resources["PrimaryColor"],
BadgeType = BadgeType.None,
FontSize = 10,
Stroke = (Color)Application.Current.Resources["Gray-White"],
StrokeWidth = 1,
Offset = new Point(-10, 10)
}
};
Endlayout.Children.Add(imSfBadgeView);
NavigationPage.SetTitleView(this, Endlayout);
}
}
Each page then looks like this:
<?xml version="1.0" encoding="utf-8" ?>
<local1:CommonToolbarPage xmlns:local1="clr-namespace:blaAppV1.Views.Templates"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:listview="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:prism="http://prismlibrary.com"
prism:ViewModelLocator.AutowireViewModel="True"
xmlns:local="clr-namespace:blaAppV1.Views;assembly=blaAppV1"
x:Class="blaAppV1.Views.Home">
<StackLayout VerticalOptions="StartAndExpand" HorizontalOptions="Center">
<Label Text="Home" VerticalOptions="Center" HorizontalOptions="Center" />
<Button Text="Appliances" Command="{Binding Path=NavigateCommand}" CommandParameter="Appliances" />
</StackLayout>
</local1:CommonToolbarPage>
you use SetBinding to create a binding in code
myLabel.SetBinding(Label.TextProperty, "CartCount");
myLabel.BindingContext = App;

Xamarin.Forms Sizing elements in a WrapLayout

Current:
Goal:
Attempting to implement a WrapLayout to allow for dynamic button addition in a clean horizontally adding format, as shown in the 'Goal' picture. However as seen in 'Current', the sizing of the buttons in the WrapLayout are far from ideal.
Have found through simple trial and error that using height and width requests in any of the elements (scrollView, wrapLayout, buttons) result in no change to the button formats.
HeightRequest = xx;
WidthRequest = xx;
The only way, I've found thus far, to change the sizing of the wrapLayout elements is to add a large amount of children, example:
As displayed, my understanding of how to format WrapLayout children is rather lacking. So, how to format the number of children allowed on each row and how to properly format the children of a WrapLayout?
Current implementation developed following the WrapLayout class shown in the Xamarin Developer Sample for WrapLayout
ScrollView scrollView = new ScrollView {
Margin = new Thickness(20, 20, 20, 20),
};
WrapLayout wrapLayout;
wrapLayout = new WrapLayout {
ColumnSpacing = 12,
};
scrollView.Content = wrapLayout;
wrapLayout.Children.Add(
new Button
{
Text = "9 ° (?)",
BackgroundColor = Color.Yellow,
BorderColor = Color.Black,
}
);
wrapLayout.Children.Add(
new Button
{
Text = "10.5 ° (?)",
BackgroundColor = Color.Gray,
BorderColor = Color.Black,
}
);
You should look at CollectionView Nuget Package
You can use the GridCollectionView, which is based on the WrapLayout.
There, you can either use:
UniformGrid
The number of columns arranged in each row is specified. Each column width becomes the width obtained by dividing the row width by that value. This number of columns can be set by PortraitColumns and LandscapeColumns properties.
"
AutoSpacingGrid
Once a column width is specified, each column is arranged until fitting in each row and adjusted automatically each spacing. A column width can be set by ColumnWidth property and Setting SpacingType property can change how to adjust the spacing.
An Example:
<ai:GridCollectionView
ItemsSource="{Binding ItemsSource}" TouchFeedbackColor="Yellow"
ColumnWidth="100" ColumnHeight="1.0" >
<ListView.ItemTemplate>
<DataTemplate>
<ai:ContentCell>
<Label Text="{Binding Name}" />
</ai:ContentCell>
</DataTemplate>
</ListView.ItemTemplate>
</ai:GridCollectionView>
I recommend using the AiForms.Layout package:
https://dev.to/muak_x/wraplayout-and-repeatablestacklayout-for-xamarinforms-1dck
here is the sample, and it works as we expected:
<aiforms:WrapLayout Spacing="4" UniformColumns="3" IsSquare="true" HorizontalOptions="FillAndExpand">
<BoxView Color="Red" />
<BoxView Color="Blue" />
<BoxView Color="Green" />
<BoxView Color="Black" />
<BoxView Color="Yellow" />
</aiforms:WrapLayout>
And there is a RepeatableWrapLayout with Itemtemplate and ItemsSource Binding.

Xamarin Forms Resize Image inside Listview

How can I set the size of the image inside of a list view. Currently I have several lists that have icons but I don't see any options for changing the aspect ratio or size of the image so it just gets blown up to the height of the list item.
all the images are from the Drawable folder
var cell = new DataTemplate(typeof(MenuTextCell));
cell.SetBinding(TextCell.TextProperty, "Title");
cell.SetBinding(ImageCell.ImageSourceProperty, "IconSource");
cell.SetValue(BackgroundColorProperty, Color.Transparent);
cell.SetValue(TextCell.TextColorProperty, Color.FromHex("262626"));
I am using a custom renderer
public class MenuTextCellRenderer : ImageCellRenderer
{
protected override View GetCellCore (Cell item, View convertView, ViewGroup parent, Context context)
{
var cell = (LinearLayout)base.GetCellCore (item, convertView, parent, context);
cell.SetPadding(20, 10, 0, 10);
cell.DividerPadding = 50;
var div = new ShapeDrawable();
div.SetIntrinsicHeight(1);
div.Paint.Set(new Paint { Color = Color.FromHex("b7b7b7").ToAndroid() });
if (parent is ListView)
{
((ListView)parent).Divider = div;
((ListView)parent).DividerHeight = 1;
}
var icon = (ImageView)cell.GetChildAt(0);
var label = (TextView)((LinearLayout)cell.GetChildAt(1)).GetChildAt(0);
label.SetTextColor(Color.FromHex("262626").ToAndroid());
label.TextSize = Font.SystemFontOfSize(NamedSize.Large).ToScaledPixel();
label.TextAlignment = TextAlignment.Center;
label.Text = label.Text.ToUpper();
var secondaryLabel = (TextView)((LinearLayout)cell.GetChildAt(1)).GetChildAt(1);
secondaryLabel.SetTextColor(Color.FromHex("262626").ToAndroid());
secondaryLabel.TextSize = Font.SystemFontOfSize(NamedSize.Large).ToScaledPixel();
label.TextAlignment = TextAlignment.Center;
return cell;
}
You are now dealing with an Android ImageView.
You have your reference via var icon = (ImageView)cell.GetChildAt(0).
You can now customize it via methods such as .setScaleType() for aspect ratio related, and use .layout() to change the position / size.
Try something like this on your ListView.ItemTemplate, instead of using the imagecell. You can also write your custom cell.
<DataTemplate>
<ViewCell>
<StackLayout VerticalOptions="FillAndExpand" Orientation="Horizontal" Padding="10">
<Image Aspect="AspectFill" HeightRequest ="20" WidthRequest="20" Source="{Binding IconSource}" />
<Label Text="{Binding Title}" YAlign="Center" Font="Medium" />
</StackLayout>
</ViewCell>

Binding a TextBox's Width to its parent container's ActualWidth

I'm loading a Textbox and a Button into a horizontal StackPanel programmatically. The size of the button (which only contains an Image) is fixed, but I can't get the textbox to fill the available width of its parent. This is what the code looks like:
StackPanel parent = new StackPanel() {
Orientation = Orientation.Horizontal,
HorizontalAlignment = HorizontalAlignment.Stretch,
VerticalAlignment = VerticalAlignment.Top,
};
TextBox textbox = new TextBox() {
HorizontalAlignment = HorizontalAlignment.Stretch,
VerticalAlignment = VerticalAlignment.Top,
//MinWidth = 375,
};
Button btn = new Button() {
Content = new Image() {
MaxHeight = 40,
MaxWidth = 40,
MinHeight = 40,
MinWidth = 40,
Margin = new Thickness( 0 ),
Source = new BitmapImage(
new Uri( "btnimage.png", UriKind.Relative ) ),
},
HorizontalAlignment = HorizontalAlignment.Right,
BorderBrush = new SolidColorBrush( Colors.Transparent ),
Margin = new Thickness( 0 ),
};
btn.Click += ( ( s, e ) => OnBtnClicked( s, e, textbox ) );
parent.Children.Add( textbox );
parent.Children.Add( btn );
If I uncomment the MinWidth setting for the textbox it is displayed as I want it to, but I'd like to not have to specify a width explicitly. I tried adding a binding as follows but that doesn't work at all (the textbox just disappears!)
Binding widthBinding = new Binding() {
Source = parent.ActualWidth,
};
passwdBox.SetBinding( TextBox.WidthProperty, widthBinding );
Thanks for your help in advance!
Instead of using StackPanel (which always tries to keep elements as small as it can such that they all fit), use a Grid. Then you could do something like this:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/> <!-- Note "*" means to use the rest of the space -->
<ColumnDefinition Width="40"/>
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0"/>
<Button Grid.Column="1">
<Button.Content>
<Image .../>
</Button.Content>
</Button>
</Grid>
You can convert this to code instead of XAML if you prefer, XAML's just easier to type here on-the-fly.
The right answer is don't do it. See my answer at this question and the same idea applies to Silverlight on Windows Phone.
In your example, you should be using a DockPanel.
<toolkit:DockPanel>
<Button toolkit:DockPanel.Dock="Right" />
<TextBox /> <!-- fill is implied -->
</toolkit:DockPanel>

Resources