Access a Label placed inside a ContentView inside a ResourceDictionary - xaml

I have below XAML which contains ContentView inside my main XAML.
I want to know how can I access the LabelPushNotificationPrice to change the Text?
<?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:SyncfusionBusyIndicator="clr-namespace:Syncfusion.SfBusyIndicator.XForms;assembly=Syncfusion.SfBusyIndicator.XForms"
x:Class="ZayedAlKhair.InitiativeDetails"
xmlns:SyncfusionPopup="clr-namespace:Syncfusion.XForms.PopupLayout;assembly=Syncfusion.SfPopupLayout.XForms"
Title="زايد الخير">
<ContentPage.Resources>
<ResourceDictionary>
<DataTemplate x:Key="PushNotificationsViewTemplate">
<ContentView BackgroundColor="White" x:Name="PushNotificationsContentView">
<StackLayout Padding="15">
<Label HorizontalTextAlignment="End" Text="هذه الخدمة تمكنكم من إرسال تنبيهات الهواتف الذكية لجميع مشتركي تطبيق زايد الخير وهي أفضل خدمة لتصل مبادرتكم لآلاف المشتركين" HeightRequest="90" WidthRequest="100" />
<Label x:Name="**LabelPushNotificationPrice**" HorizontalTextAlignment="End" Text="سعر الخدمة : 499 دولار" HeightRequest="30" WidthRequest="100" />
<Label HorizontalTextAlignment="End" Text="مدة الترويج : مرة واحدة لكل مبادرة" HeightRequest="30" WidthRequest="100" />
</StackLayout>
</ContentView>
</DataTemplate>
<DataTemplate x:Key="PromoteViewTemplate">
<ContentView BackgroundColor="White" x:Name="PromoteContentView">
<StackLayout Padding="15">
<Label HorizontalTextAlignment="End" Text="هذه الخدمة ستجعل مبادرتكم مميزة باللون الأحمر ودائما في أعلى القائمة ليتمكن كل مستخدمي التطبيق من التعرف عليها والتفاعل معها" HeightRequest="90" WidthRequest="100" />
<Label HorizontalTextAlignment="End" Text="سعر الخدمة : 99 دولار" HeightRequest="30" WidthRequest="100" />
<Label HorizontalTextAlignment="End" Text="مدة التمييز : 30 يوما" HeightRequest="30" WidthRequest="100" />
</StackLayout>
</ContentView>
</DataTemplate>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<Grid Padding="10" x:Name="GridInitiativeDetails">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>

The preferred way is to use DataBindings, example:
<Label HorizontalTextAlignment="End" Text="{Binding LabelPushNotificationPrice}" />
This way you can seamlessly update the value of the Label bound to your ViewModel. The point is to separate UI layer from your BL layer and usually we use MVVM rather than MVC in Xamarin.Forms. The official documentation is nicely covering this topic and there are free e-books like Enterprise Application Patterns using Xamarin.Forms that I recommend to read additionally.
P.S.: Please note that setting a fixed Height & Width on UI controls may break your UX experience on screens with different sizes.

Related

Control is pushed from the screen

I have a xamarin.forms app. A screen has many controls, and I use ScrollView to let the user ability to see all the controls. I have a button outside of the ScrollView, because I want it to be easily accessible without scrolling down the screen. But some of our customers have vision issues, so they enlarge the text size on their phones. Then the button disappears from the screen. I wonder what I can do to fix this... I guess I would agree with the scrolling only for those with the large text size, if there is no better solution.
Here is my code:
<ContentPage.Content>
<StackLayout>
<ScrollView>
<StackLayout Margin="30">
... Many controls are here
</StackLayout>
</ScrollView>
<StackLayout
x:Name="Validation"
HeightRequest="150"
IsVisible="{Binding ValidationResult.IsValid, Converter={converters:InverseBoolConverter}}">
<Label Text="Please fix the following errors:" TextColor="Red" Margin="0,0,0,10" />
<Label Text="{Binding Errors}" TextColor="Red" />
</StackLayout>
<Button
Text="Calculate"
Command="{Binding CalculateCommand}"
Style="{StaticResource ButtonStyle}"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
ADDED:
I did not mention that the content of the page is within a ControlTemplate:
<ControlTemplate x:Key="MainPageTemplate">
<Grid>
<Label Text="{Binding ErrorMessage}" TextColor="Red" />
<ContentPresenter Margin="10, 0, 10, 120" />
<StackLayout VerticalOptions="End" BackgroundColor="LightGray" Padding="20" >
<Label Text="{Binding Source={x:Static sys:DateTime.Now}, StringFormat='© {0:yyyy} Company Name, Inc.'}" />
<Label Text="All trademarks shown are the intellectual properties of their respective owners." />
</StackLayout>
</Grid>
</ControlTemplate>
Agree with #Jason , StackLayout will not fit the size of its child Elements . So you could use Grid with three Rows
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.9*" />
<RowDefinition Height="150" />
<RowDefinition Height="0.1*" />
</Grid.RowDefinitions>
<ScrollView Grid.Row="0" Orientation="Both">
<StackLayout Margin="30" BackgroundColor="LightBlue" HeightRequest="300">
</StackLayout>
</ScrollView>
<Grid HeightRequest = "150" Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label Grid.Row="0" Text="Please fix the following errors:" TextColor="Red" Margin="0,0,0,10" />
<Label Grid.Row="1" Text="{Binding Errors}" TextColor="Red" />
</Grid>
<Button
Grid.Row="2"
Text="Calculate"
HorizontalOptions="CenterAndExpand" />
</Grid>

Xamarin forms - unwanted extra space under TableView

I am creating my first Android app. I want to show TableView with some input fields and then a button to process the inputs.
I don't know why but there is extra space under TableView or the button is aligned to the bottom but it is opposite to the settings.
Can you help me fix it?
<StackLayout Orientation="Vertical" VerticalOptions="Start" Padding="20,15,20,0" Spacing="0">
<Label Text="This is TableView"></Label>
<TableView Intent="Settings" VerticalOptions="Start">
<TableRoot>
<TableSection>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="item 1"/>
<Entry></Entry>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="item 2"/>
<Entry></Entry>
</StackLayout>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
<Label Text="TableView - END"></Label>
<Button Text="My button" TextColor="DodgerBlue" VerticalOptions="Start" HorizontalOptions="Fill" Margin="40, 10, 40, 10"/>
<Frame VerticalOptions="StartAndExpand" BackgroundColor="Transparent" BorderColor="Black">
<StackLayout Orientation="Vertical">
<StackLayout Orientation="Horizontal" HorizontalOptions="Fill">
<Label Text="aaaa" HorizontalOptions="StartAndExpand"></Label>
<Label Text="value" HorizontalOptions="End"></Label>
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="aaaa"></Label>
<Label Text="value"></Label>
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="aaaa"></Label>
<Label Text="value"></Label>
</StackLayout>
</StackLayout>
</Frame>
</StackLayout>
Your best option is to define the RowHeight for each cell, and then specify the HeightRequest for the tableview. this way you can define the space it will occupy
<TableView Margin="0" Intent="Settings" HeightRequest="120" RowHeight="60" VerticalOptions="Start">
Unfortunately, this is how Xamarin.Forms TableView/ListView works. It is not expected to have anything below it. If you need something below you can either set the height of TableView manually or to put the content in the last cell, neither thing is perfect but in any case you need to look for some workaround as this is behavior by design (it would be a bit easier if you could use the ListView instead of TableView).
As you were asking what you can do besides using a TableView, of course a Grid would be possible, please see the following example:
<Grid VerticalOptions="StartAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" /> <!-- for the label -->
<ColumnDefinition Width="*" />
<Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="1" /> <!-- For the separator, you might have to experiment with the height -->
<RowDefinition Height="*" />
<RowDefinition Height="1" />
</Grid.RowDefinitions>
<Label Text="Item 1" />
<Entry Grid.Row="0" Grid.Column="1" />
<BoxView BackgroundColor="Black"
HeightRequest="1"
Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="2" /> <!-- The separator -->
<Label Grid.Row="2" Grid.Column="0" Text="Item 2" />
<Entry Grid.Row="2" Grid.Column="1" />
<BoxView BackgroundColor="Black"
HeightRequest="1"
Grid.Row="3"
Grid.Column="0"
Grid.ColumnSpan="2" /> <!-- The separator -->
</Grid>
I am using BoxViews with a black background color and a HeightRequest of 1 for the separator. You might have to experiment with the color and the height to get the results you want. Values below 1 are possible and result in finer lines. In a real world example I've used .5.
Anyway, this makes the XAML way more cluttered. Grid-designs (while I am using them myself) tend to get quite unwieldy.
I am not sure if this what you are looking for but my understanding of the question tells me you are talking about the label Value being away from the rest.
if you check the code for this label :
<Label Text="value" HorizontalOptions="End"></Label>
the HorizontalOptions is set to "End" which is causing this changing it to start will fix your problem
Feel free to revert in case if I missed anything
Goodluck

Hidden Stacklayout taking up space in xamarin forms

I'm creating a form in Xaml using Xamrin which contains absolute layout in which i'm hiding a stacklayout. but one more stacklayout just down below of hidden stacklayout but hidden stacklayout is taking up space.
What i want to do.When i did hide one stacklayout another stacklayout should take place of hidden staklayout.
Thanks for help and supports.
I've resolved the issue:
I followed this link
https://forums.xamarin.com/discussion/83632/hiding-and-showing-stacklayout in this link they said that use grid and make row height auto and it will automatically adjust the extra space of layout.
<Grid VerticalOptions="Fill">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="1" Spacing="20">
<StackLayout Margin="10,0">
<Label Text="lable 1" VerticalOptions="Center" FontSize="Small" />
<Label Text="lable 2" VerticalOptions="Center" FontSize="Small" />
</StackLayout>
<StackLayout IsVisible="{Binding IsStudent}" Margin="10,0">
<Label Text="lable3" VerticalOptions="Center" FontSize="Small" />
<Label Text="lable 4" VerticalOptions="Center" FontSize="Small" />
<Label Text="lable 5" VerticalOptions="Center" FontSize="Small" />
<Label Text="lable 6" VerticalOptions="Center" FontSize="Small" />
</StackLayout>
</StackLayout>
<StackLayout Grid.Row="2" Spacing="20" >
<local:Button
x:Name="btnSave"
Text="Submit"
VerticalOptions="End"
HorizontalOptions="FillAndExpand"
IsVisible="{Binding IsBusy, Converter={x:Static local:InverseBoolConverter.Instance}}"
AutomationId="saveButton" />
</StackLayout>
</Grid>
No need for a grid.
Set the IsVisible AND HeightRequest properties.
MyStackLayout.IsVisible = false;
MyStackLayout.HeightRequest = 0; // trigger recalc of space layout.
The change in heightrequest triggers the desired recalculations.
I've too looked into why those hidden controls are taking space and well... they ARE taking space and that's it.
You can do a simple addition and removing of labels. Something like this:
public class MyStack : StackLayout
{
Label
_label1 = new Label(),
_label2 = new Label(),
_label3 = new Label();
public void ShowLabels()
{
Children.Add(_label1);
Children.Add(_label2);
Children.Add(_label3);
}
public void HideLabels()
{
Children.Remove(_label1);
Children.Remove(_label2);
Children.Remove(_label3);
}
}
My recomendation is putting a StackLayout at the bottom of the content, in order to keep the original height of the other elements at the top.
<?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="CentroDono.Views.YOURVIEWPAGE"
Title="YOURVIEWTITLE"
x:Name="YOURPAGECONTENTNAME">
<ContentPage.Content>
<StackLayout>
<!--VISIBLE CONTENT-->
<Label Text="HELLO"/>
</StackLayout>
<StackLayout>
<Label Text="FOOTER"/>
<!--INVISIBLE CONTENT-->
<Label x:Name="_searchText" Text="Result1" IsVisible="False"/>
<Label x:Name="_searchText2" Text="Result2" IsVisible="False"/>
<Label x:Name="_searchText3" Text="Result3" IsVisible="False"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>

How to avoid TableView scroll on XAML Forms?

I have a StackLayout which contains a TableView, a Grid and a couple Labels.
My problem is that the StackLayout forces all elements to cover 100% of the height of the screen, and it is generating a vertical scroll on my TableView:
I would like to remove that vertical scroll inside the control, and rather have a "global" scroll for the whole view.
This is my XAML code for that view:
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage Title="Create Account"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:AudioBitts"
x:Class="AudioBitts.SignUpPage">
<StackLayout>
<TableView x:Name="socialListView">
<TableRoot>
<TableSection Title="Social sign up">
<ImageCell ImageSource="{local:EmbeddedImage ResourceId=AudioBitts.Images.Icons.socialFacebook#3x.png}" Text="Sign up with Facebook" />
<ImageCell ImageSource="{local:EmbeddedImage ResourceId=AudioBitts.Images.Icons.socialTwitter#3x.png}" Text="Sign up with Twitter" />
<ImageCell ImageSource="{local:EmbeddedImage ResourceId=AudioBitts.Images.Icons.socialGoogle#3x.png}" Text="Sign up with Google+" />
</TableSection>
<TableSection Title="Email sign up">
<EntryCell Label="Email" Placeholder="Your email"/>
<EntryCell Label="Password" Placeholder="Min 6 characters"/>
</TableSection>
</TableRoot>
</TableView>
<Grid Padding="20" HorizontalOptions="Center" VerticalOptions="Center">
<Grid.RowDefinitions>
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Text="Already have an account?" />
<Label x:Name="onSignIn" Grid.Row="0" Grid.Column="1" Text="Sign In" TextColor="#ff0030" />
</Grid>
<Label Text="AudioBitts Inc." HorizontalOptions="Center" />
<Label Text="Terms of Use and Privacy Policy" HorizontalOptions="Center" />
</StackLayout>
</ContentPage>
Why don't you just add another <TableSection/>, add a <ViewCell/> and add what's inside the Grid.
Hope it helps!

Xamarin Forms Center CollectionView content

I have a problem. I created a page that looks like this:
Now I want the content of the CollectionView to be centered. I already tried things to set on HorizontalOptions=Center, but no luck!
Here is the code of that part:
<StackLayout HorizontalOptions="CenterAndExpand">
<CollectionView ItemsSource="{Binding coinDataList}" ItemsLayout="HorizontalList" Margin="0" HorizontalOptions="CenterAndExpand" BackgroundColor="Red">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid RowSpacing="0" Margin="20,0,20,0" HorizontalOptions="CenterAndExpand" Padding="0">
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="5" />
<RowDefinition Height="20" />
<RowDefinition Height="10" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<Label Grid.Row="0" VerticalOptions="CenterAndExpand" HorizontalOptions="Center" Text="{Binding Coin}" FontAttributes="Bold" TextColor="#00D8FF" FontSize="18"/>
<Label Grid.Row="2" VerticalOptions="CenterAndExpand" HorizontalOptions="Center" Text="{Binding Price, StringFormat='{0:F2}'}" TextColor="White" FontSize="18"/>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
How can I do that?
You can achieve this by using BindableLayout in conjunction with the StackLayout with horizontal orientation. This will not be as performant as CollectionView, but from your UI, it looks like you will not be having a lot of items in your ItemSource collection, but you your need UI to be dynamic and evenly spaced and centered when there are fewer items. As the item list grows, the UI will look more like the horizontal list view.
So here is the minimal working XAML which you can modify to fit into your project. For sake of simplicity, I have added everything in the XAML (no code behind), so you can plug this XAML right into the content page and test it out!
<?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"
xmlns:generic="clr-namespace:System.Collections.Generic;assembly=netstandard"
mc:Ignorable="d"
x:Class="Playground.MainPage">
<ContentPage.Resources>
<ResourceDictionary>
<generic:List x:Key="SymbolNames" x:TypeArguments="x:String">
<x:String>BTC</x:String>
<x:String>LTC</x:String>
<x:String>ETH</x:String>
<x:String>OT1</x:String>
<x:String>OT2</x:String>
<x:String>OT3</x:String>
<x:String>OT4</x:String>
<x:String>OT5</x:String>
<x:String>OT6</x:String>
</generic:List>
</ResourceDictionary>
</ContentPage.Resources>
<ScrollView Orientation="Horizontal" HeightRequest="60" VerticalOptions="Start">
<StackLayout BindableLayout.ItemsSource="{Binding Source={StaticResource SymbolNames}}" Orientation="Horizontal">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Label Text="{Binding}" HorizontalOptions="CenterAndExpand" VerticalOptions="Center" Margin="10"/>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</ScrollView>
</ContentPage>
UI when 3 Items:
UI When multiple overflowing items: