I need help understanding how I can bind a ContentView's Content's to my Xamarin page. I have tried maybe 20 different methods and I can only get the binded contentview to render when I don't use bindings and set the property directly.
<ContentPage.Content>
<Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" x:Name="GridLayout" RowSpacing="0" ColumnSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="60" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<nav:NavView Grid.Row="0" Grid.Column="0" Padding="0,0,0,0" Margin="0,0,0,0" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand"
HeightRequest="60" x:Name="nav"/>
<ContentView BindingContext="{Binding MainView}" Grid.Row="1" Grid.Column="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />
</Grid>
</ContentPage.Content>
and then below is my code behind
public partial class DetailLayoutView : ContentPage, INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(string name)
{
if (this.PropertyChanged != null)
this.PropertyChanged(this, new PropertyChangedEventArgs(name));
}
private ContentView mainView;
public ContentView MainView
{
get { return mainView; }
set
{
mainView = value;
OnPropertyChanged("MainView");
}
}
public DetailLayoutView()
{
InitializeComponent ();
MainView = new PyxusChatView();
BindingContext = MainView;
}
}
Can someone help guide me to the right direction? I dont have the bandwidth to implement an entire MVVM refactor at this time I would just like to know how I can achieve this w/ minimal code.
DETECT WHEN A UI IS RENDERED IOS & ANDROID BELOW...
public DetailLayoutView()
{
InitializeComponent ();
MainContentArea.LayoutChanged += MainContentArea_LayoutChanged;
}
private void MainContentArea_LayoutChanged(object sender, EventArgs e)
{
Device.BeginInvokeOnMainThread(() => {
//UI Is now visible, send a msg to let everyone subscribed to "UpdateDetailView" event now that the
//detail page was changed and it is now okay to make API calls!
MessagingCenter.Send<ContentView, string>(MainView, "UpdateDetailView", "From BlePairingViewModel");
});
}
YOU HAVE SENT MSG NOW YOU CAN MAKE API CALLS & YOUR UI IS VISIBLE W/O MVVM... ALTHOUGH MVVM WOULD BE A BETTER PRACTICE TO INDIVIDUALS W/ MORE TIME TO CODE..
MessagingCenter.Subscribe<ContentView, string>("Pyx", "UpdateDetailView", (sender, arg) =>
{
if (sender == this)
{
Task.Run(async () =>
{
await OnAppearing();
});
}
});
I AM NOT ADVISING THIS AS BEST PRACTICE BUT IT DOES ANSWER THE QUESTION
Related
I have code that works but I notice it's rather slow to create the page elements.
Here's what I have so far. Note that I'm not adding everything at once as I found that when I did the page creation was even slower.
public void CreateSwitchSection(bool? selected)
{
Application.Current.Resources.TryGetValue("FrameBorder", out object frameBorder);
var st = new StackLayout { Orientation = StackOrientation.Vertical, Spacing = 0 };
st.Children.Add(AddSwitchRows(selected, App.cardSetWithWordCount.Take(20)));
st.Children.Add(AddSwitchRows(selected, App.cardSetWithWordCount.Skip(20).Take(20)));
st.Children.Add(AddSwitchRows(selected, App.cardSetWithWordCount.Skip(40).Take(20)));
st.Children.Add(AddSwitchRows(selected, App.cardSetWithWordCount.Skip(60).Take(20)));
st.Children.Add(AddSwitchRows(selected, App.cardSetWithWordCount.Skip(80).Take(20)));
var fr = new Frame { Style = (Style)frameBorder };
var fs = new FrameStack { };
var ht = new HeaderTemplate()
{
Text = "CHOOSE CARD SETS FOR THE DECK"
};
fs.Children.Add(ht);
fs.Children.Add(st);
fs.Children.Add(new LineTemplate());
fr.Content = fs;
details.Children.Clear();
details.Children.Add(fr);
}
private StackLayout AddSwitchRows(bool? selected, IEnumerable<CardSetWithWordCount> data)
{
var stack = new StackLayout
{
Orientation = StackOrientation.Vertical,
Spacing = 0
};
foreach (var x in data)
{
var cell = new BadgeGridTemplate
{
BindingContext = x,
Text = x.Name,
State = selected == true ? "E" : "D",
Message = x.TotalWordCount.ToString(),
TapCommand = (Command)vm.SelectCardSetCmd,
RowId = x.Id,
Separator = true
};
stack.Children.Add(cell);
}
return stack;
}
For reference here is the BadgeGridTemplate I coded:
<?xml version="1.0" encoding="UTF-8"?>
<t:BaseGridTemplate xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:t="clr-namespace:Japanese.Templates"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Japanese;assembly=Japanese"
xmlns:b="clr-namespace:Behaviors;assembly=Behaviors"
xmlns:converters="clr-namespace:Japanese.Converters;assembly=Japanese"
x:Class="Japanese.Templates.BadgeGridTemplate"
x:Name="this"
HeightRequest="{DynamicResource GridHeight}" Margin="0"
Orientation="Vertical" Spacing="0">
<BoxView HeightRequest="1" HorizontalOptions="FillAndExpand" IsVisible="{Binding Separator, Source={x:Reference this}}" BackgroundColor="{DynamicResource LineColor}" Margin="0" />
<Grid Padding="20,0" VerticalOptions="CenterAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Text="{Binding Text, Source={x:Reference this}}" TextColor="{DynamicResource LabelColor}" Style="{StaticResource LabelText}" VerticalTextAlignment="Center" WidthRequest="30" />
<t:Button Grid.Column="1" Meta="GsT" RowId="{Binding RowId, Source={x:Reference this}}" State="{Binding State, Source={x:Reference this}}" TapCommand="{Binding TapCommand, Source={x:Reference this}}" Text="{Binding Message, Source={x:Reference this}}" Theme="{Binding Theme}" WidthRequest="30" />
</Grid>
</t:BaseGridTemplate>
What are we trying to do:
Take a list of data from some source, Put them in a list
What your code is doing:
taking all the data building(all 100 AddSwitchRows ) UI right then.
Those hundreds of UI has to be rendered all at once on the screen. (even if the user is not going to look at them all)
Suggestion: How should we do this:
I highly suggest using a Listview.
Or FlowListview for grids https://github.com/daniel-luberda/DLToolkit.Forms.Controls
Why?
Listview will only try to draw UI for the screen user is looking at.
If there are a thousand more items needed. It will be built only when the user scrolls down to that portion.
If you want to make multiple kinds of cells which depends on the data you receive we should use DataTemplate with ListView
More Information on Microsoft's Official Docs
Example
I have added 1000 items in the listView's ItemSource when clicked on the button in header.
You can add your template in the Listview.datatemplate tag and bind your ViewModel to this view
View
And if you want to change item's view as per a property value. Use DataTemplate selecter property of ListView
<?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:local="clr-namespace:stackAnswerApp"
x:Class="stackAnswerApp.MainPage"
x:Name="Root">
<ContentPage.BindingContext>
<local:MainPageViewModel />
</ContentPage.BindingContext>
<ListView ItemsSource="{Binding ListItems}" RowHeight="100">
<ListView.Header>
<Button Text="Start Adding" Command="{Binding StartAddingItems}" />
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<!-- whatever is your template -->
<StackLayout BackgroundColor="Aqua">
<Label Text="{Binding Text1}" />
<Button BackgroundColor="Blue"
Text="Go" BindingContext="{Binding Source={x:Reference Root},Path=BindingContext}"
Command="{Binding ButtonTapped}" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage>
ViewModel
class AModel
{
public string Text1 { get; set; }
public string Text2 { get; set; }
}
class MainPageViewModel
{
public ObservableCollection<AModel> ListItems { get; set; }
private const int TotalRows = 1000;
public ICommand StartAddingItems
{
get
{
return new Command(async () =>
{
//add too many items in the list
await Task.Run(async () => { await AddItemsToList(); });
});
}
}
private async Task AddItemsToList()
{
for (var i = 0; i < TotalRows; i++)
{
ListItems.Add(new AModel() {Text1 = $"index {i}", Text2 = $"tap {i}"});
}
}
public ICommand ButtonTapped
{
get
{
return new Command((() =>
{
//button in the list was tapped
}));
}
}
public MainPageViewModel()
{
ListItems = new ObservableCollection<AModel>();
}
}
You can try using BatchBegin() on stacks variable before the loop of child adds in your function AddSwitchRows and BatchCommit() after the loop. And if that works, do the same to your parent stack variable st in CreateSwitchSection.
Ie.
stacks.BatchBegin();
foreach var x in data
{
…
}
stacks.BatchCommit();
This may resolve it as many languages displaying forms like to recalculate layout every time (expensive) the collection/list/children are added/removed/updated. Batching allows the layout recalculations to be done once instead of every time the list changes.
If the order matters, I haven't seen another way to do this.
If the order doesn't matter, You could split the StackLayout in to multiple StackLayouts and just add the individual elements inside asynchronous threads using Task.WhenAll.
Task.WhenAll is like having multiple people do work for you at the same time, instead of just 1 person.
I think Problem is in
App.cardSetWithWordCount
It may be a linq query
I think this goes to db every time .Just run it once and save it on variable or property
var globalApp_cardSetWithWordCount = App.cardSetWithWordCount.ToList()
Linq is executed when to list or toarray is called.
List<int> ints = new List<int>();
foreach(var y in query)
ints.Add(y.Count());
return ints.ToArray();
then use same take and skip format
I have created a simple app, where users can see more information in section, if they tab a Label, which is seen on the pictures below.
The problem is, that after navigating to AnotherPage and back, the text moves to left, even though I have set the HorizontalTextAlignment to End.
This only happens, when I have shown the section and hiding it again (by tapping on the Label twice).
The problem is illustrated on the picture below, where y is located at the left side.
My source code for showing a simple app with this problem, can be downloaded from this Dropbox link.
EDIT
Added code example
The ContentPage is as simple as
<StackLayout>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Text="Test" VerticalOptions="Start" />
<Label Text="{Binding Text}" HorizontalTextAlignment="End" TextColor="Red" HorizontalOptions="FillAndExpand" BackgroundColor="Yellow">
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{Binding ChangeVisibilityCommand}" />
</Label.GestureRecognizers>
</Label>
</Grid>
<StackLayout IsVisible="{Binding IsVisible}">
<Label Text="Text 1" />
<Label Text="Text 2" />
</StackLayout>
<Button Command="{Binding OpenAnotherPageCommand}" Text="Open Another Page" />
</StackLayout>
And the ViewModel is shown below
public class MainPageViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private ICommand _changeVisibilityCommand;
public ICommand ChangeVisibilityCommand
{
get => _changeVisibilityCommand;
set
{
if (value != _changeVisibilityCommand)
{
_changeVisibilityCommand = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(ChangeVisibilityCommand)));
}
}
}
private bool _isVisible;
public bool IsVisible
{
get => _isVisible;
set
{
if (value != _isVisible)
{
_isVisible = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(IsVisible)));
}
}
}
private ICommand _openAnotherPageCommand;
public ICommand OpenAnotherPageCommand
{
get => _openAnotherPageCommand;
set
{
if (value != _openAnotherPageCommand)
{
_openAnotherPageCommand = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(OpenAnotherPageCommand)));
}
}
}
private string _text = "u";
public string Text
{
get => _text;
set
{
if (!string.Equals(_text, value, StringComparison.InvariantCultureIgnoreCase))
{
_text = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Text)));
}
}
}
public MainPageViewModel()
{
ChangeVisibilityCommand = new Command(() =>
{
IsVisible = !IsVisible;
Text = IsVisible ? "x" : "y";
});
OpenAnotherPageCommand = new Command(() =>
{
(Application.Current.MainPage as NavigationPage)?.PushAsync(new AnotherPage());
});
}
}
And the AnotherPage is simply showing a text for example
First of all, i wasn't able to reproduce your issue using the latest version of Xamarin. Maybe simply upgrading Xamarin (Forms) will remove the unwanted behavior in your case as well.
If not, you have two options:
1 - Use HorizontalOptions instead
HorizontalOptions="EndAndExpand"
since HorizontalOptions has a higher priority in the layout engine.
Not the most elegant way but surely the most reliable.
2 - Use DataBinding
In your model just add the following property:
public TextAlignment LabelAlignment
{
get => labelAlignment;
set
{
labelAlignment = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(LabelAlignment)));
}
}
private TextAlignment labelAlignment = TextAlignment.End;
And in your Xaml you change HorizontalAlignment to
HorizontalTextAlignment="{Binding LabelAlignment}"
That will work because after your screen has been created, the values in the model will be loaded and updated afterwards.
Change HorizontalOptions="FillAndExpand"
To HorizontalOptions="CenterAndExpand"
This will force the text to expand from the center and be placed at the end.
To force the text to the right, you can add a another column definition to your grid:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
Place and emtpy object into the first cell, the one to the left:
number from the top (0)
number from the left (0)
and your label into the second cell, the one to the right:
number from the top (0)
number from the left (1)
The text area will adjust to the text length and will always be to the right.
I hope this information helps!
You can read more about grid in the documentation:
https://learn.microsoft.com/en-us/xamarin/android/user-interface/layouts/grid-layout
I'm struggling a bit with UWP, x:Bind and data validation.
I've got a very simple use case: I want the user to input an int in a TextBox and display the number in a TextBlock as soon as the user leaves the TextBox.
I can set the InputScope="Number" for the TextBox, but that doesn't prevent someone who type with a keyboard to type an alpha char (or paste something).
Problem is, when I bind a field with the Mode=TwoWay, it seems that you can't prevent a System.ArgumentException if the field that you bind is declared as int. I wanted to check in the set method if the input was a number, but the exception occurs just before that.
My (very simple) ViewModel (no model here, I tried to keep it as simple as possible):
public class MyViewModel : INotifyPropertyChanged
{
private int _MyFieldToValidate;
public int MyFieldToValidate
{
get { return _MyFieldToValidate; }
set
{
this.Set(ref this._MyFieldToValidate, value);
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected void RaisedPropertyChanged([CallerMemberName]string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
protected bool Set<T>(ref T storage, T value, [CallerMemberName]string propertyName = null)
{
if (Equals(storage, value))
{
return false;
}
else
{
storage = value;
this.RaisedPropertyChanged(propertyName);
return true;
}
}
}
My code behind:
public sealed partial class MainPage : Page
{
public MyViewModel ViewModel { get; set; } = new MyViewModel() { MyFieldToValidate = 0 };
public MainPage()
{
this.InitializeComponent();
}
}
And my whole XAML:
<Page
x:Class="SimpleFieldValidation.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:SimpleFieldValidation"
xmlns:vm="using:SimpleFieldValidation.ViewModel"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="10*" />
<RowDefinition Height="*" />
<RowDefinition Height="10*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBox Grid.Row="1" Grid.Column="0" Text="{x:Bind ViewModel.MyFieldToValidate, Mode=TwoWay}" x:Name="inputText" InputScope="Number" />
<TextBlock Grid.Row="1" Grid.Column="1" Text="{x:Bind ViewModel.MyFieldToValidate, Mode=OneWay}" x:Name="textToDisplay" />
</Grid>
</Page>
If I type a numeric char in the TextBox, everything's OK. But if I type a non-numeric value (say "d") (it doesn't even reach the breakpoint at the first bracket of the set method for MyFieldToValidate):
Is there a best practice to do what I want to do? The simplest solution would be preventing the user to type other char than numeric in the first place, but I've been searching for hours without finding a simple way... Another solution would be to validate the data on leaving the field, but I didn't find something relevant for UWP and x:Bind (few things for WPF thought, but they can't be replicated with a UWP).
Thanks!
As #RTDev said, your exception is caused by the system can not convert string to int.
You can create a class that allows you to convert the format of your data between the source and the target by inheriting from IValueConverter.
You should always implement Convert(Object, TypeName, Object, String) with a functional implementation, but it's fairly common to implement ConvertBack(Object, TypeName, Object, String) so that it reports a not-implemented exception. You only need a ConvertBack(Object, TypeName, Object, String) method in your converter if you are using the converter for two-way bindings, or using XAML for serialization.
For more info, see IValueConverter Interface.
For example:
<Page.Resources>
<local:IntFormatter x:Key="IntConverter" />
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="10*" />
<RowDefinition Height="*" />
<RowDefinition Height="10*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBox Grid.Row="1" Grid.Column="0" Text="{x:Bind ViewModel.MyFieldToValidate, Mode=TwoWay,Converter={StaticResource IntConverter}}" x:Name="inputText" InputScope="Number" />
<TextBlock Grid.Row="1" Grid.Column="1" Text="{x:Bind ViewModel.MyFieldToValidate, Mode=OneWay}" x:Name="textToDisplay" />
</Grid>
The IntFormatter class:
internal class IntFormatter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
if (value != null)
{
return value.ToString();
}
else
{
return null;
}
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
int n;
bool isNumeric = int.TryParse(value.ToString(), out n);
if (isNumeric)
{
return n;
}
else
{
return 0;
}
}
}
If you don't want the users to type alphanumerical characters, I think the most elegant solution is to create a new class NumberBox that inherits from the class InputBox and overload the OnKeyDown method to intercept the alphanumerical keystrokes, something like this:
using Windows.System;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;
namespace MyProject.Controls
{
public sealed class NumberBox : TextBox
{
protected override void OnKeyDown(KeyRoutedEventArgs e)
{
if (e.Key >= VirtualKey.Number0 && e.Key <= VirtualKey.Number9 ||
e.Key >= VirtualKey.NumberPad0 && e.Key <= VirtualKey.NumberPad9 ||
e.Key >= VirtualKey.Left && e.Key <= VirtualKey.Down ||
e.Key == VirtualKey.Delete ||
e.Key == VirtualKey.Tab ||
e.Key == VirtualKey.Back ||
e.Key == VirtualKey.Enter)
base.OnKeyDown(e);
else
e.Handled = true;
}
}
}
Then in your XAML, add a namespace to reference the namespace where your NumberBox class is, and then replace InputBox with control:NumberBox, something like this:
<Page
x:Class="MyProject.View.CalibrarEnfoque"
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:local="using:MyProject.View"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="using:MyProject.Controls"
mc:Ignorable="d">
<Grid>
<controls:NumberBox Text="{x:Bind ViewModel.MyValue, Mode=TwoWay}"/>
</Grid>
</Page>
I'm new to Xamarin but know some iOS, got someone else's code dumped in my lap to fix some bugs. I've googled quite a bit, but I can't solve this one.
Everything works fine deployed on Android, deployed on iPhone 4/iOS 7.1.2, and simulated as iPhone 6/iOS 9.3 in the iOS simulator.
Problem
The btnNews button is visible in the iOS simulator (iPhone 6/iOS 9.3) but not when the code is deployed to an iPhone 6/iOS 9.3.1.
MainPage.xaml in a portable project
<?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:c="clr-namespace:Cookies;assembly=Cookies"
x:Class="MyCompany.MainPage" Title="MyCompany">
<Grid ColumnSpacing="1" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="50" x:Name ="buttonsRow"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<c:CookieWebView x:Name="webView" Grid.Row="0" Grid.ColumnSpan="2">
</c:CookieWebView>
<ActivityIndicator x:Name="activityIndicator"
VerticalOptions="FillAndExpand" HorizontalOptions="Center" Grid.Row="0" Grid.ColumnSpan="2" />
<Button x:Name="btnNews" Text="back to news list" BackgroundColor="#E15F59" BorderRadius="0" BorderColor="#E15F59"
TextColor="White" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" BorderWidth="0" IsVisible="False"
HorizontalOptions="FillAndExpand"/>
</Grid>
</ContentPage>
MainPage.xaml.cs MainPage()
namespace MyCompany
{
public partial class MainPage : ContentPage
{
private Button _btnNews;
private ActivityIndicator Loader { get; set; }
private RowDefinition _row;
public const string URL_NEWS = "http://www.mycompany.com/";
public const string QUERY = "master=app";
public static CookieWebView WebView;
public static string CurrentUrl;
bool externalUrlClicked = false;
public MainPage(string url = null)
{
InitializeComponent();
// cookies common : https://github.com/seansparkman/CookiesWebView + nuget package CookiesWebView nuget : https://www.nuget.org/packages/CookieWebView/1.0.0
// ios: http://stackoverflow.com/questions/29768019/cookies-in-web-view-xamarin-ios
NavigationPage.SetHasNavigationBar(this, false);
WebView = this.FindByName<CookieWebView>("webView");
_row = this.FindByName<RowDefinition>("buttonsRow");
Loader = this.FindByName<ActivityIndicator>("activityIndicator");
WebView.Navigated += _webView_Navigated;
WebView.Navigating += WebView_Navigating;
var source = new UrlWebViewSource();
source.Url = GetUrl(!string.IsNullOrEmpty(url) ? url : URL_NEWS);
WebView.Source = source;
ReadCookiesFromSettings();
_btnNews = this.FindByName<Button>("btnNews");
_btnNews.Clicked += _btnNews_Clicked;
// Keep free from iPhone status bar
this.Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0);
}
}
}
MainPage.xaml.cs _webView_Navigated()
This method runs whenever a link is clicked in the web view. If the url is a "news item page" then btnNews ("Back to news list") should be shown, else btnNews should be hidden. I have set breakpoints to validate that the correct if/else blocks run at appropriate times. The deployed app uses the same urls/web content as the simulated app.
public void _webView_Navigated(object sender, CookieNavigatedEventArgs args)
{
if (externalUrlClicked)
{
args.Url = CurrentUrl;
externalUrlClicked = false;
return;
}
else
CurrentUrl = args.Url;
if (args.Url != GetUrl(URL_NEWS))
{
_row.Height = 50;
_btnNews.IsVisible = true;
}
else
{
_row.Height = 0;
_btnNews.IsVisible = false;
}
try
{
var cookie = WebView.Cookies[Settings.CookiesSettingsKey];
Settings.CookiesSettings = cookie.Value;
}
catch (Exception)
{
}
Loader.IsVisible = Loader.IsRunning = false;
}
In a native iOS app I would have started investigating layout and things like setNeedsDisplay, but I haven't yet found out how to do that with Xamarin.
Thanks for helping out!
I have List box in which I am displaying values at runtime. But i want to show an image in list box only when i selected an item from list box.Currently I am using DataTemplate and ItemTemplate in list box for displaying values at runtime (In short data binding).Thanks
One solution is to add a dependency property IsSelected to your item view model, and toggle that when you tap on an item. This would mean that you can select multiple items, i.e. show images from several rows at once.
using some xaml like this:
<phone:PhoneApplicationPage.Resources>
<convert:BooleanToVisibilityConverter x:Key="booltovisibility" />
</phone:PhoneApplicationPage.Resources>
<phone:PhoneApplicationPage.DataContext>
<vm:MainViewModel/>
</phone:PhoneApplicationPage.DataContext>
<Border Grid.Row="1" BorderThickness="1" BorderBrush="Red">
<ListBox ItemsSource="{Binding Items}">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="1" BorderBrush="Green">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<i:Interaction.Triggers>
<i:EventTrigger EventName="Tap">
<i:InvokeCommandAction Command="{Binding ToggleSelected}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<TextBlock Grid.Row="0" Text="{Binding Text}"/>
<Image Grid.Row="1" Source="{Binding Image}" Visibility="{Binding IsSelected, Converter={StaticResource booltovisibility}}"/>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Border>
Note that this xaml uses the System.Windows.Interactivity dll from the Silverlight SDK. It also uses a custom BooleanToVisibilityConverter, which is a IValueConverter that converts a boolean to a Visibility enum value.
Further more, we can define an ItemViewModel like the one below, and have an "Items" property in the MainViewModel
private readonly ObservableCollection<ItemViewModel> items;
public ObservableCollection<ItemViewModel> Items { get { return items; } }
which is populated from code.
using System;
using System.Windows;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using Test.Commands;
namespace Test.ViewModels {
public class ItemViewModel : DependencyObject {
private ICommand toggleCommand;
public ItemViewModel(string title) {
Text = title;
Image = new BitmapImage(new Uri("graphics/someimage.png", UriKind.Relative));
}
public static readonly DependencyProperty TextProperty =
DependencyProperty.Register("Text", typeof(string), typeof(ItemViewModel), new PropertyMetadata(default(string)));
public static readonly DependencyProperty IsSelectedProperty =
DependencyProperty.Register("IsSelected", typeof(bool), typeof(ItemViewModel), new PropertyMetadata(default(bool)));
public static readonly DependencyProperty ImageProperty =
DependencyProperty.Register("Image", typeof(ImageSource), typeof(ItemViewModel), new PropertyMetadata(default(ImageSource)));
public string Text {
get { return (string)GetValue(TextProperty); }
set { SetValue(TextProperty, value); }
}
public bool IsSelected {
get { return (bool)GetValue(IsSelectedProperty); }
set { SetValue(IsSelectedProperty, value); }
}
public ImageSource Image {
get { return (ImageSource)GetValue(ImageProperty); }
set { SetValue(ImageProperty, value); }
}
public ICommand ToggleSelected {
get { return toggleCommand ?? (toggleCommand = new RelayCommand(o => IsSelected = !IsSelected)); }
}
}
}
where RelayCommand is similar to the one found at WPF Apps With The Model-View-ViewModel Design Pattern article. The main difference is that CommandManager is not available in the Windows Phone SDK.
By using this model you can tap on rows to select them, using the ToggleSelected command in the view model, and deselect them by tapping them again, in effect showing or hiding the image.