Xamarin Forms Frame in Android - xaml

I have four frames, I want to enter in that number. When running on Windows, the numbers are fully visible, but when I run on Android, numbers are not visible or half appear.
I do not want to change outlines so that they get out of shape
And change their appearance
I'm beginner in xamarin
Please advise me to display the numbers correctly while running on Android without changing the appearance of my frames.
XAML:
<Style TargetType="Frame" >
<Setter Property="BackgroundColor" Value="White"/>
<Setter Property="CornerRadius" Value="15"/>
<Setter Property="HeightRequest" Value="30"/>
<Setter Property="BorderColor" Value="Blue"/>
<Setter Property="Margin" Value="3"/>
</Style>
</ContentPage.Resources>
<StackLayout BackgroundColor="White" Orientation="Vertical" >
<Image Source="d.png" WidthRequest="60" HeightRequest="60" Margin="0,5,0,5"/>
<BoxView WidthRequest="40" HeightRequest="60" BackgroundColor="Pink" HorizontalOptions="Center"/>
<Label Text="کد ارسال شده را اینجا وارد کنید" TextColor="Black" FontSize="15" HorizontalOptions="Center" Margin="0,5,0,0"
VerticalOptions="Center"/>
<StackLayout Orientation="Horizontal" HorizontalOptions="Center" Spacing="10" BackgroundColor="White">
<Frame WidthRequest="80" x:Name="frame1" >
<Entry Keyboard="Numeric" TextColor="Black" FontSize="20" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" MaxLength="1"
HorizontalTextAlignment="Center" Focused="Entry_Focused" Unfocused="Entry_unFocused" />
</Frame>
<Frame WidthRequest="80" x:Name="frame2" >
<Entry Keyboard="Numeric" TextColor="Black" FontSize="20" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
HorizontalTextAlignment="Center" MaxLength="1" Focused="Entry_Focused1" Unfocused="Entry_unFocused1" />
</Frame>
<Frame WidthRequest="80" x:Name="frame3" >
<Entry Keyboard="Numeric" TextColor="Black" FontSize="20" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
HorizontalTextAlignment="Center" Focused="Entry_Focused2" Unfocused="Entry_unFocused2" MaxLength="1" />
</Frame>
<Frame WidthRequest="80" x:Name="frame4"
>
<Entry Keyboard="Numeric" FontSize="20" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
MaxLength="1" HorizontalTextAlignment="Center" Focused="Entry_Focused3" Unfocused="Entry_unFocused3" />
</Frame>
</StackLayout>
<Button x:Name="Button" Text="تایید" TextColor="White" BackgroundColor="Green" HorizontalOptions="Center"
VerticalOptions="End" WidthRequest="340" HeightRequest="50" CornerRadius="5" Margin="0,10,0,10"/>
</StackLayout>

You can set the specific heightrequest for android in the Frame
Here is running screenshot in android.
Here is code.
<Frame x:Name="frame1" WidthRequest="80" >
<Entry Keyboard="Numeric" TextColor="Black" FontSize="20" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" MaxLength="1"
HorizontalTextAlignment="Center" Focused="Entry_Focused" Unfocused="Entry_Unfocused" >
</Entry>
<Frame.HeightRequest>
<OnPlatform Android="50" ></OnPlatform>
</Frame.HeightRequest>
</Frame>

Related

Bottom Navigation Bar Design in Dotnet Maui

I am working on a design for Dotnet Maui but not able to achieve the depth as per design.
I have tried box frame but was not been able to achieve the top shadow and circle cut. I have also created this as a floating button.
ContentPage
Grid ->
<HorizontalStackLayout VerticalOptions="End" Margin="0,0,0,10">
<Grid RowDefinitions="22,15" HorizontalOptions="Center" Margin="28,20,10,0">
<ImageButton Source="homeicon.svg"
WidthRequest="20"
HeightRequest="22"
HorizontalOptions="Center"
VerticalOptions="Center"
Grid.Row="0"
/>
<Label Grid.Row="1" Text="Home"
FontFamily="WorkSansRegular"
FontSize="12"
/>
</Grid>
<Grid RowDefinitions="22,15" HorizontalOptions="Center" Margin="28,20,10,0">
<ImageButton Source="wallet.svg"
WidthRequest="20"
HeightRequest="22"
HorizontalOptions="Center"
VerticalOptions="Center"
Grid.Row="0"
/>
<Label Grid.Row="1" Text="Wallet"
FontFamily="WorkSansRegular"
FontSize="12"
/>
</Grid>
<Ellipse Margin="16,-15,0,0"
Fill="#AFAFAF"
StrokeThickness="4"
WidthRequest="70"
HeightRequest="70"
HorizontalOptions="Start"
VerticalOptions="Start"
/>
<ImageButton Source="centericon.svg"
WidthRequest="60"
HeightRequest="62"
HorizontalOptions="Center"
VerticalOptions="Center"
Margin="-65,-15,0,0"
/>
<Grid RowDefinitions="22,15" HorizontalOptions="Center" Margin="28,20,0,0">
<ImageButton Source="activityicon.svg"
WidthRequest="20"
HeightRequest="22"
HorizontalOptions="Center"
VerticalOptions="Center"
Grid.Row="0"
/>
<Label Grid.Row="1" Text="Activity" FontFamily="WorkSansRegular"
FontSize="12"
/>
</Grid>
<Grid RowDefinitions="22,15" HorizontalOptions="Center" Margin="28,20,0,0">
<ImageButton Source="profileicon.svg"
WidthRequest="20"
HeightRequest="22"
HorizontalOptions="Center"
VerticalOptions="Center"
Grid.Row="0"
/>
<Label Grid.Row="1" Text="Profile" FontFamily="WorkSansRegular"
FontSize="12"
/>
</Grid>
</HorizontalStackLayout>
this part of the code is under
<ContentPage -> Grid ->

How to dynamically adjust positioning of a VerticalStackLayout inside a Grid?

I'm creating an app using MAUI and I'm trying to make it so an ImageButton and SearchBar nested in a VerticalStackLayout move positioning based on the dynamically created CollectionView.
This is the code for the UI:
<Grid>
<FlexLayout VerticalOptions="Center" HorizontalOptions="Center">
<StackLayout>
<CollectionView x:Name="taskList">
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="models:Task">
<VerticalStackLayout Margin="15">
<Entry Text="{Binding name}" IsReadOnly="True" />
<Entry Text="{Binding departmentsString}" IsReadOnly="True"/>
<HorizontalStackLayout>
<Entry Text="{Binding status}" IsReadOnly="True"/>
<Entry Text="{Binding deadline}" IsReadOnly="True" />
<Entry Text="{Binding author.fullName}" IsReadOnly="True"/>
</HorizontalStackLayout>
<Entry Text="{Binding description}" IsReadOnly="True" />
</VerticalStackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
<VerticalStackLayout Margin="15">
<Entry Placeholder="Name" x:Name="nameTxt"/>
<Entry Placeholder="Department" x:Name="departTxt"/>
<HorizontalStackLayout>
<inputs:SfComboBox x:Name="statusTxt" Placeholder="Status" BackgroundColor="Black" TextColor="Green" DropDownIconColor="Green"/>
<Entry Placeholder="deadline" x:Name="deadlineTxt"/>
<Entry Placeholder="Author" x:Name="authorTxt"/>
</HorizontalStackLayout>
<Entry Placeholder="Description" x:Name="descTxt"/>
</VerticalStackLayout>
</FlexLayout>
<VerticalStackLayout VerticalOptions="Center" >
<SearchBar Placeholder="Search" x:Name="searchBar" TextChanged="searchBar_TextChanged" MaxLength="30" MaximumWidthRequest="200"/>
<ImageButton Aspect="AspectFill" x:Name="addBtn" Source="plus.png" BackgroundColor="Black" Clicked="addBtn_Clicked" HeightRequest="64" WidthRequest="64"/>
</VerticalStackLayout>
</Grid>
I have tried every different type of Layout but nothing works.
What should I do?

Trigger IsVisible true- false of label on radio button checked- Uncheck in xaml

I am trying to show/hide a label using Trigger on RadioButton check/uncheck but I am getting the error. I can also do it in c# code by inotifypropertychanged but i want to use Triggers and this is my first time. I am not able to understand this error.
<StackLayout Orientation="Vertical" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Padding="10">
<Frame HasShadow="False" Margin="10,20" CornerRadius="5" BorderColor="{StaticResource BorderColor}" BackgroundColor="#F7F7F7">
<Grid HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<RadioButton Content="English" x:Name="rdbEnglish" HorizontalOptions="FillAndExpand" BackgroundColor="Transparent"
CornerRadius="10" BorderWidth="2" Margin="2"
Grid.Column="0" Grid.Row="0" IsChecked="{Binding IsCheckedEnglish,Mode=TwoWay}" >
</RadioButton>
<RadioButton Content="hindi" x:Name="rdbHindi" HorizontalOptions="FillAndExpand"
BackgroundColor="Transparent"
CornerRadius="10" BorderWidth="2" IsChecked="{Binding IsCheckedHindi,Mode=TwoWay}"
Margin="2" Grid.Column="1" Grid.Row="0" />
</Grid>
</Frame>
<StackLayout Orientation="Vertical" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Padding="10">
<Label x:Name="lblrdbEnglish" Text="Note : Menu iteam changes will be updated next time"
Margin="2,-10,2,5" TextColor="Red" IsVisible="false" FontAttributes="Italic" >
<Label.Triggers>
<DataTrigger TargetType="RadioButton"
Binding="{Binding Source={x:Reference rdbEnglish},Path=IsChecked}" Value="True" >
<Setter Property="IsVisible" Value="True" />
</DataTrigger>
</Label.Triggers>
</Label>
</StackLayout>
</StackLayout>
Error
System.InvalidOperationException: 'bindable not an instance of AssociatedType'
The TargetType should be of type Label and not RadioButton.
From triggers docs:
TargetType - the control type that the trigger applies to.
...
<Label.Triggers>
<DataTrigger TargetType="Label"
Binding="{Binding Source={x:Reference rdbEnglish},
Path=IsChecked}" Value="True">
<Setter Property="IsVisible" Value="True" />
</DataTrigger>
</Label.Triggers>

How to design the following grid view in Xamarin form in Xamarin iOS,Android

Needed same design of the form. My coding is this Xamarin form, Xamarin iOS, Android
<Frame Grid.Row="0" Grid.Column="0">
<Image
HeightRequest="50"
Source="Dash01.png"
WidthRequest="50" />
<Label Text="Cow Milk"/>
</Frame>
<BoxView
HeightRequest="3"
HorizontalOptions="Fill"
VerticalOptions="Start"
Color="DimGray" Grid.Row="1" Grid.Column="0" />
Try this Code
<StackLayout
Padding="0,10"
BackgroundColor="#e8f5e4"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<CollectionView
x:Name="foodList"
Grid.Row="1"
Margin="12,0"
HorizontalOptions="FillAndExpand"
ItemSizingStrategy="MeasureAllItems"
SelectionMode="Single"
VerticalOptions="FillAndExpand">
<CollectionView.ItemsLayout>
<GridItemsLayout
HorizontalItemSpacing="5"
Orientation="Vertical"
Span="2"
VerticalItemSpacing="5" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Frame
Margin="5"
Padding="0"
BackgroundColor="Pink"
CornerRadius="10"
HorizontalOptions="FillAndExpand"
VerticalOptions="Fill">
<StackLayout
Margin="0,0,0,10"
Padding="10"
BackgroundColor="White"
HorizontalOptions="FillAndExpand"
VerticalOptions="Fill">
<Image
Aspect="AspectFit"
HeightRequest="50"
HorizontalOptions="Center"
Source="star.png" />
<Label
FontSize="18"
HorizontalOptions="Center"
HorizontalTextAlignment="Center"
Text="{Binding}" />
</StackLayout>
</Frame>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>

How to reuse the same view in Xamarin? XAML

So I got this code that I need to re-use on more or less all my pages, but I'm getting kinda tired of changing one page and having to do the same thing in 10 or more places, are there any better way to do this?
Using Xamarin.Forms. Maybe it is possible to do this with a custom controller or some other way with markup extension to inside a stacklayout do a x:static reference to it?
<!--#region BOTTOM Navigation Bar-->
<!-- Theme Colored bar-->
<StackLayout Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" Padding="0,0,0,0" Spacing="0" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Orientation="Horizontal" BackgroundColor="{StaticResource ThemeBkColor}" >
</StackLayout>
<!-- Bottom Menu bar -->
<StackLayout Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" Padding="0,3,0,3" Spacing="0" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Orientation="Horizontal" BackgroundColor="{StaticResource ThemeBkColorBottomBar}" >
<!-- Left -->
<StackLayout Padding="15,0,0,0" Spacing="10" VerticalOptions="FillAndExpand" HorizontalOptions="StartAndExpand" Orientation="Horizontal" >
<StackLayout Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="CenterAndExpand" Spacing="2">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding CmdGoToCheckUpdates}" NumberOfTapsRequired="1"/>
</StackLayout.GestureRecognizers>
<Image Source="updates.png" HeightRequest="35" WidthRequest="35" HorizontalOptions="Center" />
<Label Text="Updates" HorizontalOptions="Center" Style="{StaticResource BottomMenuBtnText}" />
</StackLayout>
</StackLayout>
<!-- Center -->
<StackLayout Padding="0,0,0,0" Orientation="Horizontal" Spacing="0" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" >
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Padding="0,0,0,0" RowSpacing="0" ColumnSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="FillAndExpand" Spacing="2" >
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding CmdGoToCatalog}" NumberOfTapsRequired="1"/>
</StackLayout.GestureRecognizers>
<Image Source="catalogues.png" HeightRequest="35" WidthRequest="35" HorizontalOptions="Center">
</Image>
<Label Text="Catalog" HorizontalOptions="Center" Style="{StaticResource BottomMenuBtnText}" />
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="1" Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="FillAndExpand" Spacing="2">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding CmdGoToPresentation}" NumberOfTapsRequired="1"/>
</StackLayout.GestureRecognizers>
<Image Source="display.png" HeightRequest="35" WidthRequest="35" HorizontalOptions="Center" >
</Image>
<Label Text="Presentations" HorizontalOptions="Center" Style="{StaticResource BottomMenuBtnText}" />
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="2" Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="FillAndExpand" Spacing="2">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding CmdGoToScan}" NumberOfTapsRequired="1"/>
</StackLayout.GestureRecognizers>
<Image Source="scan.png" HeightRequest="35" WidthRequest="35" HorizontalOptions="Center">
</Image>
<Label Text="Scanner" HorizontalOptions="Center" Style="{StaticResource BottomMenuBtnText}" />
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="3" Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="FillAndExpand" Spacing="2">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding CmdGoToSearch}" NumberOfTapsRequired="1"/>
</StackLayout.GestureRecognizers>
<Image Source="Search.png" HeightRequest="35" WidthRequest="35" HorizontalOptions="Center">
</Image>
<Label Text="Search" HorizontalOptions="Center" Style="{StaticResource BottomMenuBtnText}" />
</StackLayout>
</Grid>
</StackLayout>
<!-- Right -->
<StackLayout Padding="0,0,15,0" Spacing="10" VerticalOptions="FillAndExpand" HorizontalOptions="EndAndExpand" Orientation="Horizontal" >
<StackLayout Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="CenterAndExpand" Spacing="2">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding CmdGoToLoginLogout}" NumberOfTapsRequired="1"/>
</StackLayout.GestureRecognizers>
<Image Source="logout.png" HeightRequest="35" WidthRequest="35" >
</Image>
<Label Text="Settings" HorizontalOptions="Center" Style="{StaticResource BottomMenuBtnText}" />
</StackLayout>
</StackLayout>
</StackLayout>
<!--#endregion-->
You can create a CustomView and then include that in your Pages.
In order to Achieve that, you create a a YourCustomView.xaml,
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="YourProject.YourCustomView">
</ContentView>
And, in your Page.xaml you include it
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-namespace:YourProject;assembly=YourProject"
x:Class="YourProject.YourPage">
<views:YourCustomView/>
</ContentPage>
The next step is about Binding the properties that you need, for that, you need to create BindableProperties in your CustomView. You can reuse this in all pages that you want.