The screenshot below shows a header that includes a hamburger menu and a title. Notice how the title is centered on it's bounding area (the red box). How can I get the title to center on the width of the phone, but leave the hamburger menu where it is?
Here is the code that creates the header area...
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="WP.MobileMidstream.Device.Pages.RunSheetHeader">
<ContentView.Resources>
<Style x:Key="HeaderStyle" TargetType="StackLayout">
<Setter Property="BackgroundColor" Value="#00458C" />
</Style>
</ContentView.Resources>
<ContentView.Content>
<StackLayout Orientation="Horizontal"
HorizontalOptions="FillAndExpand"
Style="{StaticResource HeaderStyle}">
<StackLayout.HeightRequest>
<OnPlatform x:TypeArguments="x:Double">
<On Platform="iOS">80</On>
<On Platform="Android">56</On>
</OnPlatform>
</StackLayout.HeightRequest>
<Image Source="hamburger_icon"
Margin="10" />
<Label VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
HorizontalOptions="FillAndExpand"
FontSize="20"
BackgroundColor="Red"
TextColor="White">Daily Run Sheet</Label>
</StackLayout>
</ContentView.Content>
</ContentView>
#Jason suggested a Grid instead of the StackLayout. Here is what I came up with that works. Thanks #Jason!
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="WP.MobileMidstream.Device.Pages.RunSheetHeader">
<ContentView.Resources>
<Style x:Key="HeaderStyle" TargetType="Grid">
<Setter Property="BackgroundColor" Value="#00458C" />
</Style>
</ContentView.Resources>
<ContentView.Content>
<Grid Style="{StaticResource HeaderStyle}">
<Grid.RowDefinitions>
<RowDefinition>
<RowDefinition.Height>
<OnPlatform x:TypeArguments="GridLength">
<On Platform="iOS">80</On>
<On Platform="Android">56</On>
</OnPlatform>
</RowDefinition.Height>
</RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="2"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
HorizontalOptions="Fill"
FontSize="20"
TextColor="White">Daily Run Sheet</Label>
<Image Source="hamburger_icon"
Grid.Row="0"
Grid.Column="0"
Margin="10" />
</Grid>
</ContentView.Content>
</ContentView>
Related
I have a problem. I want created this ListView using the following 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"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="MyApp.HomePage">
<ContentPage.Content>
<ListView x:Name="ListViewMain" VerticalOptions="FillAndExpand" BackgroundColor="#212121" SelectionMode="None">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid x:Name="GridMain">
<Grid.RowDefinitions>
<RowDefinition Height="40" x:Name="Row0_Height"/>
<RowDefinition Height="180" x:Name="Row1_Height"/>
<RowDefinition Height="180" x:Name="Row2_Height"/>
<RowDefinition Height="40" x:Name="Row3_Height"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40" x:Name="Column0_Width" />
<ColumnDefinition Width="*" x:Name="Column1_Width" />
<ColumnDefinition Width="40" x:Name="Column2_Width" />
</Grid.ColumnDefinitions>
<Label Text="{Binding Creator}" TextColor="White" FontSize="Body" FontAttributes="Bold" Grid.Column="1" Grid.Row="0" VerticalOptions="Center" HorizontalOptions="Start"/>
<Image Source="VoteUp.png" VerticalOptions="End" HorizontalOptions="Center" Grid.Row="1" Grid.Column="0">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="imgVoteUp_Clicked" />
</Image.GestureRecognizers>
</Image>
<Image Source="VoteDown.png" VerticalOptions="Start" HorizontalOptions="Center" Grid.Row="2" Grid.Column="0">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="imgVoteDown_Clicked" />
</Image.GestureRecognizers>
</Image>
<Image Source="{Binding ImageLocation}" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1" Grid.RowSpan="2" BackgroundColor="AliceBlue" VerticalOptions="Fill" HorizontalOptions="Fill"/>
<Image Source="Favorite.png" Grid.Row="3" Grid.Column="1" HorizontalOptions="Start">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="imgFavorite_Clicked" />
</Image.GestureRecognizers>
</Image>
<Image Source="Send_Dark.png" Grid.Row="3" Grid.Column="1" HorizontalOptions="End"/>
<Image Source="Save_Dark.png" Grid.Row="3" Grid.Column="2" HorizontalOptions="End"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage.Content>
</ContentPage>
But now I want to add a line above the first Label tag. To create the line I want I use this code:
<Label HeightRequest="1" BackgroundColor="#E3E3E3" />
But I don't know where to put it and how, because it is a Grid. I want to add it before the Grid, but that gives me the error:
The property 'View' is set more than once.
What am I doing wrong and how can I fix this?
I would use a BoxView instead of a Label. You could use this layout, placing the BoxView in the same Row as the Label, but vertically aligned
the other things you could try
add another row to the Grid for the BoxView
place the Grid inside of a StackLayout with the BoxView
Notice the blank (dark blue) line between row 0 and row 1 in this image...
I am not sure where this row comes from, but how do I get rid of it so the two rows have no spacing between them?
Here is the XAML...
<?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:control="clr-namespace:WP.MobileMidstream.Device.Pages"
x:Class="WP.MobileMidstream.Device.Pages.LoginPage"
Visual="Material">
<ContentPage.Resources>
<Style x:Key="HeaderStyle" TargetType="Grid">
<Setter Property="BackgroundColor" Value="#00458C" />
</Style>
</ContentPage.Resources>
<ContentPage.Content>
<Grid Style="{StaticResource HeaderStyle}"
Padding="0"
Margin="0">
<Grid.RowDefinitions>
<RowDefinition Height="23" />
<RowDefinition Height="56" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<BoxView Color="Red"
Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="2"
Margin="0" />
<Label Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="2"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
BackgroundColor="RosyBrown"
Margin="0"
FontSize="20"
TextColor="White">Daily Run Sheet</Label>
<Image Source="hamburger_icon"
Margin="10, 0, 0, 0"
Grid.Row="1"
Grid.Column="0" />
</Grid>
</ContentPage.Content>
</ContentPage>
I think you have wrong ColSpan and Column assignment for the second row:
<Label Grid.Row="1"
Grid.Column="1"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
BackgroundColor="RosyBrown"
Margin="0"
FontSize="20"
TextColor="White">Daily Run Sheet</Label>
<Image Source="hamburger_icon"
Margin="10, 0, 0, 0"
Grid.Row="1"
Grid.Column="0" />
Update:
Try setting the RowSpacing to be 0 on grid.
I'm building a Xamarin Crossplatform App
For drawer menu I'm following this tutorial : https://www.youtube.com/watch?v=aYjK0cPjZMQ
But the problem is when I change my MainPage from ContentPage to MasterDetailPage it shows me this error:
MainPage.XAML :
<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Last_MSPL"
x:Class="Last_MSPL.MainPage">
<MasterDetailPage.Master>
<ContentPage Title="Menu">
<Grid BackgroundColor="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="200" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid>
<Image Source="bg.png" Aspect="AspectFill" />
<StackLayout Padding="0,20,0,0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
<Image Source="profile.png" Aspect="AspectFill" WidthRequest="85" HeightRequest="85" />
<Label Text="Xam Buddy" TextColor="White" FontSize="Large" />
</StackLayout>
</Grid>
<StackLayout Grid.Row="1" Spacing="15">
<ListView x:Name="navigationDrawerList"
RowHeight="60"
SeparatorVisibility="None"
BackgroundColor="#e8e8e8"
ItemSelected="OnMenuItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<!-- Main design for our menu items -->
<StackLayout VerticalOptions="FillAndExpand"
Orientation="Horizontal"
Padding="20,10,0,10"
Spacing="20">
<Image Source="{Binding Icon}"
WidthRequest="40"
HeightRequest="40"
VerticalOptions="Center" />
<Label Text="{Binding Title}"
FontSize="Small"
VerticalOptions="Center"
TextColor="Black"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</Grid>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
Help me through this so I can move forward, Thanks!
I just Clean my project, rebuild and it works
because the generated .g.cs from the xaml has not been refreshed so it was giving this error
My application calls two templates that create something similar to two ViewCells:
<StackLayout Orientation="Horizontal" Padding="10">
<template:DataGridTemplate Text="Updated" Label="{Binding Updated}" />
<template:DataGridTemplate Text="Version" Label="{Binding Version}" />
</StackLayout>
Here's the template XAML
<?xml version="1.0" encoding="utf-8"?>
<Grid Padding="20,0" xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Japanese;assembly=Japanese"
x:Class="Japanese.Templates.DataGridTemplate"
x:Name="this">
<local:StyledLabel Text="{Binding Text, Source={x:Reference this}}" HorizontalOptions="Start" VerticalTextAlignment="Center" />
<local:StyledLabel Text="{Binding Label, Source={x:Reference this}}" HorizontalOptions="End" VerticalTextAlignment="Center" />
</Grid>
I would like the height of the template to be 50 and also to have a line created between the two templates to simulate something like I would find in a ViewCell that's inside a TableSection.
Does anyone have any suggestions how I can do this? I tried setting the height of the Grid to 50 but it tells me that it's a read only property.
StackLayout
<StackLayout Orientation="Vertical" Padding="10" Spacing="0">
<template:DataGridTemplate Text="Updated" Label="07/21/2018" />
<template:DataGridTemplate Text="Version" Label="1.0.0" />
</StackLayout>
DataGridTemplate (the line separator is in here, but could be added directly to the StackLayout instead)
<?xml version="1.0" encoding="utf-8"?>
<Grid Padding="20,0" HeightRequest="50" xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Sof2"
x:Class="Sof2.Templates.DataGridTemplate"
x:Name="this">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<local:StyledLabel Grid.Column="0" Text="{Binding Text, Source={x:Reference this}}" VerticalTextAlignment="Center" />
<local:StyledLabel Grid.Column="1" Text="{Binding Label, Source={x:Reference this}}" TextColor="Silver" VerticalTextAlignment="Center" />
<!-- Separator -->
<BoxView Grid.ColumnSpan="2" BackgroundColor="Silver" HeightRequest="1" VerticalOptions="End" />
</Grid>
Result
If interactivity is needed, then you could add TapGestureRecognizers as appropriate.
I have a xaml, which has a grid with listview and button, and at the
moment of compiling this error appears:
Error: Specified cast is not valid.
I think the problem may be in the listview that is inside the grid, but I have not really been able to find a solution
this is my xaml:
<?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="FCR.App.Views.AdvanceSearchResultPage" Title="AdvanceSearchResultPage" xmlns:extended="clr-namespace:FCR.App.ExtendedClasses;assembly=FCR.App">
<ContentPage.Padding>
<OnPlatform x:TypeArguments="Thickness" iOS="0, 10, 0, 0" WinPhone="20,20,20,20" />
</ContentPage.Padding>
<ContentPage.Content>
<StackLayout VerticalOptions="StartAndExpand">
<ContentView IsVisible="false" x:Name="TitleHC">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*" />
<ColumnDefinition Width="9.5*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Source="blue_circle.png" Grid.Column="0" />
<StackLayout Padding="0,4,0,5" VerticalOptions="Fill" Grid.Column="1">
<Label VerticalOptions="CenterAndExpand" TextColor="#0368b1" Text="Histórico de conéxiones" FontSize="20">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<OnPlatform.iOS>FrutigerLTStd-Cn</OnPlatform.iOS>
<OnPlatform.Android>FrutigerLTStd-Cn.otf#FrutigerLTStd-Cn</OnPlatform.Android>
</OnPlatform>
</Label.FontFamily>
</Label>
</StackLayout>
</Grid>
</ContentView>
<ContentView IsVisible="false" x:Name="TitleHM">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*" />
<ColumnDefinition Width="9.5*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Source="blue_circle.png" Grid.Column="0" />
<StackLayout Padding="0,4,0,5" VerticalOptions="Fill" Grid.Column="1">
<Label VerticalOptions="CenterAndExpand" TextColor="#0368b1" Text="Histórico de módificaciones" FontSize="20">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<OnPlatform.iOS>FrutigerLTStd-Cn</OnPlatform.iOS>
<OnPlatform.Android>FrutigerLTStd-Cn.otf#FrutigerLTStd-Cn</OnPlatform.Android>
</OnPlatform>
</Label.FontFamily>
</Label>
</StackLayout>
</Grid>
</ContentView>
<Grid VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ContentView x:Name="contentListView" IsVisible="true" Padding="0,10,0,0" BackgroundColor="White" Grid.Row="0">
<ListView x:Name="resultListView" BackgroundColor="White" HasUnevenRows="true" HorizontalOptions="FillAndExpand" SeparatorVisibility="None">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout BackgroundColor="White" Padding="0" Opacity="90">
<ContentView Padding="1,0,1,1" BackgroundColor="Gray">
<Grid
BackgroundColor="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.7*">
</ColumnDefinition>
<ColumnDefinition Width="0.15*">
</ColumnDefinition>
<ColumnDefinition Width="0.15*">
</ColumnDefinition>
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="0">
<Label Margin="-5" Text="{Binding NombreCompleto}" TextColor="Gray" Font="Bold,13" />
<Label Margin="-5"
Text="{Binding OrganizacionMayusculas}" TextColor="Gray" FontSize="13" />
<Label Margin="-5" Text="{Binding Region}" TextColor="Gray" FontSize="13" />
</StackLayout>
<Label Margin="0,0,0,2" Text="Detalle" Grid.Column="1"
Font="Bold, 13" ClassId="{Binding IdContacto}" TextColor="Gray" VerticalOptions="End">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String" iOS="8">
<OnPlatform.iOS>FrutigerLTStd-BoldCn</OnPlatform.iOS>
<OnPlatform.Android>FrutigerLTStd-BoldCn.otf#FrutigerLTStd-BoldCn</OnPlatform.Android>
</OnPlatform>
</Label.FontFamily>
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="OnTapGestureRecognizerDetail" />
</Label.GestureRecognizers>
</Label>
<Label Margin="0,0,0,2" Text="Borrar" Grid.Column="2"
Font="Bold, 13" ClassId="{Binding IdContacto}" TextColor="Gray" VerticalOptions="End">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String" iOS="8">
<OnPlatform.iOS>FrutigerLTStd-BoldCn</OnPlatform.iOS>
<OnPlatform.Android>FrutigerLTStd-BoldCn.otf#FrutigerLTStd-BoldCn</OnPlatform.Android>
</OnPlatform>
</Label.FontFamily>
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="OnTapGestureRecognizerDelete" />
</Label.GestureRecognizers>
</Label>
</Grid>
</ContentView>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentView>
<StackLayout>
<extended:CustomButton Text="Volver" Grid.Row="1" x:Name="dismissbutton" Clicked="OnDismissButtonClicked" WidthRequest="100" Style="{StaticResource buttonStyle}" />
</StackLayout>
</Grid>
</StackLayout>
</ContentPage.Content>
</ContentPage>
The problem
Generally these sort of error you might find while working with data binding. While we are trying to bind a different type with some controls which the complier is not exactly expecting.
There are few places I could find the binding little odd -
ClassId="{Binding IdContacto}"
I am not sure whether you are binding correctly or not. If I were you I would have removed all the ClassId bindings and then go ahead with build compiling the process.
Also I would try to comment out the OnPlatform code and build/compile/Run the project.
These are some long shots which you may try. After looking at the whole Stacktrace may be we will be able to diagnose more towards the exact issue.