I am using xamarin form, having android and IOS Project
Below is the image that I want to create same UI.
I tried a lot, But I am not able to get same design.
I got this design in google image.
I have added my code and the output result
Below is my code:
<Grid RowDefinitions="Auto,Auto,Auto,Auto,Auto" Padding="10" >
<Frame BackgroundColor="White" CornerRadius="20" Grid.Row="0">
<Grid ColumnDefinitions="Auto,Auto,Auto,Auto,Auto" VerticalOptions="CenterAndExpand">
<Label Grid.Column="0" Grid.Row="0" Text="Primary School" FontAttributes="Bold" FontSize="16" TextColor="#08457E" ></Label>
<Label Grid.Column="1" Grid.Row="0" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" Text="{x:Static fontawesome:Solid.Business_Time}" FontSize="20" ></Label>
<Label Grid.Column="2" Grid.Row="0" Text="Time Table" TextColor="Gray" ></Label>
<Label Grid.Column="3" Grid.Row="0" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" Text="{x:Static fontawesome:Solid.Clipboard}" FontSize="20" ></Label>
<Label Grid.Column="4" Grid.Row="0" Text="H.W." TextColor="Gray" ></Label>
</Grid>
</Frame>
<Frame CornerRadius="10" Grid.Row="1" BackgroundColor="White" >
<Grid RowDefinitions="Auto,Auto,Auto" ColumnDefinitions="Auto,Auto" >
<Label Grid.Row="0" Grid.Column="0" TextColor="#08457E" FontFamily="{StaticResource FontAwesome}" Text="{x:Static fontawesome:Solid.User}" FontSize="20" ></Label>
<Label Grid.Row="0" Grid.Column="1" Text="Xamarin UI Design" TextColor="#202020"></Label>
<Label Grid.Row="1" Grid.Column="0" TextColor="#08457E" FontFamily="{StaticResource FontAwesome}" Text="{x:Static fontawesome:Solid.Table}" FontSize="20" ></Label>
<Label Grid.Row="1" Grid.Column="1" Text="Class: V" TextColor="#202020"></Label>
<Label Grid.Row="2" Grid.Column="0" TextColor="#08457E" FontFamily="{StaticResource FontAwesome}" Text="{x:Static fontawesome:Solid.User_Edit}" FontSize="20" ></Label>
<Label Grid.Row="2" Grid.Column="1" Text="Class Tearcher: Monali Kundre" TextColor="#202020"></Label>
</Grid>
</Frame>
<Grid Grid.Row="2" RowDefinitions="Auto,Auto" ColumnDefinitions="Auto,Auto,Auto" RowSpacing="10" ColumnSpacing="10">
<Frame Grid.Row="0" Grid.Column="0" BackgroundColor="White" HasShadow="True" CornerRadius="10">
<Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Label Grid.Row="0" HorizontalOptions="Center" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Table}" ></Label>
<Label Grid.Row="1" HorizontalOptions="Center" Text="Syllabus" VerticalOptions="Start"
TextColor="#202020"></Label>
</Grid>
</Frame>
<Frame Grid.Row="0" Grid.Column="1" BackgroundColor="White" HasShadow="True" CornerRadius="10">
<Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Label Grid.Row="0" HorizontalOptions="Center" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Th_List}" ></Label>
<Label Grid.Row="1" HorizontalOptions="Center" Text="Test" VerticalOptions="Start"
TextColor="#202020"></Label>
</Grid>
</Frame>
<Frame Grid.Row="0" Grid.Column="2" BackgroundColor="White" HasShadow="True" CornerRadius="10">
<Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Label Grid.Row="0" HorizontalOptions="Center" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Edit}" ></Label>
<Label Grid.Row="1" HorizontalOptions="Center" Text="Notice" VerticalOptions="Start"
TextColor="#202020"></Label>
</Grid>
</Frame>
<Frame Grid.Row="1" Grid.Column="0" BackgroundColor="White" HasShadow="True" CornerRadius="10">
<Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Label Grid.Row="0" HorizontalOptions="Center" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Pallet}" ></Label>
<Label Grid.Row="1" HorizontalOptions="Center" Text="Fees" VerticalOptions="Start"
TextColor="#202020"></Label>
</Grid>
</Frame>
<Frame Grid.Row="1" Grid.Column="1" BackgroundColor="White" HasShadow="True" CornerRadius="10">
<Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Label Grid.Row="0" HorizontalOptions="Center" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Boxes}" ></Label>
<Label Grid.Row="1" HorizontalOptions="Center" Text="Gallery" VerticalOptions="Start"
TextColor="#202020"></Label>
</Grid>
</Frame>
<Frame Grid.Row="1" Grid.Column="2" BackgroundColor="White" HasShadow="True" CornerRadius="10">
<Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Label Grid.Row="0" HorizontalOptions="Center" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Money_Bill}" ></Label>
<Label Grid.Row="1" HorizontalOptions="Center" Text="Profile" VerticalOptions="Start"
TextColor="#202020"></Label>
</Grid>
</Frame>
</Grid>
<Frame Grid.Row="3" CornerRadius="20" >
<StackLayout HorizontalOptions="FillAndExpand">
<Image Source="https://graphicsfamily.com/wp-content/uploads/2020/11/Professional-Web-Banner-AD-in-Photoshop-scaled.jpg" VerticalOptions="FillAndExpand" HeightRequest="110" HorizontalOptions="FillAndExpand" Aspect="Fill"></Image>
</StackLayout>
</Frame>
<Frame Grid.Row="4" CornerRadius="10" BackgroundColor="#08457E">
<Grid RowDefinitions="Auto,Auto,Auto" ColumnDefinitions="*,Auto" RowSpacing="10">
<Label Grid.Row="0" Grid.Column="0" Text="Learned Phase" TextColor="#ffffff"></Label>
<Label Grid.Row="0" Grid.Column="1" Text="12" FontAttributes="Bold" TextColor="#ffffff"></Label>
<Label Grid.Row="1" Grid.Column="0" Text="Phase left to learn" TextColor="#ffffff"></Label>
<Label Grid.Row="1" Grid.Column="1" Text="36" FontAttributes="Bold" TextColor="#ffffff"></Label>
<Label Grid.Row="2" Grid.Column="0" Text="Total Learning Time" TextColor="#ffffff"></Label>
<Label Grid.Row="2" Grid.Column="1" Text="1.5h" FontAttributes="Bold" TextColor="#ffffff"></Label>
</Grid>
</Frame>
</Grid>
And output is as below:
Please help me.
Thanks in advance.
Almost there, try this:
Update the Grid in the first Frame:
Grid ColumnDefinitions="Auto,*,Auto,Auto,Auto"
And third Grid like this:
ColumnDefinitions="*,*,*"
Full code:
<Grid RowDefinitions="Auto,Auto,Auto,Auto,Auto" Padding="10" >
<Frame BackgroundColor="White" CornerRadius="20" Grid.Row="0">
<Grid ColumnDefinitions="Auto,*,Auto,Auto,Auto" VerticalOptions="CenterAndExpand">
<Label Grid.Column="0" Grid.Row="0" Text="Primary School" FontAttributes="Bold" FontSize="16" TextColor="#08457E" ></Label>
<Label Grid.Column="1" Grid.Row="0" HorizontalOptions="EndAndExpand" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" Text="{x:Static fontawesome:Solid.Business_Time}" FontSize="20" ></Label>
<Label Grid.Column="2" Grid.Row="0" Text="Time Table" TextColor="Gray" ></Label>
<Label Grid.Column="3" Grid.Row="0" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" Text="{x:Static fontawesome:Solid.Clipboard}" FontSize="20" ></Label>
<Label Grid.Column="4" Grid.Row="0" Text="H.W." TextColor="Gray" ></Label>
</Grid>
</Frame>
<Frame CornerRadius="10" Grid.Row="1" BackgroundColor="White" >
<Grid RowDefinitions="Auto,Auto,Auto" ColumnDefinitions="Auto,Auto" >
<Label Grid.Row="0" Grid.Column="0" TextColor="#08457E" FontFamily="{StaticResource FontAwesome}" Text="{x:Static fontawesome:Solid.User}" FontSize="20" ></Label>
<Label Grid.Row="0" Grid.Column="1" Text="Xamarin UI Design" TextColor="#202020"></Label>
<Label Grid.Row="1" Grid.Column="0" TextColor="#08457E" FontFamily="{StaticResource FontAwesome}" Text="{x:Static fontawesome:Solid.Table}" FontSize="20" ></Label>
<Label Grid.Row="1" Grid.Column="1" Text="Class: V" TextColor="#202020"></Label>
<Label Grid.Row="2" Grid.Column="0" TextColor="#08457E" FontFamily="{StaticResource FontAwesome}" Text="{x:Static fontawesome:Solid.User_Edit}" FontSize="20" ></Label>
<Label Grid.Row="2" Grid.Column="1" Text="Class Tearcher: Monali Kundre" TextColor="#202020"></Label>
</Grid>
</Frame>
<Grid Grid.Row="2" RowDefinitions="Auto,Auto" ColumnDefinitions="*,*,*" RowSpacing="10" ColumnSpacing="10">
<Frame Grid.Row="0" Grid.Column="0" BackgroundColor="White" HasShadow="True" CornerRadius="10">
<Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Label Grid.Row="0" HorizontalOptions="Center" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Table}" ></Label>
<Label Grid.Row="1" HorizontalOptions="Center" Text="Syllabus" VerticalOptions="Start"
TextColor="#202020"></Label>
</Grid>
</Frame>
<Frame Grid.Row="0" Grid.Column="1" BackgroundColor="White" HasShadow="True" CornerRadius="10">
<Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Label Grid.Row="0" HorizontalOptions="Center" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Th_List}" ></Label>
<Label Grid.Row="1" HorizontalOptions="Center" Text="Test" VerticalOptions="Start"
TextColor="#202020"></Label>
</Grid>
</Frame>
<Frame Grid.Row="0" Grid.Column="2" BackgroundColor="White" HasShadow="True" CornerRadius="10">
<Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Label Grid.Row="0" HorizontalOptions="Center" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Edit}" ></Label>
<Label Grid.Row="1" HorizontalOptions="Center" Text="Notice" VerticalOptions="Start"
TextColor="#202020"></Label>
</Grid>
</Frame>
<Frame Grid.Row="1" Grid.Column="0" BackgroundColor="White" HasShadow="True" CornerRadius="10">
<Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Label Grid.Row="0" HorizontalOptions="Center" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Pallet}" ></Label>
<Label Grid.Row="1" HorizontalOptions="Center" Text="Fees" VerticalOptions="Start"
TextColor="#202020"></Label>
</Grid>
</Frame>
<Frame Grid.Row="1" Grid.Column="1" BackgroundColor="White" HasShadow="True" CornerRadius="10">
<Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Label Grid.Row="0" HorizontalOptions="Center" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Boxes}" ></Label>
<Label Grid.Row="1" HorizontalOptions="Center" Text="Gallery" VerticalOptions="Start"
TextColor="#202020"></Label>
</Grid>
</Frame>
<Frame Grid.Row="1" Grid.Column="2" BackgroundColor="White" HasShadow="True" CornerRadius="10">
<Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Label Grid.Row="0" HorizontalOptions="Center" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Money_Bill}" ></Label>
<Label Grid.Row="1" HorizontalOptions="Center" Text="Profile" VerticalOptions="Start"
TextColor="#202020"></Label>
</Grid>
</Frame>
</Grid>
<Frame Grid.Row="3" CornerRadius="20" >
<StackLayout HorizontalOptions="FillAndExpand">
<Image Source="https://graphicsfamily.com/wp-content/uploads/2020/11/Professional-Web-Banner-AD-in-Photoshop-scaled.jpg" VerticalOptions="FillAndExpand" HeightRequest="110" HorizontalOptions="FillAndExpand" Aspect="Fill"></Image>
</StackLayout>
</Frame>
<Frame Grid.Row="4" CornerRadius="10" BackgroundColor="#08457E">
<Grid RowDefinitions="Auto,Auto,Auto" ColumnDefinitions="*,Auto" RowSpacing="10">
<Label Grid.Row="0" Grid.Column="0" Text="Learned Phase" TextColor="#ffffff"></Label>
<Label Grid.Row="0" Grid.Column="1" Text="12" FontAttributes="Bold" TextColor="#ffffff"></Label>
<Label Grid.Row="1" Grid.Column="0" Text="Phase left to learn" TextColor="#ffffff"></Label>
<Label Grid.Row="1" Grid.Column="1" Text="36" FontAttributes="Bold" TextColor="#ffffff"></Label>
<Label Grid.Row="2" Grid.Column="0" Text="Total Learning Time" TextColor="#ffffff"></Label>
<Label Grid.Row="2" Grid.Column="1" Text="1.5h" FontAttributes="Bold" TextColor="#ffffff"></Label>
</Grid>
</Frame>
</Grid>
Related
This Is My Checkbox Page ,I have separated(Dictionaries,collection,reffrence) using grid ,and each part have a listview ,I want to remove the unnecessary space show in dictionaries section ,Also want to auto increase the size .I have use List View to display checkbox and all section is maintain thought grid
This Is My Checkbox Page ,I have separated by this list using grid ,I want to remove the unnecessary space show in dictionaries section ,Also want to auto increase the size .I have use List View to display checkbox and all section is maintain thought grid
This Below is my code ,
<StackLayout Padding="10" Grid.Column="0" Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="3*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="3*"/>
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Orientation="Vertical">
<Label Margin="-15,0,0,0" HorizontalOptions="StartAndExpand" Text="{x:Static resources:AppResources.Dictionaries}" Style="{StaticResource MenueLable}" ></Label>
<ListView BackgroundColor="White" ItemsSource="{Binding DictionariesFilter}" VerticalOptions="FillAndExpand" HasUnevenRows="True" SeparatorVisibility="None" RowHeight="-1">
<ListView.ItemTemplate >
<DataTemplate >
<ViewCell Tapped="Handle_Tapped" >
<StackLayout Orientation="Horizontal">
<input:CheckBox Style="{StaticResource CheckBox}" IsChecked="{Binding IsChecked}" Type="Check" CheckChangedCommand="{Binding Path=BindingContext.CheckBoxSelectionCommand, Source={x:Reference Name=entriesView}}"/>
<Label Text="{Binding DicName}" VerticalTextAlignment="Center" ></Label>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Button Text="Load More" IsVisible="False" TextColor="#22B473" FontAttributes="Bold" HorizontalOptions="Center" VerticalOptions="Start"></Button>
<Line Background="#F0F0F0" HeightRequest="2" ></Line>
</StackLayout>
<StackLayout Grid.Row="1" VerticalOptions="FillAndExpand" Orientation="Vertical">
<Label Margin="-25,0,0,0" Text="{x:Static resources:AppResources.Collection}" VerticalOptions="StartAndExpand" HorizontalOptions="StartAndExpand" Style="{StaticResource MenueLable}"></Label>
<ListView ItemsSource="{Binding CollectionsFilter}" HasUnevenRows="True" BackgroundColor="White" SeparatorVisibility="None" RowHeight="-1" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell Tapped="Handle_Tapped">
<StackLayout Orientation="Horizontal" >
<input:CheckBox Style="{StaticResource CheckBox}" Type="Check"
CheckChangedCommand="{Binding Path=BindingContext.CheckBoxSelectionCommand,
Source={x:Reference Name=entriesView}}"/>
<Label Text="{Binding DicName}" VerticalTextAlignment="Center" ></Label>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Line Background="#F0F0F0" HeightRequest="2"></Line>
</StackLayout>
<StackLayout Grid.Row="2" VerticalOptions="FillAndExpand" Orientation="Vertical">
<Label Margin="-20,0,0,0" VerticalOptions="StartAndExpand" HorizontalOptions="StartAndExpand" Text="{x:Static resources:AppResources.References}" Style="{StaticResource MenueLable}"></Label>
<ListView HasUnevenRows="True" BackgroundColor="White" ItemsSource="{Binding RefrencesFilter}" SeparatorVisibility="None" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal" >
<input:CheckBox Style="{StaticResource CheckBox}" Type="Check"
CheckChangedCommand="{Binding Path=BindingContext.CheckBoxSelectionCommand,
Source={x:Reference Name=entriesView}}"/>
<Label Text="{Binding DicName}" VerticalTextAlignment="Center" ></Label>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Line Background="#F0F0F0" HeightRequest="2"></Line>
</StackLayout>
<ScrollView Grid.Row="3">
<StackLayout VerticalOptions="StartAndExpand" HorizontalOptions="StartAndExpand" Orientation="Vertical">
<Label Margin="0,0,0,0" VerticalOptions="StartAndExpand" HorizontalOptions="StartAndExpand" Text="{x:Static resources:AppResources.CategorisedBy}" Style="{StaticResource MenueLable}"></Label>
<input:CheckBox Margin="-10,0,0,0" IsChecked="{Binding IsSelected}" Style="{StaticResource CheckBox}" Text="{x:Static resources:AppResources.Categorised_ByCheckBox1}" Type="Check" CheckChangedCommand="{Binding Path=BindingContext.CheckBoxSelectionCommand,
Source={x:Reference Name=entriesView}}"/>
<input:CheckBox Margin="-10,0,0,0" Style="{StaticResource CheckBox}" IsChecked="{Binding IsSelected}" Text="{x:Static resources:AppResources.Categorised_ByCheckBox2}" Type="Check" CheckChangedCommand="{Binding Path=BindingContext.CheckBoxSelectionCommand,
Source={x:Reference Name=entriesView}}"/>
<input:CheckBox Margin="-10,0,0,0" IsChecked="{Binding IsSelected}" Style="{StaticResource CheckBox}" Text="{x:Static resources:AppResources.Categorised_ByCheckBox3}" Type="Check" CheckChangedCommand="{Binding Path=BindingContext.CheckBoxSelectionCommand,
Source={x:Reference Name=entriesView}}"/>
<input:CheckBox Margin="-10,0,0,0" IsChecked="{Binding IsSelected}" Style="{StaticResource CheckBox}" Text="{x:Static resources:AppResources.Categorised_ByCheckBox4}" Type="Check" CheckChangedCommand="{Binding Path=BindingContext.CheckBoxSelectionCommand,
Source={x:Reference Name=entriesView}}"/>
</StackLayout>
</ScrollView>
</Grid>
</StackLayout>
<ListView ItemsSource="{Binding Product}" CachingStrategy="RecycleElement" HasUnevenRows="True" x:Name="lstProducts" SelectedItem="{Binding SelectedProduct}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Frame CornerRadius="13" Padding="-10" BackgroundColor="#00a8cc">
<StackLayout Margin="35" Orientation="Horizontal">
<ImageButton Source="uninstalling_updates_64px.png" HorizontalOptions="StartAndExpand" WidthRequest="20" BackgroundColor="Transparent"/>
<Label Text="{Binding ProductId}" FontSize="10" HorizontalOptions="CenterAndExpand" x:Name="lblProductId"/>
<Label Text="{Binding ProductName}" FontAttributes="Bold" FontSize="15" HorizontalOptions="Center"/>
<Label Text="{Binding ProductDetail}" FontSize="13" HorizontalOptions="CenterAndExpand"/>
<Label Text="{Binding ProductPrice}" FontSize="8" HorizontalOptions="CenterAndExpand"/>
<ImageButton Source="trash_48px.png" HorizontalOptions="EndAndExpand" WidthRequest="20" BackgroundColor="Transparent" x:Name="deleteButn" Clicked="deleteButn_Clicked"/>
</StackLayout>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
I have a listview here and I want to delete that record with a button I put in the listview. How can I do? thanks for your help
I am trying to manipulate a stacklayout but I cannot getting its name on controller to change it visible or not. How can I do that, is it works on Xamarin ?
Trying
<ContentPage.Content>
<StackLayout HorizontalOptions="FillAndExpand" Padding="2">
<StackLayout HorizontalOptions="FillAndExpand">
<Label Text="Compre agora seu número da sorte"
FontSize="Small"
TextColor="Gray"
FontAttributes="Bold"
HorizontalOptions="CenterAndExpand"
/>
</StackLayout>
<StackLayout HorizontalOptions="FillAndExpand">
<Label Text="Concurso" FontAttributes="Bold"></Label>
<Label x:Name="idConcurso"></Label>
<Label Text="Prêmio" FontAttributes="Bold"></Label>
<Label x:Name="premioNome"></Label>
</StackLayout>
<StackLayout HorizontalOptions="FillAndExpand">
<ListView x:Name="GridNumerosDaSorte"
SeparatorVisibility="Default"
HasUnevenRows="true"
ItemAppearing="OnItemAppearing"
>
<ListView.Header>
<StackLayout Orientation="Horizontal" BackgroundColor="#335D3B">
<Label Text="Nº da Sorte" TextColor="#FFF" HorizontalOptions="StartAndExpand" ></Label>
<Label Text="Valor(R$)" TextColor="#FFF" HorizontalOptions="CenterAndExpand" ></Label>
<Label Text="Controle" TextColor="#335D3B" HorizontalOptions="EndAndExpand" ></Label>
</StackLayout>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal" Margin="0,10,0,0">
<Label Text="{Binding numero}" HorizontalOptions="StartAndExpand"></Label>
<Label Text="{Binding valor, StringFormat='{}{0:N}'}" HorizontalOptions="EndAndExpand" ></Label>
<Button Text="Comprar" Clicked="OnComprarClick" CommandParameter="{Binding .}" HorizontalOptions="EndAndExpand" BackgroundColor="Orange"></Button>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
<StackLayout x:Name="FooterPanel" HorizontalOptions="FillAndExpand" IsVisible="False">
<Label Text="text 1" HorizontalOptions="StartAndExpand"></Label>
<Label Text="text 2" HorizontalOptions="CenterAndExpand"></Label>
<Label Text="text 3" HorizontalOptions="EndAndExpand"></Label>
</StackLayout>
</StackLayout>
</ContentPage.Content>
Controller
//x:Name does not appear on controller, it does not works
FooterPanel.isVisible = true;
Here is the code that I am using with Xamarin Forms:
<Grid Grid.Column="0" ColumnSpacing="0" Margin="0,0,10,0">
<Label Grid.Column="0" x:Name="faveIconLabel" Style="{StaticResource mediumIcon}" Margin="0,2,0,0" HorizontalOptions="Fill" FontFamily="FontAwesome" VerticalOptions="Center" VerticalTextAlignment="Center" />
<Label Grid.Column="1" x:Name="hiddenIconLabel" Style="{StaticResource mediumIcon}" Margin="0,2,0,0" HorizontalOptions="Fill" FontFamily="FontAwesome" VerticalOptions="Center" VerticalTextAlignment="Center" />
</Grid>
Can someone help and let me know how I can surround these two labels with a border to make them as much as possible look like buttons.
Frame can be used for this very purpose:
<Grid Grid.Column="0" ColumnSpacing="0" Margin="0,0,10,0">
<Frame Grid.Column="0" CornerRadius="5" OutlineColor="Black">
<Label x:Name="faveIconLabel" Style="{StaticResource mediumIcon}" Margin="0,2,0,0" HorizontalOptions="Fill" FontFamily="FontAwesome" VerticalOptions="Center" VerticalTextAlignment="Center" />
</Frame>
<Frame Grid.Column="1" CornerRadius="5" OutlineColor="Black">
<Label x:Name="hiddenIconLabel" Style="{StaticResource mediumIcon}" Margin="0,2,0,0" HorizontalOptions="Fill" FontFamily="FontAwesome" VerticalOptions="Center" VerticalTextAlignment="Center" />
</Frame>
</Grid>
I have a Xamarin PCL Android/iOS/UWP project. Im using Iconize FontAwsome icons for the application. Problem is that UWP dosent display any icons, but Android does
Like this:
My form:
<?xml version="1.0" encoding="utf-8" ?>
<controls:BasePage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:controls="clr-namespace:Volaapp.Controls;assembly:Volaapp"
xmlns:converters="clr-namespace:Volaapp.Converters;assembly:Volaapp"
xmlns:icons="clr-namespace:FormsPlugin.Iconize;assembly=FormsPlugin.Iconize"
xmlns:xlabs="clr-namespace:XLabs.Forms.Controls;assembly=XLabs.Forms"
x:Class="Volaapp.Pages.CreateTodoPage"
BackgroundColor="{StaticResource GrayColor}"
Title="Lisa uus võlg">
<ScrollView BackgroundColor="{StaticResource WhiteColor}">
<StackLayout Margin="10"
BackgroundColor="{StaticResource WhiteColor}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="65"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="65"/>
<RowDefinition Height="65"/>
<RowDefinition Height="65"/>
<RowDefinition Height="65"/>
<RowDefinition/>
</Grid.RowDefinitions>
<!--Nimi ja Summa-->
<StackLayout Grid.Column="0" Grid.Row="0"
BackgroundColor="{StaticResource MetroWhiteColor}"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<icons:IconImage VerticalOptions="CenterAndExpand"
HorizontalOptions="Center"
Icon="fa-gg"
IconColor="{StaticResource MetroBlackColor}"
HeightRequest="30"/>
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="0"
Orientation="Vertical"
BackgroundColor="{StaticResource MetroWhiteColor}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<StackLayout Orientation="Vertical"
BackgroundColor="{StaticResource WhiteColor}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Margin="0,1,1,1">
<Entry Text="{Binding Title}"
Placeholder="Sisesta pealkiri"
VerticalOptions="EndAndExpand"
Keyboard="Text"
Margin="15,0,15,2"/>
<Entry
VerticalOptions="EndAndExpand"
Placeholder="Sisesta Summa!"
Text="{Binding Loan}"
Keyboard="Numeric"
Margin="15,2,15,10"
/>
</StackLayout>
</StackLayout>
<!--Inimesed-->
<StackLayout Grid.Column="0" Grid.Row="1"
BackgroundColor="{StaticResource MetroWhiteColor}"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<icons:IconImage VerticalOptions="CenterAndExpand"
HorizontalOptions="Center"
Icon="fa-user"
IconColor="{StaticResource MetroBlackColor}"
HeightRequest="30"/>
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="1"
Orientation="Vertical"
BackgroundColor="{StaticResource MetroWhiteColor}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<StackLayout Orientation="Vertical"
BackgroundColor="{StaticResource WhiteColor}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Margin="0,1,1,1">
<controls:BindablePicker Margin="20,5"
ItemsSource="{Binding Tags}"
SelectedItem="{Binding SelectedTag, Mode=TwoWay}"
DisplayMemberPath="Title"
Title="Vali inimene"
VerticalOptions="EndAndExpand"/>
</StackLayout>
</StackLayout>
<!--Rahatäht-->
<StackLayout Grid.Column="0" Grid.Row="2"
BackgroundColor="{StaticResource MetroWhiteColor}"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<icons:IconImage VerticalOptions="CenterAndExpand"
HorizontalOptions="Center"
Icon="fa-money"
IconColor="{StaticResource MetroBlackColor}"
HeightRequest="30"/>
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="2"
Orientation="Vertical"
BackgroundColor="{StaticResource MetroWhiteColor}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<StackLayout Orientation="Vertical"
BackgroundColor="{StaticResource WhiteColor}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Margin="0,1,1,1">
<controls:BindablePicker Margin="20,5"
ItemsSource="{Binding CurrencyList}"
SelectedItem="{Binding Currency, Mode=TwoWay}"
Title="Vali Rahatäht"
VerticalOptions="EndAndExpand"/>
</StackLayout>
</StackLayout>
<!--Due date-->
<StackLayout Grid.Column="0" Grid.Row="3"
Orientation="Vertical"
BackgroundColor="{StaticResource MetroWhiteColor}"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<xlabs:ImageButton Image="_duedate.png"
ImageHeightRequest="35"
ImageWidthRequest="35"
BackgroundColor="{StaticResource MetroWhiteColor}"
VerticalOptions="CenterAndExpand"
HorizontalOptions="Center"
BorderRadius="0"
Command="{Binding SelectDueDateCommand}"/>
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="3"
BackgroundColor="{StaticResource MetroWhiteColor}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<StackLayout BackgroundColor="{StaticResource WhiteColor}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Margin="0,1,1,1">
<Label Text="{Binding DueTime, StringFormat='Kuupäev {0:dd.MM.yyyy HH:mm}'}"
FontSize="17"
Margin="25,0"
TextColor="{StaticResource BlackColor}"
VerticalTextAlignment="Start"
VerticalOptions="CenterAndExpand"
HorizontalOptions="StartAndExpand">
</Label>
</StackLayout>
</StackLayout>
<!--Meeldetuletus-->
<StackLayout Grid.Column="0" Grid.Row="4"
Orientation="Vertical"
BackgroundColor="{StaticResource MetroWhiteColor}"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<Image HeightRequest="35"
WidthRequest="35"
Source="{Binding ReminderIcon}"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand">
</Image>
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="4"
BackgroundColor="{StaticResource MetroWhiteColor}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<StackLayout BackgroundColor="{StaticResource WhiteColor}"
Orientation="Horizontal"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Margin="0,1,1,1">
<Label Text="Meeldetuletus"
FontSize="17"
Margin="25,0,0,0"
TextColor="{StaticResource BlackColor}"
VerticalTextAlignment="Start"
VerticalOptions="CenterAndExpand"
HorizontalOptions="Start"/>
<Switch IsToggled="{Binding EnableReminder, Mode=TwoWay}"
VerticalOptions="CenterAndExpand"
HorizontalOptions="Start"
Margin="20,0"/>
</StackLayout>
</StackLayout>
<!--Button-->
<StackLayout Grid.Column="1" Grid.Row="5"
Orientation="Horizontal" Margin="0,30"
HorizontalOptions="EndAndExpand"
VerticalOptions="CenterAndExpand">
<xlabs:ImageButton
BackgroundColor="{StaticResource MetroWhiteColor}"
Text="SAVE" FontSize="12"
IsEnabled="{Binding IsValid}"
HorizontalOptions="StartAndExpand"
HeightRequest="40"
WidthRequest="100"
BorderRadius="0"
Command="{Binding SaveCommand}"/>
<xlabs:ImageButton
BackgroundColor="{StaticResource MetroWhiteColor}"
Text="CANCEL"
HorizontalOptions="StartAndExpand"
BorderRadius="0"
HeightRequest="40"
WidthRequest="100"
FontSize="12"
Command="{Binding CancelCommand}"/>
</StackLayout>
</Grid>
</StackLayout>
</ScrollView>
</controls:BasePage>
Am I missing a nugget or UWP dosent support iconize?
The nuggets that are installed in UWP for iconize:
Xam.Plugin.Iconize.FontAwsome
Xam.Plugin.Iconize
Xam.FormsPlugin.Iconize
FontAwsome.UWP
This is a known but no acknowledged issue and doesn't seem to be fixed in the current version. GitHub Issue #13. I also experience the same issue.
The workaround, is to do this:
Create a folder Plugin.Iconize.Material.UWP\Assets\Fonts\ in the root
of your project.
Copy fontawesome.ttf to the new directory and set
to Copy if newer as its output.