<render:CustomImageBorder x:Name="imgButtom" Source="{Binding CardImage}"
HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
<render:CustomImageBorder.GestureRecognizers>
<TapGestureRecognizer Command="{Binding TabCommand}" NumberOfTapsRequired="1" />
</render:CustomImageBorder.GestureRecognizers>
</render:CustomImageBorder>
kindly help me to solve this problem .
Related
I have the following
<CollectionView Margin="5" ItemsSource="{Binding Subjects}">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical" Span="2" />
</CollectionView.ItemsLayout>
<CollectionView.EmptyView>
<ContentView>
<Label Text="No subjects entered yet..." />
</ContentView>
</CollectionView.EmptyView>
<CollectionView.ItemTemplate>
<DataTemplate>
<Border MaximumWidthRequest="300">
<Border.StrokeShape>
<RoundRectangle CornerRadius="10" />
</Border.StrokeShape>
<Border.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Source={RelativeSource AncestorType={x:Type vm:MainPageViewModel}}, Path=DeleteSubjectCommand}" CommandParameter="{Binding .}" />
</Border.GestureRecognizers>
<Label Margin="5" Text="{Binding .}" />
</Border>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
The problem is that the <Label Margin="5" Text="{Binding .}" /> is blank in release in my .NET MAUI Android application while in debug, it is populated and the gesture recogniser works.
When I add items to the list, the correct number of items appears so it leads me to think that there is something happening with the label highlighted above.
How do I solve this?
Replace:
<DataTemplate>
With:
<DataTemplate x:DataType="{x:Type x:String}>
Do not ask me why.
I have 3 frames, each one containing 1 image/icon and 1 text label.
I have this code :
<StackLayout Spacing="0" Padding="0">
<Frame CornerRadius="3" BackgroundColor="#4167b2" HeightRequest="45" Margin="35" Padding="0" HasShadow="false">
<StackLayout Orientation="Horizontal" Padding="0" Spacing="0">
<Image HeightRequest="80" Aspect="AspectFill" Source="https://img.icons8.com/color/120/000000/facebook.png" />
<Label Text="Login com facebook" VerticalOptions="CenterAndExpand" FontSize="20" FontAttributes="Bold" TextColor="White" />
<StackLayout.GestureRecognizers>
<TapGestureRecognizer x:Name="FacebookButton" AutomationId="FacebookButton" Command="{Binding FacebookButtonCommand}" />
</StackLayout.GestureRecognizers>
</StackLayout>
</Frame>
<Frame CornerRadius="3" BackgroundColor="#D44638" HeightRequest="45" Margin="35" Padding="0" HasShadow="false" >
<StackLayout Orientation="Horizontal" Padding="0" Spacing="0">
<Image HeightRequest="80" Aspect="AspectFill" Source="https://img.icons8.com/color/120/000000/gmail.png" />
<Label Text="Login com g-mail" VerticalOptions="CenterAndExpand" FontSize="20" FontAttributes="Bold" TextColor="White" />
<StackLayout.GestureRecognizers>
<TapGestureRecognizer x:Name="GmailButton" AutomationId="GmailButton" Command="{Binding GmailButtonCommand}" />
</StackLayout.GestureRecognizers>
</StackLayout>
</Frame>
<Frame CornerRadius="3" BackgroundColor="#1dcaff" HeightRequest="45" Margin="35" Padding="0" HasShadow="false" >
<StackLayout Orientation="Horizontal" Padding="0" Spacing="0">
<Image HeightRequest="80" Aspect="AspectFill" Source="https://img.icons8.com/color/120/000000/twitter-squared.png" />
<Label Text="Login com twitter" VerticalOptions="CenterAndExpand" FontSize="20" FontAttributes="Bold" TextColor="White" />
<StackLayout.GestureRecognizers>
<TapGestureRecognizer x:Name="TwitterButton" AutomationId="TwitterButton" Command="{Binding TwitterButtonCommand}" />
</StackLayout.GestureRecognizers>
</StackLayout>
</Frame>
</StackLayout>
But it puts the buttons very away from each other. I would like them to be close to each other and in same column. Can anybody help ?
You are using a very large Margin value (35) on each frame. The Margin is applicable to each element it is specified on - hence you are getting 70pixel spacing between frames (35 + 35 top & bottom).
Rather than specific a a single value which applies all around the element, the Left,Top,Right, Bottom margin/padding can be specified separately as comma separated values (you can have 2 comma separated values for matching left/right & to/bottom spacing too).
Maybe try Margin="35,0,35,0" to retain the left-right spacing & minimise the top-bottom spacing. Note this could be simplified to Margin="35,0" - with this format the 35 applies to left & right, the zero to top & bottom.
There is no reason for top/bottom & left/right to be identical - you can adjust each to get the best effect.
See this link : https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/margin-and-padding
Here is a screenshot of the problem (Left= Xamarin.Forms previewer; Right= ADV 768x1080)
Code:
<Frame BackgroundColor="#292929" VerticalOptions="CenterAndExpand" Margin="20,0,20,0" CornerRadius="4" Padding="0">
<StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Padding="5">
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="Tomato">
<Label FontSize="Small" Text="ABBONAMENTO 30 giorni" TextColor="White"/>
<Label FontSize="Small" Text="€10,99" HorizontalOptions="EndAndExpand" TextColor="#ff9900"/>
</StackLayout>
<Button HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Text="ISCRIVITI" TextColor="#eeeeee" BackgroundColor="#FF9900" CornerRadius="4"/>
</StackLayout>
</Frame>
The frames are put in a StackLayout, which parent is a Grid.
The problem persists on low resolution devices only.
Can you tell me why is this happening, and how to fix it?
I need this layout to be height-aware and responsive.
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.
I have a list view with a DataTemplate and inside it I have a StackLayout that I need set its background but the color of it is inside a variable...When I programmatically set the background of an object using this variable color it works, but when I try to use "binding" in xaml it doesn't work and I can't get this stack programmatically because it's inside a data template...
I really need your answer..
Some help?
<ListView.ItemTemplate>
<DataTemplate>
<!--<DataTemplate.Triggers>
<DataTrigger Binding="{Binding fundoColor}" Value="4">
<Setter TargetName="produtos_stack_color" Property="Background" Value="LawnGreen" />
</DataTrigger>
</DataTemplate.Triggers>-->
<ViewCell>
<StackLayout x:Name="produtos_stack_color" BackgroundColor="{Binding fundoColor}" VerticalOptions="FillAndExpand" Margin="10,10,10,10">
<StackLayout Orientation="Horizontal" Padding="10,10,10,10" BackgroundColor="Black" HorizontalOptions="FillAndExpand">
<Image Source="{Binding imagem}" HeightRequest="80" HorizontalOptions="CenterAndExpand" WidthRequest="160" Aspect="Fill"/>
<StackLayout Orientation="Horizontal" BackgroundColor="Green" VerticalOptions="Center" HorizontalOptions="CenterAndExpand">
<Label Style="{StaticResource labelsfont}" Text="R$" FontSize="Medium" TextColor="White"/>
<Label Style="{StaticResource labelsfont}" Text="{Binding valor}" FontAttributes="Bold" FontSize="Large" TextColor="White"/>
</StackLayout>
</StackLayout>
<StackLayout Margin="0,0,0,10">
<Label Text="{Binding nome}" Style="{StaticResource labelsfont}" FontAttributes="Bold" FontSize="Medium" TextColor="White" VerticalOptions="StartAndExpand" HorizontalOptions="Center"/>
<ContentView BackgroundColor="Chartreuse" HorizontalOptions="FillAndExpand">
<Label Style="{StaticResource labelsfont}" Text="{Binding observacao}" TextColor="White" Margin="10,10,10,10" HorizontalOptions="Center" />
</ContentView>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
I heard about triggers...but I really don't know how it works exactly...
I need produtos_stack_color receive the color
My global variable in code behind...It is setted just in construct of my class
InitializeComponent();
fundoColor = Color.FromHex(this.categEscolhida.corFundo);
You can only bind with properties - so you will have to create a property in code-behind class.
public Color FundoColor { get { return fundoColor; } }
Secondly, in order to refer this property in XAML - you can use Reference extension, and specify parent as Source. For e.g.:
<StackLayout x:Name="produtos_stack_color"
BackgroundColor="{Binding FundoColor, Source={x:Reference ParentHost}}" ..>
And, make sure to set x:Name attribute in root node of your XAML. For e.g:
<ContentPage x:Name="ParentHost" .. />