I'm trying this in collection view and i want each item with a different color so I have bound color to GradientStop in xaml like this:
<BoxView.Background>
<LinearGradientBrush EndPoint="0,1">
<GradientStop Color="{Binding gradient_start_color}" Offset="0.1" />
<GradientStop Color="{Binding gradient_stop_color}" Offset="1.0" />
</LinearGradientBrush>
</BoxView.Background>
But the color is not bound and by default i get transparent background. Is there a way to bind gradientstop color?
This is a known bug in Xamarin.Forms https://github.com/xamarin/Xamarin.Forms/issues/12339, the workaround mentioned there is to change it in the code-behind rather than using data binding in xaml.
<BoxView x:Name="boxView" ...>
Color gradient_start_color;
Public Color Gradient_start_color
{
get => gradient_start_color;
set
{
gradient_start_color = value;
PropertyChanged();
UpdateBoxViewBackground();
};
}
Color gradient_stop_color;
Public Color Gradient_stop_color
{
get => gradient_stop_color;
set
{
gradient_stop_color = value;
PropertyChanged();
UpdateBoxViewBackground();
};
}
UpdateBoxViewBackground()
{
(boxView.Background as LinearGradientBrush).GradientStops[0].Color = Gradient_start_color;
(boxView.Background as LinearGradientBrush).GradientStops[1].Color = Gradient_stop_color;
}
Constructor()
{
var background = new LinearGradientBrush
{
EndPoint = new Point(0, 1),
GradientStops = new GradientStopCollection
{
new GradientStop { Color = Gradient_start_color, Offset = 0.1f },
new GradientStop { Color = Gradient_stop_color, Offset = 1.0f }
}
};
boxView.Background = background;
}
Related
I can successfully add a MenuFlyoutItem to a MenuFlyout dynamically in the ContextMenuFlyout_Opening event, but when I try to remove it in ContextMenuFlyout_Closing the MenuFlyout.Items is always null and the MFI isnt found and removed.
Any ideas why this is so?
<Page.Resources>
<MenuFlyout
x:Key="ListViewContextMenu"
Closing="{x:Bind ViewModel.ContextMenuFlyout_Closing}"
Opening="{x:Bind ViewModel.ContextMenuFlyout_Opening}">
<MenuFlyoutItem
Click="{x:Bind ViewModel.EditParty}"
Icon="Edit"
Text="Edit" />
<MenuFlyoutItem Text="Open in new window">
<MenuFlyoutItem.Icon>
<FontIcon
FontFamily="Segoe MDL2 Assets"
FontSize="40"
Glyph="ξΆ§" />
</MenuFlyoutItem.Icon>
</MenuFlyoutItem>
<MenuFlyoutSeparator />
<MenuFlyoutItem
Click="MenuFlyoutItem_Click"
Icon="Delete"
Text="Delete" />
</MenuFlyout>
</Page.Resources>
ViewModel event handlers
public void ContextMenuFlyout_Opening(object sender, object e)
{
MenuFlyout flyout = sender as MenuFlyout;
if (flyout != null)
{
// If party.IsConflict = true then add the MFI
if (SelectedTalent.IsConflict)
{
flyout.Items.Add(new MenuFlyoutItem()
{
Icon = new FontIcon() { Glyph = "\uEC4F" },
Text = "Resolve Conflict"
});
}
}
}
public void ContextMenuFlyout_Closing(object sender, object e)
{
// Remove 'Resolve Conflict' MFI if its found
MenuFlyout flyout = sender as MenuFlyout;
if (flyout != null)
{
var rc = flyout.Items.FirstOrDefault(o => o.Name == "Resolve Conflict");
if (rc != null)
{
flyout.Items.Remove(rc);
}
}
}
ListView that uses the MenuFlyout
<ListView
ContextFlyout="{StaticResource ListViewContextMenu}"
Based on your code, it seems that you are trying to get the MenuFlyoutItem object by name. But you forget to give the MenuFlyoutItem object a Name when you add it to the MenuFlyout, you just added a Text property.
flyout.Items.Add(new MenuFlyoutItem()
{
Icon = new FontIcon() { Glyph = "\uEC4F" },
Text = "Resolve Conflict",
Name = "Resolve Conflict",
});
In my Xamarin.Forms app, I have MaterialFrame custom control.
iOS renderer works great and looks like:
public class MaterialFrameRenderer : FrameRenderer
{
private const int ShadowColor = 0x939393;
public override void Draw(
CGRect rect)
{
base.Draw(rect);
// Update shadow to match better material design standards of elevation
Layer.ShadowRadius = Layer.CornerRadius;
Layer.ShadowColor = ColorHelper.FromHex(ShadowColor).CGColor;
Layer.ShadowOffset = new CGSize(1, 1);
Layer.ShadowOpacity = 0.30f;
Layer.ShadowPath = UIBezierPath.FromRect(Layer.Bounds).CGPath;
Layer.MasksToBounds = false;
}
}
On Android platform I want to use implementation based on my other cross-platform control. My .net standard(shared project) implementation:
public class MaterialFrame : Frame
{
public MaterialFrame()
{
if (Device.RuntimePlatform == Device.Android)
{
Content = new MyOtherCustomControl
{
BackgroundColor = Color.Red
};
}
}
}
Unfortunately this implementation doesn't work on Android. Do you have any suggestion?
I create the MyOtherCustomControl.
<StackLayout>
<Label
HorizontalOptions="CenterAndExpand"
Text="MyOtherCustomControl"
VerticalOptions="CenterAndExpand" />
<Button />
</StackLayout>
And use it in MaterialFrame custom control.
public class MaterialFrame : Frame
{
public MaterialFrame()
{
if (Device.RuntimePlatform == Device.Android)
{
Content = new MyOtherCustomControl
{
BackgroundColor = Color.Red
};
}
}
}
Usage of MaterialFrame:
<ContentPage.Content>
<StackLayout>
<Label
HorizontalOptions="CenterAndExpand"
Text="Welcome to Xamarin.Forms!"
VerticalOptions="CenterAndExpand" />
<pages:MaterialFrame />
</StackLayout>
</ContentPage.Content>
Screenshot:
I'm using Xamarin Forms ListView as a SideBar. How can I prevent users from deselecting cell? Or at least keep highlighting the cell when users deselect it.
This is how I'm binding
<ListView x:Name="listView" SelectionMode="Single">
<ListView.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>Management</x:String>
<x:String>Information</x:String>
<x:String>Language</x:String>
<x:String>Settings</x:String>
</x:Array>
</ListView.ItemsSource>
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
According to your description, when you select item from ListView, this item highlighting, you want to this item still highlighting when this item is not selected state. It seems that you want to select multiple item from ListView.
I've made a sample, you can take a look:
<ContentPage.Content>
<StackLayout>
<ListView
ItemTapped="ListView_ItemTapped"
ItemsSource="{Binding Items}"
SelectionMode="Single">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout BackgroundColor="{Binding background}" Orientation="Horizontal">
<Label
HorizontalOptions="StartAndExpand"
Text="{Binding DisplayName}"
TextColor="Fuchsia" />
<BoxView
HorizontalOptions="End"
IsVisible="{Binding Selected}"
Color="Fuchsia" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage.Content>
public partial class Page10 : ContentPage
{
public Page10 ()
{
InitializeComponent ();
this.BindingContext = new MultiSelectItemsViewModel();
}
private void ListView_ItemTapped(object sender, ItemTappedEventArgs e)
{
Model m = e.Item as Model;
if(m!=null)
{
m.Selected = !m.Selected;
if(m.background==Color.White)
{
m.background = Color.BlueViolet;
}
else
{
m.background = Color.White;
}
}
}
}
public class Model:ViewModelBase
{
public string DisplayName { get; set; }
private bool _Selected;
public bool Selected
{
get { return _Selected; }
set
{
_Selected = value;
RaisePropertyChanged("Selected");
}
}
private Color _background;
public Color background
{
get { return _background; }
set
{
_background = value;
RaisePropertyChanged("background");
}
}
}
public class MultiSelectItemsViewModel
{
public ObservableCollection<Model> Items { get; set; }
public MultiSelectItemsViewModel()
{
Items = new ObservableCollection<Model>();
Items.Add(new Model() { DisplayName = "AAA", Selected = false,background=Color.White });
Items.Add(new Model() { DisplayName = "BBB", Selected = false , background = Color.White });
Items.Add(new Model() { DisplayName = "CCC", Selected = false, background = Color.White });
Items.Add(new Model() { DisplayName = "DDD", Selected = false, background = Color.White });
Items.Add(new Model() { DisplayName = "EEE", Selected = false, background = Color.White });
}
}
Update:
Don't allow user to unselect the selected item.
private void ListView_ItemTapped(object sender, ItemTappedEventArgs e)
{
Model m = e.Item as Model;
if(m!=null)
{
m.Selected = true;
m.background = Color.Blue;
}
}
Depending on your needs, I've done something similar but with controls inside each row, like a checkbox.
https://xamarinhelp.com/multiselect-listview-xamarin-forms/
Use the SelectedItem property of the ListView. As long as SelectedItem property is not set back to null, the currently selected item will remain highlighted.
I've got this code I'm trying to bind to a class named BandInfoRepository.cs which is located in the same folder as this XAML named PaginaB.I can't see no syntax error displayed on VisualStudio, still the text is not showing(I added backgroundColor just to see if the label was being displayed and they are, but the text isn't).
Maybe it's important to point out I'm using syncfusion's listview.
PaginaB.xaml :
<syncfusion:SfListView x:Name="listView"
ItemsSource="{Binding Source={local2:BandInfoRepository}, Path=BandInfo}"
ItemSize="100"
AbsoluteLayout.LayoutBounds="1,1,1,1"
AbsoluteLayout.LayoutFlags="All" >
<syncfusion:SfListView.ItemTemplate>
<DataTemplate>
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="0.4*" />
<RowDefinition Height="0.6*" />
</Grid.RowDefinitions>
<Label Text="{Binding Source={local2:BandInfoRepository}, Path=BandName}"
BackgroundColor="Olive"
FontAttributes="Bold"
TextColor="Black"
FontSize="20" />
<Label Grid.Row="1"
BackgroundColor="Navy"
Text="{Binding Source={local2:BandInfoRepository}, Path= BandDescription}"
TextColor="Black"
FontSize="14"/>
</Grid>
</DataTemplate>
</syncfusion:SfListView.ItemTemplate>
</syncfusion:SfListView>
And this is the BandInfoRepository.cs file:
public class BandInfoRepository
{
private ObservableCollection<BandInfo> bandInfo;
public ObservableCollection<BandInfo> BandInfo
{
get { return bandInfo; }
set { this.bandInfo = value; }
}
public BandInfoRepository()
{
GenerateBookInfo();
}
internal void GenerateBookInfo()
{
bandInfo = new ObservableCollection<BandInfo>();
bandInfo.Add(new BandInfo() { BandName = "Nirvana", BandDescription = "description" });
bandInfo.Add(new BandInfo() { BandName = "Metallica", BandDescription = "description" });
bandInfo.Add(new BandInfo() { BandName = "Frank Sinatra", BandDescription = "description" });
bandInfo.Add(new BandInfo() { BandName = "B.B. King", BandDescription = "description" });
bandInfo.Add(new BandInfo() { BandName = "Iron Maiden", BandDescription = "description" });
bandInfo.Add(new BandInfo() { BandName = "Megadeth", BandDescription = "description" });
bandInfo.Add(new BandInfo() { BandName = "Darude", BandDescription = "description" });
bandInfo.Add(new BandInfo() { BandName = "Coldplay", BandDescription = "description" });
bandInfo.Add(new BandInfo() { BandName = "Dream Evil", BandDescription = "description" });
bandInfo.Add(new BandInfo() { BandName = "Pentakill", BandDescription = "description" });
}
}
In your DataTemplate you don't set Source in binding normally, unless you want to do some magic. XAML sets DataContext to each item of ItemsSource.
Try:
<Label Text="{Binding BandName}" BackgroundColor="Olive" FontAttributes="Bold" />
and remember to implement INotifyPropertyChanged for BandInfo if you want XAML to track changes in its properties
Thank you for using Syncfusion Products.
We looked into you code and found that you have defined the ItemTemplate wrongly. You can bind the data objects in the underlying collection directly into the view defined in the ItemTemplate property. SfListView itself creates a view for each items in the ItemsSource property and defines the binding context to it.
For your reference, we have attached the sample and you can download it from the below link.
Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/ListViewSample607957192
For more information about working with SfListView, please refer the following UG documentation link.
https://help.syncfusion.com/xamarin/sflistview/getting-started
Please let us know if you require further assistance.
Regards,
Dinesh Babu Yadav
first of all sorry for my english.
I am working on a iOS and Android project using Xamarin.Form
I would like to have a 'xaml user control' reusable in different way, and I need to make it clickable with ICommand
This is the StackLayoutButton component:
<?xml version="1.0" encoding="utf-8" ?>
<StackLayout xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Installa.Controls.StackLayoutButton">
<Image x:Name="Icon" Source="{Binding Icon}" />
<Label x:Name="Text" Text="{Binding Title}" HorizontalOptions="Center" LineBreakMode="NoWrap" Font="Small" TextColor="Red" />
</StackLayout>
This is the CalendarioPage xaml page where the component is used
<?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:controls="clr-namespace:Installa.Controls;assembly=Installa"
x:Class="Installa.CalendarioPage">
<StackLayout>
<Label Text="{Binding ViewName}" Font="42" IsVisible="{Binding IsWindowsPhone}" />
<ActivityIndicator IsRunning="{Binding IsLoading}" IsVisible="{Binding IsLoading}" Color="Red" />
<controls:StackLayoutButton BindingContext="{Binding Blog}" TextColor="Blue" /> <!-- Command="{Binding SubmitCommand}" -->
<controls:StackLayoutButton BindingContext="{Binding Facebook}" TextColor="Red" /> <!-- Command="{Binding SubmitCommand}" -->
</StackLayout>
</ContentPage>
This is the CalendarioPage c# page:
public partial class CalendarioPage : ContentPage
{
private CalendarioViewModel vm;
public CalendarioPage()
{
InitializeComponent();
vm = new CalendarioViewModel();
this.BindingContext = vm;
}
}
This is the viewmodel class:
namespace Installa
{
public class CalendarioViewModel: BaseViewModel
{
public CalendarioViewModel()
{
blog = new Activity();
blog.Link = "www.google.it";
blog.Title = "Titolo del blog";
blog.Icon = "logomenu.png";
facebook = new Activity();
facebook.Title = "Tito Fbook";
facebook.Link = "www.facebook.it";
facebook.Icon = "icon.png";
ViewName = "nome della view";
IsLoading = false;
}
Activity blog = null;
public Activity Blog
{
get {return blog;}
}
Activity facebook = null;
public Activity Facebook
{
get { return facebook; }
}
string viewName = string.Empty;
public string ViewName
{
get { return viewName; }
set { SetProperty(ref viewName, value); }
}
public bool IsWindowsPhone
{
get
{
return Device.OS == TargetPlatform.WinPhone;
}
}
bool isLoading = false;
public bool IsLoading
{
get { return isLoading; }
set { SetProperty(ref isLoading, value); }
}
}
}
With Activity a simple class with:
public string Title { get; set; }
public string Link { get; set; }
public String Icon { get; set; }
Till now, all is working right, but now I need to implement the ICommand interface.
In StackLayoutButton c# code I try to add:
var tapGestureRecognizer = new TapGestureRecognizer();
tapGestureRecognizer.SetBinding(TapGestureRecognizer.CommandProperty, "TapCommand");
Icon.GestureRecognizers.Add(tapGestureRecognizer)
Text.GestureRecognizers.Add(tapGestureRecognizer)
Furthermore I try to add into CalendarioViewModel INotifyPropertyChanged and the 'OnTapped' method.
Into Activity.cs i add 'ICommand tapCommand' and the related get...but is not working.
I try even other..but I am not able to enable the tap on the StackLayoutButton components.
In wich way I should do ?
I'd like to be able to have a 'programmable' command...for example I would like browse to 'the link property' of Activity or be able to open a new view.
Thanks for help!
Update:
I was able to add TapGestureRecognizer into the xaml user control (StackLayoutButton.xaml.cs),
but I'd like to implement it in MVVM way,
using Xamarin.Forms;
namespace Installa.Controls
{
public partial class StackLayoutButton : StackLayout
{
public StackLayoutButton()
{
InitializeComponent();
TapGestureRecognizer tapGestureRecognizer = new TapGestureRecognizer
{
Command = new Command(OnMyComponentTapped),
CommandParameter = "ciao"
};
this.Icon.GestureRecognizers.Add(tapGestureRecognizer);
this.Text.GestureRecognizers.Add(tapGestureRecognizer);
}
async void OnMyComponentTapped(object parameter)
{
// do action
}
public Color TextColor
{
get { return this.Text.TextColor; }
set { this.Text.TextColor = value; }
}
public Label TextControl
{
get { return this.Text; }
set { this.Text = value; }
}
}
}
can anyone suggest me the way ?
Thanks
This is how I add gesture recognizer on my xaml view:
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{Binding SelectEquipmentCommand}"/>
</Label.GestureRecognizers>
And this is the ICommand property in my ViewModel:
public ICommand SelectEquipmentCommand
{
get
{
return fSelectEquipmentCommand ?? (fSelectEquipmentCommand = new Command(async () => await SelectEquipmentTask()));
}
}
private async Task SelectEquipmentTask()
{
}