Reuse xamarin.forms xaml contentpage data throughout the app - xaml

I got a bit stuck on a problem and I was wondered if it's possible you can make a video on my problem it seems may others may have the same problem but, I been looking online but no real straight forward solution to the issue. The problem is, for instance, I have a stack layout in a content page page1.xaml and I added labels to that page 4 of them and I set properties for those labels setters and getters. however, if I make page2.xaml how would I be able to move the labels along with the data to page2.xaml basically reuse the data/labels declared from page1.xaml to page2.xaml throughout the app? here is what I have so far.
<StackLayout>
<StackLayout x:Name = "CustomerOrderStackLayout" Orientation = "Horizontal" HorizontalOptions = "Center" Padding = "20" >
<Label x:Name ="CustomerOrderNumberLabel" HorizontalOptions = "Center" />
</StackLayout>
<StackLayout Orientation = "Vertical" Padding = "20" >
<Label x:Name ="CustomerFirstNameLabel"
VerticalOptions = "Start" />
<Label x:Name ="CustomerLastNameLabel"
VerticalOptions = "Start" />
<Label x:Name ="CustomerAddressLabel"
VerticalOptions = "Start" />
<Label x:Name ="CustomerZipCodeLabel"
VerticalOptions = "Start"/>
<Label x:Name ="CustomerPhoneNumberLabel"
VerticalOptions = "Start"/>
</StackLayout>
</StackLayout>
</ContentPage>
public partial class CustomerInfoContentV : ContentPage
{
public CustomerInfoContentV()
{
InitializeComponent();
orderNum = "N";
FirstName = "Nl";
LastName = "Jk";
Address = "203030 drive";
ZipCode = "77088";
PhoneNumber = "833-223-2222";
}
public string orderNum
{
get
{
return CustomerOrderNumberLabel.Text;
}
set
{
CustomerOrderNumberLabel.Text = value;
}
}
public string FirstName
{
get
{
return CustomerFirstNameLabel.Text;
}
set
{
CustomerFirstNameLabel.Text = value;
}
}
public string LastName
{
get
{
return CustomerLastNameLabel.Text;
}
set
{
CustomerLastNameLabel.Text = value;
}
}
public string Address
{
get
{
return CustomerAddressLabel.Text;
}
set
{
CustomerAddressLabel.Text = value;
}
}
public string ZipCode
{
get
{
return CustomerZipCodeLabel.Text;
}
set
{
CustomerZipCodeLabel.Text = value;
}
}
public string PhoneNumber
{
get
{
return CustomerPhoneNumberLabel.Text;
}
set
{
CustomerPhoneNumberLabel.Text = value;
}
}
}
I want to know is there a way to take this what i have and reuse it on a whole different contentpage thats my issue i want to take this what i created and reuse it through out the app is this possible? can anyone lead me in the right direction! please thanks :)

If I am understanding you correct. You can use templates. https://developer.xamarin.com/guides/xamarin-forms/templates/control-templates/creating/ . For my projects I just create a code based template and render it whenever I want it and wherever I want them.

Related

Can a search result TextHighlighter or TextRange be bound to a DataTemplate in UWP XAML?

I have a SearchResult class that binds to a ListView. What I want to do specifically is highlight the snippet inside the search result text that matches the query the user entered.
The relevant XAML looks something like this (omitting the fluff):
<DataTemplate>
<StackPanel>
<!-- Search result -->
<RichTextBlock>
<!-- Would this idea work? -->
<RichTextBlock.TextHighlighters>
<TextHighlighter>
<TextHighlighter.Ranges>
<!-- Add the bound range here-->
<!-- {Binding Range} or text highlighter or something -->
</TextHighlighter.Ranges>
</TextHighlighter>
</RichTextBlock.TextHighlighters>
<Paragraph>
<Run Text="{Binding Text}"></Run>
</Paragraph>
</RichTextBlock>
</StackPanel>
</DataTemplate>
I can add whatever property from the SearchResult class, be it a TextHighlighter or a TextRange. I just don't know whether the XAML syntax allows plugging in that value.
I've also thought of doing this in code, but I do want to keep the search item template inside the XAML, and not put it in C#. However, it would be possible to do something like lvSearchResults.Items[i]... or whatever it takes to put in the highlighter or range. I just can't figure out the correct method at the moment.
If you are planning to create a locally highlighted search result list, you can try this way:
Create a search result class
public class SearchResult
{
public string DisplayText { get; set; }
public string HighlightText { get; set; }
}
Create a UserControl to show the result
SearchResultBlock.xaml
<Grid>
<TextBlock x:Name="ResultBlock" TextWrapping="Wrap" MaxLines="2"
TextTrimming="CharacterEllipsis"/>
</Grid>
SearchResultBlock.xaml.cs
public sealed partial class SearchResultBlock : UserControl
{
public SearchResultBlock()
{
this.InitializeComponent();
}
public SearchResult Result
{
get { return (SearchResult)GetValue(ResultProperty); }
set { SetValue(ResultProperty, value); }
}
public static readonly DependencyProperty ResultProperty =
DependencyProperty.Register("Result", typeof(SearchResult), typeof(SearchResultBlock), new PropertyMetadata(null,new PropertyChangedCallback(Result_Changed
private static void Result_Changed(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
if(e.NewValue!=null && e.NewValue is SearchResult data)
{
var instance = d as SearchResultBlock;
instance.ResultBlock.Inlines.Clear();
var sp = data.DisplayText.Split(data.HighlightText);
instance.ResultBlock.Inlines.Add(new Run { Text = sp.First() });
instance.ResultBlock.Inlines.Add(new Run { Text = data.HighlightText, Foreground = new SolidColorBrush(Colors.Red) });
if (sp.Length > 1)
instance.ResultBlock.Inlines.Add(new Run { Text = sp.Last() });
}
}
}
Use it in DataTemplate
<DataTemplate x:DataType="SearchResult" x:Key="ResultItemTemplate">
<SearchResultBlock Result="{Binding}"/>
</DataTemplate>
By string splitting, create different types of Runs and merge them in the TextBlock. This can also achieve the highlighting effect.
Best regards.

How to display a label with click on listview

I want to show a label when i click on my item in my listview.
The real problem i don't know how to link between my viewmodel and my views
I want modify my label in viewmodel but I don't know if its possible currently.
My xaml :
<StackLayout>
<Label x:Name="labelperso"
Text="{Binding newProduct}"
IsVisible="{Binding Addproduct}"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
BackgroundColor="#000000"
FontSize="20"
Opacity="0"/>
<ListView ItemsSource="{Binding Products}" CachingStrategy="RecycleElement" RowHeight="50" >
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding CodeReferenceLibelle}" TextColor="Black"/>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.Behaviors>
<b:EventToCommandBehavior EventName="ItemSelected" Command="{Binding
SelectCommand}" Converter="{StaticResource SelectedItemConverter}"/>
</ListView.Behaviors>
my viewmodel :
#region labelperso property
private string _newProduct;
public string newProduct
{
get { return _newProduct; }
set { SetProperty(ref _newProduct, value); }
}
#endregion
#region Addproduct property
private bool _Addproduct;
public bool Addproduct
{
get { return _Addproduct; }
set { SetProperty(ref _Addproduct, value); }
}
#endregion
when I click on my item :
async Task Select()
{
newProduct = "Produit ajouté !";
basketManager.AddProductSkuAsync(sku);
newProduct = "";
await Task.Run(() => ShowText());
}
//I have tried this but I can't use my label in my view
async Task ShowText()
{
await labelperso.FadeTo(1);
await Task.Delay(1000);
await labelperso.FadeTo(0);
}
Why are you want to take the label "labelperso" in VM ? you can use it in xaml.cs instead.
You just need to add the event ItemSelected like this:
<ListView ItemsSource="{Binding Products}" ItemSelected="OnSelection">
In xaml.cs
void OnSelection(object sender, SelectedItemChangedEventArgs e)
{
if (e.SelectedItem == null)
{
return;
}
//suppose the binding Object is Product
Product product = (Product)e.SelectedItem;
//labelperso.Text = "name = " + product.Name;
labelperso.FadeTo(1);
Task.Delay(1000);
labelperso.FadeTo(0);
}
Normally, VM are unrelated to Xaml, and we should not get labels from VM.
And we don't recommend it.But if you must, you can pass the Label in from the xaml.cs file like this:
You can define a variable in yourpage.xaml.cs:
public Label pageLabel;
and initial like this:
pageLabel = labelperso;
BindingContext = new YourViewmodel(this);
And in YourViewmodel.cs:
public Label ss;
public YourViewmodel(ContentPage parentPage)
{// here HomePage is your contentPage name of the page`
ss = ((HomePage)parentPage).pageLabel;//after this you can use it
}
You need to add a SelectedProduct property to your VM.
private string _SelectedProduct;
public string SelectedProduct
{
get { return _SelectedProduct; }
set { SetProperty(ref _SelectedProduct, value); }
}
You can then bind your ListView's SelectedItem to it
<ListView ItemsSource="{Binding Products}"
SelectedItem="{Binding SelectedProduct}"
CachingStrategy="RecycleElement"
RowHeight="50" >
You can then control the visibility of your label by binding to SelectedProduct via a "nullToVisibility" converter, or by using triggers etc.
You should try to use MVVM pattern rather than hacking with code behind.
Using MVVM you can add a Visible property to your viewmodel and bind the IsVisible property of the label to it.
Code will be much easy to read and maintain.

How to prepopulate Autocomplete SelectedItem

From my previous post, it helped be to determine how to bind to selecteditems, How to bind to autocomplete selecteditem with ObservableCollection But now I'm trying to enhance that logic.
I'm trying to have items preselected when my View is initialized. I've tried multiple options, but I can't seem to get items preselected. May I get some assistance. My current code below
Keyword Class
public class Keyword : ObservableObject
{
private string _value;
public string Value
{
get { return _value; }
set { SetProperty(ref _value, value); }
}
}
ViewModel
private ObservableCollection<object> _selectedKeywords = new ObservableCollection<object>();
private ObservableCollection<Keyword> _keywords = new ObservableCollection<Keyword>();
public TestViewModel()
{
Keywords = new ObservableCollection<Keyword>()
{
new Keyword { Value = "Apples" },
new Keyword { Value = "Bananas" },
new Keyword { Value = "Celery" }
};
SelectedKeywords = new ObservableCollection<object>(Keywords.Where(x => x.Value == "Apples"));
}
public ObservableCollection<object> SelectedKeywords
{
get { return _selectedKeywords; }
set { SetProperty(ref _selectedKeywords, value); }
}
public ObservableCollection<Keyword> Keywords
{
get { return _keywords; }
set { SetProperty(ref _keywords, value); }
}
View
<autocomplete:SfAutoComplete MultiSelectMode="Token"
HorizontalOptions="FillAndExpand"
VerticalOptions="EndAndExpand"
TokensWrapMode="Wrap"
Text="{Binding Keyword, Mode=TwoWay }"
IsSelectedItemsVisibleInDropDown="false"
Watermark="Add..."
HeightRequest="120"
SelectedItem="{Binding SelectedKeywords}"
DataSource="{Binding Keywords}">
</autocomplete:SfAutoComplete>
We have prepared sample from your code snippet and you have missed to add DisplayMemberPath property in the code snippet. Please find the sample from below location.
http://www.syncfusion.com/downloads/support/directtrac/general/ze/AutoCompleteSample-270923957.zip
Note: I work for Syncfusion.
Regards,
Dhanasekar
To make it preselected in your View Model set a value to the binding that you have binded on your View basically assign a value to SelectedKeywords
Something like:
SelectedKeywords = Keywords.FirstOrDefault();
You might need two-way binding not sure cause never used this control:
SelectedItem="{Binding SelectedKeywords, Mode=TwoWay}"

Scrolling screen towards up when keypad open on login page Xamarin

I am working on Xamarin.Forms. I have login page for that I am using StackLayout with ScrollView.
Code following
<?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="simpleListView.Pages.LoginPage">
<ContentPage.Content>
<ScrollView Orientation="Vertical" x:Name="scroll">
<StackLayout Padding="20">
<Label Margin="20" HorizontalOptions="Center" Text="Login below" ></Label>
<BoxView HeightRequest="150" Color="Accent"></BoxView>
<Entry Text="{Binding Email}" x:Name="txtEmail" Placeholder="Email"></Entry>
<Entry Text="{Binding Password}" x:Name="txtPass" Placeholder="Paasword"></Entry>
<Button x:Name="btnLogin" BackgroundColor="Blue" Text="Login" Command="{Binding SubmitCommand}"></Button>
</StackLayout>
</ScrollView>
</ContentPage.Content>
</ContentPage>
But the code above not scrolling layout towards top when keypad open & hiding almost half of Login button. How can I implement scrolling when keypad open? I am not much interested in using custom renderers.
See login page screeshot
Since there is (as far as I am informed) no good way to get the actual keyboard height for android via a DependencyService, using that scrollview is the right approach to begin with, however what you want to do is UI customizing which leads to custom renderers. Saying "i want a cool custom UI but I am not interested in custom renderers" is like "I want to drive, but I am not interested in wheels".
However, to make it a bit easier for you, I happen to have code for a custom renderer, which gives the desired result:
Android
[assembly: ExportRenderer(typeof(ModernLogin), typeof(ModernLoginPageRenderer))]
namespace MyApp.Droid.Renderer
{
public class ModernLoginPageRenderer : PageRenderer
{
public ModernLoginPageRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<Page> e)
{
base.OnElementChanged(e);
// Set SoftInput.AdjustResize for this window
if (e.NewElement != null)
{
(this.Context as FormsApplicationActivity).Window.SetSoftInputMode(SoftInput.AdjustResize);
}
}
protected override void OnWindowVisibilityChanged([GeneratedEnum] ViewStates visibility)
{
// Revert to default SoftInputMode after moving away from this window
if (visibility == ViewStates.Gone)
{
(this.Context as FormsApplicationActivity).Window.SetSoftInputMode(SoftInput.AdjustPan);
}
base.OnWindowVisibilityChanged(visibility);
}
protected override void OnLayout(bool changed, int left, int top, int right, int bottom)
{
base.OnLayout(changed, left, top, right, bottom);
}
}
}
iOS
[assembly: ExportRenderer(typeof(ModernLogin), typeof(ModernLoginPageRenderer))]
namespace MyApp.iOS.Renderer
{
public class ModernLoginPageRenderer : PageRenderer
{
NSObject observerHideKeyboard;
NSObject observerShowKeyboard;
public override void ViewDidLoad()
{
base.ViewDidLoad();
var cp = Element as ModernLogin;
if (cp != null)
{
foreach (var g in View.GestureRecognizers)
{
g.CancelsTouchesInView = true;
}
}
}
public override void ViewWillAppear(bool animated)
{
base.ViewWillAppear(animated);
observerHideKeyboard = NSNotificationCenter.DefaultCenter.AddObserver(UIKeyboard.WillHideNotification, OnKeyboardNotification);
observerShowKeyboard = NSNotificationCenter.DefaultCenter.AddObserver(UIKeyboard.WillShowNotification, OnKeyboardNotification);
}
public override void ViewWillDisappear(bool animated)
{
base.ViewWillDisappear(animated);
NSNotificationCenter.DefaultCenter.RemoveObserver(observerHideKeyboard);
NSNotificationCenter.DefaultCenter.RemoveObserver(observerShowKeyboard);
}
void OnKeyboardNotification(NSNotification notification)
{
if (!IsViewLoaded) return;
var frameBegin = UIKeyboard.FrameBeginFromNotification(notification);
var frameEnd = UIKeyboard.FrameEndFromNotification(notification);
var page = Element as ModernLogin;
if (page != null)
{
var padding = page.Padding;
page.Padding = new Thickness(padding.Left, padding.Top, padding.Right, padding.Bottom + frameBegin.Top - frameEnd.Top);
}
}
}
}
Make sure you replace the name of "ModernLogin" with the name of your login page class. If your LoginPage is a regular ContentPage, I would recommend creating a new class inheriting from ContentPage.

Dynamically Create controls using ContentControl and Converters in silverlight4

I have a problem to create dynamic controls in silverlight 4.
My requirement is:
I have question table in database, which is like below.
QuestionText, AnswerControl, AnswerDefaultText, IsItmandatory
Question1 TextBox null Yes
QuestionText2, RadioButton, Yes, Yes
Question3, ComboBox, null, no
..........................................
I need to get this data into object and conver the question text into TextBlock, and based on answercontrol value, need to create controls dynamically.
I tried like as you mentioned in your post, but data is not binding and not able to send default values as parameter values to converter.
My Converter is not getting called. Is there any thing wrong in below code?
My Codes are:
1)My Xaml Code:
<UserControl x:Class="SilverlightApplication5.DynamicControls"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:SilverlightApplication5.Converter"
xmlns:question="clr-namespace:SilverlightApplication5"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White" Width="400" Height="400">
<Grid.Resources>
<local:UILocatorConverter x:Key="UILocatorConverter" />
<question:Questions x:Key="Questions"/>
</Grid.Resources>
<ListBox ItemsSource="{Binding Questions}" Width="400" Height="400">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<ContentControl Content="{Binding Converter={StaticResource UILocatorConverter},ConverterParameter={Binding QuestionText},Path=QuestionControl}" Grid.Column="0" />
<ContentControl Content="{Binding Converter={StaticResource UILocatorConverter},ConverterParameter={Binding DefaultValue},Path=AnswerControl}" Grid.Column="1" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</UserControl>
2) Code behind file code is:
namespace SilverlightApplication5
{
public partial class DynamicControls : UserControl
{
ObservableCollection<Questions> Question;
public DynamicControls()
{
InitializeComponent();
Question = new ObservableCollection<Questions>();
Question.Add(new Questions { QuestionControl = "TextBlock", QuestionText = "What is your name?", AnswerControl = "TextBox", AnswerValues = "", DefaultValue = "" });
Question.Add(new Questions { QuestionControl = "TextBlock", QuestionText = "What is your surname?", AnswerControl = "TextBox", AnswerValues = "", DefaultValue = "" });
Question.Add(new Questions { QuestionControl = "TextBlock", QuestionText = "Sex:", AnswerControl = "ComboBox", AnswerValues = "Male,Female,Others", DefaultValue = "Select a Value" });
Question.Add(new Questions { QuestionControl = "TextBlock", QuestionText = "Marital Status", AnswerControl = "RadioButton", AnswerValues = "", DefaultValue = "Not Married" });
this.DataContext = Question;
}
}
}
3) My converter is:
namespace SilverlightApplication5.Converter
{
public class UILocatorConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
String param="This is control created dynamically";
if (parameter != null)
{
param = System.Convert.ToString(parameter);
}
switch (value.ToString())
{
case "TextBlock":
return new TextBlock() { Text = param, HorizontalAlignment=HorizontalAlignment.Center,TextWrapping=TextWrapping.NoWrap,Width=200 };
case "Button":
return new Button() { Content = param, Width=150 };
case "TextBox":
return new TextBox() { Text = param };
case "RadioButton":
return new TextBox() { };
case "ComboBox":
return new TextBox() { };
}
return null;
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
}
4) My Question Class is:
namespace SilverlightApplication5
{
public class Questions
{
private string _questionControl;
public string QuestionControl {
get
{
return _questionControl;
}
set
{
_questionControl = value;
}
}
private string _questionText;
public string QuestionText
{
get
{
return _questionText;
}
set
{
_questionText = value;
}
}
private string _answerControl;
public string AnswerControl
{
get
{
return _answerControl;
}
set
{
_answerControl = value;
}
}
private string _answerValues;
public string AnswerValues
{
get
{
return _answerValues;
}
set
{
_answerValues = value;
}
}
private string _defaultValue;
public string DefaultValue
{
get
{
return _defaultValue;
}
set
{
_defaultValue = value;
}
}
}
}
My converter is not getting called, is there any issues in this code?
You need to use this:
<ListBox ItemsSource="{Binding}" Width="400" Height="400">
As you want to access the collection of Questions you set in the DataContext.
What you were doing was creating a single Questions class in your Resources and telling the ListBox to use that.
So you won't need this at all:
<question:Questions x:Key="Questions"/>
(You might have to use BindsDirectlyToSource...because you are setting the DataContext to a collection directly...could be wrong on that!).
Alternatively, you can do this in your control:
public partial class DynamicControls : UserControl
{
public ObservableCollection<Questions> Question { get; set; }
...
Set the DataContext in this way:
DataContext = this;
And then use this Binding:
<ListBox ItemsSource="{Binding Question}" Width="400" Height="400">
I'd recommend you rename your Questions class to Question, and then rename the Property to Questions, to avoid confusion.