I am using a DataGrid control in Avalonia and I want to apply styles to DataGridRow based on data binding to the view model backing a row. How can I do this?
I figure it will be based on classes, so I defined a style for an isRequired class:
<DataGrid Items="{Binding Players}">
<DataGrid.Styles>
<Style Selector="DataGridRow.isRequired">
<Setter Property="Background" Value="LightGreen" />
</Style>
</DataGrid.Styles>
</DataGrid>
But notice the class is supposedly going to be set on a DataGridRow, but how can I set that class on the row based on a bound Player view model?
In WPF I'd often reach for Triggers but I've started to employ more Converters lately.
<DataGrid.Styles>
<Style Selector="DataGridRow">
<Setter Property="Background" Value="{Binding Tag, Converter={StaticResource OrderRowBackgroundConverter}}" />
</Style>
</DataGrid.Styles>
public class OrderRowBackgroundConverter : IValueConverter
{
public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
{
if (value != null)
{
switch (value.ToString())
{
case "":
return new SolidColorBrush(Color.Parse("#FF8D8D"));
case "fulfilled":
return new SolidColorBrush(Color.Parse("#B8FFB8"));
}
}
return new SolidColorBrush(Color.Parse("#FF8D8D"));
}
public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
Related
<Label Grid.Row="0" Grid.Column="1"
Text="{Binding Date, Converter={StaticResource localTimeConverter}, StringFormat='{0:MMMM dd, yyyy}'}"
LineBreakMode="NoWrap"
FontSize="16"
Style="{DynamicResource FieldLabel}"/>
I have the above Xaml and the below Converter:
public class UtcToLocalDateTimeConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
return ((DateTime)value).ToLocalTime();
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotSupportedException();
}
}
However the Converter is not being called when the page starts instead it gets called when navigating away from the page. I add a break point in the convert method and that's when the method is being called. This is confusing!?
Please can someone offer some help?
Whoops ! This was my bad.
I was adding the converter into the SelectedItemTemplate of the ListView instead of the ItemTemplate of the ListView. Thats why the converter never got called. All fixed now.
I am writing an app with Xamarin.Forms and MvvmCross. I am having an issue with my converter. In my Core project:
public class BoolInverseValueConverter : MvxValueConverter<bool, bool>
{
public bool Convert(bool value, Type targetType, CultureInfo culture, object parameter)
{
return !value;
}
}
In my Forms project:
namespace MyApp.Forms.NativeConverters
{
public class BoolInverseValueConverter : MvxNativeValueConverter<MyApp.Core.Converters.BoolInverseValueConverter>
{
}
}
In my xaml:
<Application xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:converters="clr-namespace:MyApp.Forms.NativeConverters;assembly=MyApp.Forms"
x:Class="MyApp.Forms.App">
<Application.Resources>
<converters:BoolInverseValueConverter x:Key="BoolInverseValueConverter" />
</Application.Resources>
In my page:
<views:MvxContentPage x:TypeArguments="viewModels:LoginViewModel"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-namespace:MvvmCross.Forms.Views;assembly=MvvmCross.Forms"
xmlns:mvx="clr-namespace:MvvmCross.Forms.Bindings;assembly=MvvmCross.Forms"
xmlns:viewModels="clr-namespace:MyApp.Core.ViewModels;assembly=MyApp.Core"
xmlns:localviews="clr-namespace:MyApp.Forms.Views;assembly=MyApp.Forms"
xmlns:resx="clr-namespace:MyApp.Core.Resources;assembly=MyApp.Core"
x:Class="MyApp.Forms.Pages.LoginPage"
Title="Login">
<ContentPage.Content>
<localviews:UserLoginView DataContext="{Binding .}" IsVisible="{mvx:MvxBind MyBoolVariable, Converter={StaticResource BoolInverseValueConverter}}"/>
</ContentPage.Content>
</views:MvxContentPage>
When I run the UWP app I get the message:
Cannot assign property “Converter”: Property does not exist, or is not
assignable, or mismatching type between value and property
I think MvvmCross is not scanning the assembly where you have your converter, thus it cannot be found. Try registering the converter class assembly in your Setup:
protected override IEnumerable<Assembly> ValueConverterAssemblies
{
get
{
var toReturn = base.ValueConverterAssemblies.ToList();
toReturn.Add(typeof(BoolInverseValueConverter).Assembly);
return toReturn;
}
}
HIH
no idea about MvvmCross, but in your xaml file, between
<Application.Resources>
and
<converters:BoolInverseValueConverter ...>
did you add
<ResourceDictionary> ?
Your converter should be something like below
public class BoolInverseValueConverter: IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
if (value == null || (value as bool?) == false)
return Visibility.Collapsed;
else
return Visibility.Visible;
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
if (value == null || (value as bool?) == false)
return Visibility.Collapsed;
else
return Visibility.Visible;
}
I ended up making the converter without MvvmCross to have it working. Maybe it's a bug in the current version of MvvmCross (6.2.1).
I'm making vocabulary app and trying to implement favorite word in my Xamarin.Forms Listview.
Please have a look below screenshots
For now i use hard code instead of MVVM
Here is my model
namespace Mamtil.Models
{
public class Word
{
public int Id { get; set; }
public string word { get; set; }
public string translation { get; set; }
public string audio { get; set; }
public bool favorite { get; set; }
public string groupBy => translation[0].ToString().ToUpper();
}
}
XAML
...
<ViewCell>
<StackLayout Orientation="Horizontal">
<Button x:Name="FavoriteButton" Image="gray_star.png" BackgroundColor="#F5F5F5" Clicked="Favorite" BorderRadius="0" WidthRequest="45" CommandParameter="{Binding .}" />
<Switch IsToggled="{Binding favorite}" WidthRequest="50"/>
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" Margin="5, 0, 0, 0">
<Label Text="{Binding translation}">
<Label.FontSize>
<OnPlatform x:TypeArguments="x:Double" iOS="11" Android="18" />
</Label.FontSize>
</Label>
<Label Text="{Binding word}" TextColor="#1565C0">
<Label.FontSize>
<OnPlatform x:TypeArguments="x:Double" iOS="11" Android="13" />
</Label.FontSize>
</Label>
</StackLayout>
<Button x:Name="SpeechButton" Image="ic_mic_black_24dp.png" BackgroundColor="#F5F5F5" Clicked="GoToSpeach" BorderRadius="0" WidthRequest="45" CommandParameter="{Binding Id}" />
</StackLayout>
</ViewCell>
So the question is when i load data from database how do i initialize Image of FavoriteButton like
<!-- Here switch is toggled or not depending on Binding value. I want to do something like this but with image of Button -->
<Switch IsToggled="{Binding favorite}">
in code above it is hard coded but i want to change depending Word.favorite value. At run time i managed to change Image like this
async void Favorite(object sender, EventArgs e)
{
var b = (Button)sender;
Word t = (Word)b.CommandParameter;
//update in database
await App.MamtilRepo.UpdateFavoriteAsync(t.Id);
if (t.favorite)
b.Image = "gray_star.png";
else
b.Image = "yellow_star.png";
t.favorite = !t.favorite;
}
for sake of examle:
...
// Some thing like
if(Word.favorite)
Image = yellow_star.png;
else
Image = gray_star.png;
should i do it some where in code or in XAML
I hope could clearly describe my question. thanks in advance
You'd have to use the OnPropertyChanged() method so that it picks up the new value for the image Url, and you should also set up the binding context.
private bool _imageUrl;
public bool ImageUrl
{
get { return _imageUrl; }
set { _imageUrl = value; OnPropertyChanged(); }
}
And use BindingContext = this; in your constructor.
an old post, but here's another way to do this.
Classically one would use a converter for this.
So your button XAML would now look something like this:
<Button x:Name="FavoriteButton" Image="{Binding favorite, Converter={x:Static converter:FavoriteButton.Instance}}" BackgroundColor="#F5F5F5" Clicked="Favorite" BorderRadius="0" WidthRequest="45" CommandParameter="{Binding .}" />
you'd need to add a reference for where your converter lives in the top of your XAML file, i.e.
xmlns:converter="clr-namespace:Mamtil.Converter;assembly=Interact.Client"
With your converter looking something like this:
namespace Mamtil.Converter {
public class FavoriteButton : IValueConverter {
// this Instance property just means your converter only needs to get created once, I saw it in a Xamarin sample.
public static FavoriteButton Instance = new FavoriteButton();
public object Convert(object value, Type targetType, object parameter, CultureInfo culture) {
if (value == null) {
// only doing this because I've had encounters where an ImageSource has taken Exception at having null returned.
return ImageSource.FromFile("gray_star.png");
}
var fav = (bool)value;
if (fav == true) { // redundant ==, but it makes it quite explicit for any future reader glancing over your code what you intend here.
return ImageSource.FromFile("yellow_star.png");
}
return ImageSource.FromFile("gray_star.png");
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) {
throw new NotImplementedException();
}
}
}
If you're using embedded resources rather than local files then refer to the link Rohit posted in his answer on Aug 24 '16 for how guidance on how to use those in your converter instead.
You can Bind your Image's Source to File, Uri or Resource, which sets the image to display.
FromFile - Requires a filename or filepath that can be resolved on each platform.
FromUri - Requires a Uri object, eg. new Uri("http://server.com/image.jpg") .
FromResource - Requires a resource identifier to an image file embedded in the application or PCL, with a Build Action:EmbeddedResource .
XAML :
<Image Source="{Binding MyImage}" />
ViewModel :
public ImageSource MyImage {get; set; }
You can read more about working with Images here.
DataTrigger or Converter are best solution for your problem.
<Button Image="gray_star.png">
<Button.Triggers>
<DataTrigger TargetType="Button" Binding="{Binding favorite}" Value="True">
<Setter Property="Image" Value="yellow_star.png" />
</DataTrigger>
</Button.Triggers>
</Button>
Is there a way I can see the binding errors in while developing Xamarin Forms apps? The Application Output tab shows nothing but the binding doesn't work. How can I debug bindings?
I'd like to suggest you to add EmptyConverter:
public class EmptyConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
return value;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
return value;
}
}
Then create instance of converter on your page:
<ContentPage.Resources>
<ResourceDictionary>
<converters:EmptyConverter x:Key="EmptyConverter"/>
</ResourceDictionary>
</ContentPage.Resources>
Then add converter to label:
<Label Text="{Binding Text, Converter={StaticResource EmptyConverter}}"/>
Put breakpoints in Convert and ConvertBack methods and you'll be able to see all changes of binded values.
Hope this will help you.
You can try to use the Compiled Bindings:
https://learn.microsoft.com/xamarin/xamarin-forms/app-fundamentals/data-binding/compiled-bindings
You will have gain performance and precise error reporting
i create a dependency property to close a view from view model,
dependencyProperty:
public static class WindowBehaviors
{
public static readonly DependencyProperty IsOpenProperty =
DependencyProperty.RegisterAttached("IsOpen"
, typeof(bool),
typeof(WindowBehaviors),
new UIPropertyMetadata(false, IsOpenChanged));
private static void IsOpenChanged(DependencyObject obj,DependencyPropertyChangedEventArgs args)
{
Window window = Window.GetWindow(obj);
if (window != null && ((bool)args.NewValue))
window.Close();
}
public static bool GetIsOpen(Window target)
{
return (bool)target.GetValue(IsOpenProperty);
}
public static void SetIsOpen(Window target, bool value)
{
target.SetValue(IsOpenProperty, value);
}
}
and use it in my xaml like this:
<window
...
Command:WindowBehaviors.IsOpen="True">
it work's fine,but when i want to bind it to a property in viewModel,it dosen't work,and i guess,it dosen't work because i define the resource later in xaml.
in xaml:
<Window.Resources>
<VVM:myVieModel x:Key="myVieModel"/>
</Window.Resources>
and i don't know what should i do,where should i put this:
Command:WindowBehaviors.IsOpen="{binding Isopen}"
public MainWindow()
{
InitializeComponent();
// DO THIS
this.DataContext = Resources["myVieModel"];
}
You need to bind the data context for the scope where your binding is in. Usually this is fairly high up in your XAML, usually the first element in your form or control.
In your case, the data context beeing a static resource the folllowing should work:
<grid DataContext="{StaticResource myVieModel}">
<!-- the code with the binding goß into here -->
</grid>
Actually this is the same as ebattulga suggests, just the XAML way (no code behind).
Thanks for your helps,i fixed it and here is my solution,
i used to use MVVMToolkit but now i'm useing MVVMlight and as you know in MVVMLight,we just define Application Resources Once in App.xaml.so we can bind all the window's properties simply,hope this can help some people who has the same problem!!
app.xaml
<Application.Resources>
<!--Global View Model Locator-->
<vm:ViewModelLocator x:Key="Locator"
d:IsDataSource="True" />
</Application.Resources>
and in the window(view)
DataContext="{Binding DefaultSpecItemVM, Source={StaticResource Locator}}"
and it works perfect.:D