I have a model like:
{
"images": [{
"image_url": "..........",
"orientation": "horizontal"
},
{
"image_url": "...............",
"orientation": "vertical"
}]
}
and a ListView DataTemplate
<DataTemplate x:DataType="model:ImageItem">
<controls:ImageEx Source="{x:Bind cover_image_url}" PlaceholderSource="" PlaceholderStretch="Uniform"/>
</DataTemplate>
Now, I want the ImageEx control's PlaceholderSource property change along with orientation.
More clearly, when the image property is horizontal, ImageEx will load a place holder 1. When the image property is vertical, ImageEx will load a place holder 2.
How to do this. Please show me.
More clearly, when the image property is horizontal, ImageEx will load a place holder 1. When the image property is vertical, ImageEx will load a place holder 2.
You could use IValueConverter interface to approach, use converter class to converter different message type to different PlaceholderSource for ImageEx. You could refer the follow ImageConverter.
public class ImageConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
object img = null;
switch (value.ToString())
{
case "horizontal":
img = new BitmapImage(new Uri("ms-appx:///Assets/holder1.png"));
break;
case "vertical":
img = new BitmapImage(new Uri("ms-appx:///Assets/holder2.png"));
break;
default:
break;
}
return img;
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
throw new NotImplementedException();
}
}
Xaml
<Page.Resources>
<local:ImageConverter x:Key="Converter"/>
</Page.Resources>
......
<DataTemplate x:DataType="model:ImageItem">
<controls:ImageEx Source="{x:Bind cover_image_url}" PlaceholderSource="{x:Bind orientation,Converter={StaticResource Converter}}" PlaceholderStretch="Uniform"/>
</DataTemplate>
Related
I a have typical label that I want to control its visibility by a property that is null/empty or not.
I've put breakpoints and also log and it seems that return value is true but still it does not show the element. When I scroll my listview then they are visible but sometimes still not.. There are several items, sometimes some of them are visible sometimes not.. it is changable..
here my converter
public class TestBooleanConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var result= value != null && !value.ToString().Equals("");
Console.WriteLine("Result: " +result);
return result;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
and the property
public string LocalizedReadoutDescription
{
get
{
Console.WriteLine("Description: " + dataItem.Description);
string localizedDescription = null;
if (!string.IsNullOrEmpty(this.dataItem.Description))
{
string[] descriptionKeyParts = this.dataItem.Description.Split(';');
localizedDescription = descriptionKeyParts[0];
if (!string.IsNullOrEmpty(localizedDescription))
{
localizedDescription =
this.getLocalizedString(Constants.Localization.LogicalItemDescriptionFmt,
localizedDescription);
}
}
return localizedDescription;
}
}
and Xaml Code
<ContentView.Resources>
<converters:TestBooleanConverter x:Key="nullToBoolConverter"/>
.....
</ContentView.Resources>
.....
<StackLayout Orientation="Horizontal" Margin="4,2" Grid.Column="1" VerticalOptions="StartAndExpand"
HorizontalOptions="FillAndExpand" Spacing="0" BackgroundColor="White">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="Help_Tapped" CommandParameter="{Binding}"/>
</StackLayout.GestureRecognizers>
<Label x:Name="HelpLabel" Style="{StaticResource InfoIconLabel}" Text="{x:Static resx:UI.Icon_Info}" Margin="0"
HorizontalOptions="EndAndExpand" VerticalOptions="Start" IsVisible="{Binding LocalizedReadoutDescription,
Converter={StaticResource nullToBoolConverter}}" FontSize="Micro" LineBreakMode="NoWrap"/>
</StackLayout>
I feel that, even it returns true, but it uses the previous rows value. but only this part does not update. label names, values are updated, but only some items' visibility is not updating..
where is my mistake?
Update:
I've created an event for property change of the label that I want to control its visibility. I can see that, the IsVisible is always true but on the GUI, only one item is visible.. but when I scroll, several are visible, and when I scroll more then all items are visible as it must be
private void HelpLabel_OnPropertyChanged(object sender, PropertyChangedEventArgs e)
{
if (e.PropertyName.Equals("IsVisible"))
{
// I check => ((Xamarin.Forms.Label)sender).IsVisible
//always true
}
}
I have found the problem. It was not regarding cache or informing UI element. Somehow it was regarding the item's height. I've gave a height and heightrequest value, and then it works always.. weird..
In the ListView, I need to show some images and text, only display the text when the Image.Source is empty. How to do?
<ListView ItemsSource="{x:Bind ViewModel.News}">
<ListView.ItemTemplate>
<DataTemplate x:DataType="home:NormalNews">
<StackPanel>
<TextBlock Text="{x:Bind Title}"/>
<Image Source="{x:Bind Thumbnail}"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
ViewModel Data Source like:
News.Add(new NormalNews{ Title = "title1", Thumbnail = "http://a.com/test.jpg" });
News.Add(new NormalNews{ Title = "title2", Thumbnail = "" });
When I tried to run this page, it stopped running.
You can handle this using xaml converters.
Add a converter and define a key for it in your page.
In XAML page
<converter:ImageUriConverter x:Key="ImageUriConvert"/>
In your list
<Image Source="{Binding Thumbnail,Converter={StaticResource ImageUriConvert}}"/>
Converter class code
class ImageUriConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
if (value.ToString() == string.Empty)
{
return new BitmapImage();
}
return new BitmapImage(new Uri(value.ToString()));
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
throw new NotImplementedException();
}
}
While you are populating the ViewModel object, do this:
ViewModel.News.Add(new NormalNews{
Thumbnail=(the Thumbnail source which you will be using),
Title=(the Thumbnail source which you will be using)==""?"Your Title":""});
This will set your Title to the specified string when your Thumbnail source is empty.
Hope this helps.
I'm working on a Xamarin.Forms app using a page that displays a map.
The XAML is:
<maps:Map x:Name="Map">
...
</maps:Map>
I know that the map can be accessed from the page's code-behind like this:
var position = new Position(37.79762, -122.40181);
Map.MoveToRegion(new MapSpan(position, 0.01, 0.01));
Map.Pins.Add(new Pin
{
Label = "Xamarin",
Position = position
});
But because this code would break the app's MVVM architecture, I'd rather like to access the Map object from my ViewModel, not directly from the View/page - either using it directly like in the above code or by databinding to its properties.
Does anybody know a way how this can be done?
If you don't want to break the MVVM pattern and still be able to access your Map object from the ViewModel then you can expose the Map instance with a property from your ViewModel and bind to it from your View.
Your code should be structured like described here below.
The ViewModel:
using Xamarin.Forms.Maps;
namespace YourApp.ViewModels
{
public class MapViewModel
{
public MapViewModel()
{
Map = new Map();
}
public Map Map { get; private set; }
}
}
The View (in this example I'm using a ContentPage but you can use whatever you like):
<?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="YourApp.Views.MapView">
<ContentPage.Content>
<!--The map-->
<ContentView Content="{Binding Map}"/>
</ContentPage.Content>
</ContentPage>
I didn't show how, but the above code snipped can only work when the ViewModel is the BindingContext of your view.
What about creating a new Control say BindableMap which inherits from Map and performs the binding updates which the original Map lacks internally. The implementation is pretty straightforward and I have included 2 basic needs; the Pins property and the current MapSpan. Obviously, you can add your own special needs to this control. All you have to do afterward is to add a property of type ObservableCollection<Pin> to your ViewModel and bind it to the PinsSource property of your BindableMap in XAML.
Here is the BindableMap:
public class BindableMap : Map
{
public BindableMap()
{
PinsSource = new ObservableCollection<Pin>();
}
public ObservableCollection<Pin> PinsSource
{
get { return (ObservableCollection<Pin>)GetValue(PinsSourceProperty); }
set { SetValue(PinsSourceProperty, value); }
}
public static readonly BindableProperty PinsSourceProperty = BindableProperty.Create(
propertyName: "PinsSource",
returnType: typeof(ObservableCollection<Pin>),
declaringType: typeof(BindableMap),
defaultValue: null,
defaultBindingMode: BindingMode.TwoWay,
validateValue: null,
propertyChanged: PinsSourcePropertyChanged);
public MapSpan MapSpan
{
get { return (MapSpan)GetValue(MapSpanProperty); }
set { SetValue(MapSpanProperty, value); }
}
public static readonly BindableProperty MapSpanProperty = BindableProperty.Create(
propertyName: "MapSpan",
returnType: typeof(MapSpan),
declaringType: typeof(BindableMap),
defaultValue: null,
defaultBindingMode: BindingMode.TwoWay,
validateValue: null,
propertyChanged: MapSpanPropertyChanged);
private static void MapSpanPropertyChanged(BindableObject bindable, object oldValue, object newValue)
{
var thisInstance = bindable as BindableMap;
var newMapSpan = newValue as MapSpan;
thisInstance?.MoveToRegion(newMapSpan);
}
private static void PinsSourcePropertyChanged(BindableObject bindable, object oldvalue, object newValue)
{
var thisInstance = bindable as BindableMap;
var newPinsSource = newValue as ObservableCollection<Pin>;
if (thisInstance == null ||
newPinsSource == null)
return;
UpdatePinsSource(thisInstance, newPinsSource);
newPinsSource.CollectionChanged += thisInstance.PinsSourceOnCollectionChanged;
}
private void PinsSourceOnCollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
{
UpdatePinsSource(this, sender as IEnumerable<Pin>);
}
private static void UpdatePinsSource(Map bindableMap, IEnumerable<Pin> newSource)
{
bindableMap.Pins.Clear();
foreach (var pin in newSource)
bindableMap.Pins.Add(pin);
}
}
Notes:
I have omitted the using statements and namespace declaration for the sake of simplicity.
In order for our original Pins property to be updated as we add members to our bindable PinsSource property, I declared the PinsSource as ObservableCollection<Pin> and subscribed to its CollectionChanged event. Obviously, you can define it as an IList if you intend to only change the whole value of your bound property.
My final word regarding the 2 first answers to this question:
Although having a View control as a ViewModel property exempts us from writing business logic in code behind, but it still feels kind of hacky. In my opinion, the whole point of (well, at least a key point in) the VM part of the MVVM is that it is totally separate and decoupled from the V. Whereas the solution provided in the above-mentioned answers is actually this:
Insert a View Control into the heart of your ViewModel.
I think this way, not only you break the MVVM pattern but also you break its heart!
I have two options which worked for me and which could help you.
You could either add a static Xamarin.Forms.Maps Map property to your ViewModel and set this static property after setting the binding context, during the instantiation of your View, as show below:
public MapsPage()
{
InitializeComponent();
BindingContext = new MapViewModel();
MapViewModel.Map = MyMap;
}
This will permit you to access your Map in your ViewModel.
You could pass your Map from your view to the ViewModel during binding, for example:
<maps:Map
x:Name="MyMap"
IsShowingUser="true"
MapType="Hybrid" />
<StackLayout Orientation="Horizontal" HorizontalOptions="Center">
<Button x:Name="HybridButton" Command="{Binding MapToHybridViewChangeCommand}"
CommandParameter="{x:Reference MyMap}"
Text="Hybrid" HorizontalOptions="Center" VerticalOptions="Center" Margin="5"/>`
And get the Map behind from the ViewModel's Command.
Yes, Map.Pins is not bindable, but there is ItemsSource, which is easy to use instead.
<maps:Map ItemsSource="{Binding Locations}">
<maps:Map.ItemTemplate>
<DataTemplate>
<maps:Pin Position="{Binding Position}"
Label="{Binding Name}"
Address="{Binding Subtitle}" />
So, just for the pins, MVVM can be done without any custom control.
But Map.MoveToRegion() (and Map.VisibleRegion to read) is still open. There should be a way to bind them. Why not both in a single read/write property? (Answer: because of an endless loop.)
Note: if you need Map.MoveToRegion only once on start, the region can be set in the constructor.
I don't think Pins is a bindable property on Map, you may want to file feature request at Xamarin's Uservoice or the fourm here: http://forums.xamarin.com/discussion/31273/
It is not ideal, but you could listen for the property changed event in the code behind and then apply the change from there. Its a bit manual, but it is doable.
((ViewModels.YourViewModel)BindingContext).PropertyChanged += yourPropertyChanged;
And then define the "yourPropertyChanged" method
private void yourPropertyChanged(object sender, PropertyChangedEventArgs e)
{
if(e.PropertyName == "YourPropertyName")
{
var position = new Position(37.79762, -122.40181);
Map.MoveToRegion(new MapSpan(position, 0.01, 0.01));
Map.Pins.Add(new Pin
{
Label = "Xamarin",
Position = position
});
}
}
I would like to set the bottom Corner Radius of a ListView Item for just the "last" item in the list. I've attempted to do so with a Converter (which in fact finds the last row), but to no avail.
The desirable effect is when the Converter returns true after finding the last item in the ListView, the border CornerRadius on the last ListViewItem is set to CornerRadius="0,0,10,10". For all other items in the ListView, CornerRadius="0,0,0,0"
What I've done so far.
The Converter...
public class IsLastItemConverter : IValueConverter
{
#region IValueConverter Members
public object TrueValue { get; set; }
public object FalseValue { get; set; }
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
ListViewItem item = value as ListViewItem;
ListView listView = ItemsControl.ItemsControlFromItemContainer(item) as ListView;
if (listView != null)
{
int index = listView.ItemContainerGenerator.IndexFromContainer(item);
if (index == listView.Items.Count - 1)
{
TrueValue = true;
return (bool)TrueValue;
}
else
{
FalseValue = false;
return (bool)FalseValue;
}
}
FalseValue = false;
return (bool)FalseValue;
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
// Just Convert Back
return true;
}
#endregion
}
The XAML...
<local:IsLastItemConverter x:Key="lastItemConverter"
TrueValue="0,0,10,10" FalseValue="0,0,0,0"/>
<DataTemplate x:Key="CellContentTemplate">
<Border
x:Name="CellContentBorder"
Background="{StaticResource GrayCharcoal}"
BorderThickness="4,4,4,4"
BorderBrush="{StaticResource Gray}"
CornerRadius="{Binding Converter={StaticResource lastItemConverter},
RelativeSource={RelativeSource AncestorType={x:Type ListViewItem}}}"
HorizontalAlignment="Left"
Width="210"
Height="50"
ContextMenu="{StaticResource MarginalUnitsContextMenu}"
ScrollViewer.VerticalScrollBarVisibility="Hidden">...
Thoughts and ideas much appreciated - Glenn
I would try returning a real CornerRadius instead of a string (which, you are essentially returning).
My assumption is following:
When passing as string "0,0,0,0" in xaml as CornerRadius, the appropriate Converter is used to convert this string in to a CornerRadius struct.
As you are now using a custom converter, possibly the string to CornerRadius Converter is not anymore used...
EDIT (in light of Clemens answer): The Converter for the property does seem to kick in when a string was returned from the custom converter associated with the binding!
This is because CornerRadius has an associated TypeConverter:
[TypeConverterAttribute(typeof(CornerRadiusConverter))]
public struct CornerRadius : IEquatable<CornerRadius>
which handles this conversion. This converter handles the Conversion from string to CornerRadius.
(Taken from http://msdn.microsoft.com/en-us/library/system.componentmodel.typeconverterattribute.aspx )
I am pulling data from a previous page which was a selected item in a listbox from a wcf service.
Ther error I am having is that the textblock is not reading the formatting in my in my data.
this is the code that brings the data in from the previous page
private void LoadPlayer()
{
FrameworkElement root1 = Application.Current.RootVisual as FrameworkElement;
var currentPlayer = root1.DataContext as PlayerProfile;
_SelectedPlayer = currentPlayer;
}
this is the xaml
<TextBlock Height="Auto" TextWrapping="Wrap" Name="Blurb" Text="{Binding Bio}" xml:space="preserve" />
specifically I am trying to get the \r\n to work in my display as a linebreak.
See the answer here:
Newline in string attribute
In your case what you need to do write a Converter (something that implements IValueConverter) that turns the string data that contains the \r\n into encoded entities i.e.
and
. Then just use that converter on your Binding.
public class EncodeCRLFConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
string stringtoconvert = value as string;
if (input != null))
{
// Note there are different ways to do the replacement, this is
// just a very simplistic method.
stringtoconvert = stringtoconvert.Replace( "\r", "
" );
stringtoconvert = stringtoconvert.Replace( "\n", "
" );
return stringtoconvert;
}
return null;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new Exception("The method or operation is not implemented.");
}
}
Create an instance of your converter somewhere...e.g. typically in .Resources....(in this example I've just used Window because I don't know what your TextBlock is inside).
<Window.Resources>
<EncodeCRLFConverter x:Key="strconv"/>
<Window.Resources>
<TextBlock Height="Auto" TextWrapping="Wrap" Name="Blurb" Text="{Binding Bio, Converter={StaticResource strconv}}" />