I've got a picker on the screen, that has an initial value, as well as the option to change the item in the picker.
While my selectedItem is set, I don't see that on the picker on the screen, the picker has no value set, and it's not until I select a value, that it actually displays something in the picker on the screen (At this time the SelectedItem is also updated with the new value).
My xaml:
<Picker
ItemsSource="{Binding FeedbackTypes}"
SelectedItem="{Binding SelectedFeedbackType, Mode=TwoWay}"
ItemDisplayBinding="{Binding Name}">
</Picker>
My ViewModel properties:
private ValueName _selectedFeedbackType;
public ValueName SelectedFeedbackType
{
get { return _selectedFeedbackType; }
set
{
_selectedFeedbackType = value;
OnPropertyChanged(nameof(SelectedFeedbackType));
}
}
public ObservableCollection<ValueName> FeedbackTypes
{
get
{
var feedbackTypes = new ObservableCollection<ValueName>();
foreach (FeedbackType feedback in
Enum.GetValues(typeof(FeedbackType)))
{
feedbackTypes.Add(new ValueName
{
Value = feedback,
Name = feedback.ToName()
});
}
return feedbackTypes;
}
}
And in my ViewModel constructor I've got:
SelectedFeedbackType = new ValueName { Value = feedbackType, Name = feedbackType.ToName() };
The constructor works sets the SelectedFeedbackType correctly and if I don't make any changes to the picker, that is the value I get in there on submit, however, I do not see that value in the picker by default. The picker is empty until a selection is made.
I've also tried to bind the SelectedIndex value to the SelectedFeedbackType, however that one will not show the initially selected value either in the picker.
You could try to set defalut value of the Xamarin Picker.
You just set the selectedIndex(the first number of index is 0) of your picker like the following code.
Mypicker.SelectedIndex=1;
There is a code of demo.
GIF of demo when first running.
You can download this demo by the link.
https://developer.xamarin.com/samples/xamarin-forms/UserInterface/PickerDemo/
Then changed the code of MonkeysPage.xaml.
<Picker x:Name="Mypicker" Title="Baboon" ItemsSource="{Binding Monkeys}" ItemDisplayBinding="{Binding Name}" SelectedItem="{Binding SelectedMonkey}" />
Add the defaule value of Pickerin MonkeysPage.xaml.cs.
public MonkeysPage()
{
InitializeComponent();
BindingContext = new MonkeysPageViewModel();
Mypicker.SelectedIndex=1;
}
}
Related
I'm trying to use a custom variable to name UI Elements in XAML in order to use them in my Xamarin code. How would I do that?
I know that I can use the tags
<Label x:Name="CallVariable" Text="This will appear"/>
and I can call the label from Xamarin using
Label foo = FindByName("CallVariable") as Label;
and mess with the text with the following
foo.Text == "This will appear"
which should return true.
I learned about binding, and so I tried to use this in my variables.
<Label x:Name={Binding Name}/>
Label bar = FindByName(emp.training[i] as Label);
Unfortunately, every time I run it, I'm receiving the error:
System.NullReferenceException: Object reference not set to an instance of an object.
I remembered to set the BindingContext. And in case it's important, this is all happening within a list view.
Is x:Name a bindable object? Or is there another method I should be using? Maybe a way to call an object based on its label, or something?
My current task is as follows:
I have a list of people's information. Name, Age, Gender, Email, Location, and a few other pieces of information. I'm trying to get someone to search for certain types of people, have it return a list of everyone in a ListView, and have the person be able to select as many as they want. I did this using a button that adds the person to a list (or removes them from the list if they're already on). If the user chooses to, they should be able to also click "Select All" to add everyone. I've got the individual adding down, I just need to somehow select all of them.
You can't access the label with a listView by x:Name in code behind. Instead of access the label in the listView, you can bind the property of label in code behind. For example:
<ListView x:Name="testListView">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout>
<Label Text="{Binding Name}" />
<Label Text="{Binding Desc}" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
And in code behind, it should be:
public partial class MainPage : ContentPage
{
ObservableCollection<testViewModel> myModels = new ObservableCollection<testViewModel>();
testViewModel model;
public MainPage()
{
InitializeComponent();
testListView.ItemsSource = myModels;
myModels.Add(new testViewModel { Name = "age" });
myModels.Add(new testViewModel { Name = "gender" });
myModels.Add(new testViewModel { Name = "name" });
}
}
class testViewModel
{
public string Name { get; set; }
public string Desc { get; set; }
}
Next time you want to update the text of label:
public void test() {
//Get the model you want to change
model.Desc = "This will appear";
}
I've got the individual adding down, I just need to somehow select
all of them.
I don't know how you implement the individual adding down, share the code and maybe I can give you some suggestions.
We have a UWP app using Template10. There is a textblock and textbox which show a discount. We wish to hide the textblock when ViewModel.Discount is null.
In App.xaml we have defined a converter
<T10Converters:ValueWhenConverter x:Key="HideWhenNullConverter" When="{x:Null}">
<T10Converters:ValueWhenConverter.Value>
<Visibility>Collapsed</Visibility>
</T10Converters:ValueWhenConverter.Value>
<T10Converters:ValueWhenConverter.Otherwise>
<Visibility>Visible</Visibility>
</T10Converters:ValueWhenConverter.Otherwise>
</T10Converters:ValueWhenConverter>
In the View we set the visibility of the TextBlock
Visibility="{x:Bind ViewModel.Discount, Converter={StaticResource HideWhenNullConverter}}"
In the ViewModel:
public class ViewModel : ViewModelBase
{
decimal? _Discount = default(decimal?);
public decimal? Discount
{
get
{
return _Discount;
}
set
{
if (value == 0) value = null;
Set(ref _Discount, value);
}
}
However the textblock is always visible even if the value of ViewModel.Discount is null. How do we hide the textblock when ViewModel.Discount is null
As I've tried with Template10's source it should work. I suspect that you are just missing redefinition of Mode with x:Bind, which as default is OneTime. Try like this:
Visibility="{x:Bind ViewModel.Discount, Mode=OneWay, Converter={StaticResource HideWhenNullConverter}}"
I'm extending a control to be able to reuse it across my current Xamarin project. As part of this control, I need to create a DataTemplate programmatically. I have this part figured out and it works ok.
The DataTemplate has a Label in it. I need to bind the Label's BindingContext property to {Binding Source}. I need to bind the Label's Text property to {Binding Path=Name}.
This works in XAML, but I don't want to have to copy it to a million different places in the code base.
<dxGrid:TemplateColumn FieldName="MyPropertyName"
Caption="MyColumn">
<dxGrid:TemplateColumn.DisplayTemplate>
<DataTemplate>
<Label BindingContext="{Binding Source}"
Text="{Binding Source, Path=MyPropertyName}" />
</DataTemplate>
</dxGrid:TemplateColumn.DisplayTemplate>
My extended control looks like this right now:
public class MyColumn : TemplateColumn
{
public MyColumn()
{
DataTemplate displayTemplate = new DataTemplate(() =>
{
BindingBase textBinding = new Binding(FieldName);
Label label = new Label();
// TODO: Bind BindingContextProperty to {Binding Source}
//label.SetBinding(BindingContextProperty, binding);
label.SetBinding(Label.TextProperty, textBinding);
return new ViewCell
{
View = label
};
});
DisplayTemplate = displayTemplate;
}
}
I'm getting hung up in the binding because I'm not sure how to do the equivalent of {Binding Source} in code. Any help would be appreciated.
#Eugene - Thanks for the response. Unfortunately this does not work and binding to "Source" like that throws a Null Reference Exception. I made another pass at it this morning and got it working this way:
public MyColumn()
{
DataTemplate displayTemplate = new DataTemplate(() =>
{
Grid grid = new Grid();
grid.SetBinding(Grid.BindingContextProperty, "Source");
Label label = new Label();
label.SetBinding(Label.TextProperty,FieldName);
grid.Children.Add(label);
return grid;
});
this.DisplayTemplate = displayTemplate;
}
It's simple, use name of property
label.SetBinding(BindingContextProperty, "Source");
I ran into a weird problem working with the Windows Phone 8 pivot control.
Apparently, when the Pivot is bound to a list of models and the HeaderTemplate is used for binding to one of the model's properties, changing the property during runtime causes layout problem in the headers.
Here is the sample code.
Create a simple model class.
public class MyModel: INotifyPropertyChanged
{
private string _displayName;
public event PropertyChangedEventHandler PropertyChanged;
public string DisplayName
{
get
{
return _displayName;
}
set
{
_displayName = value;
if(PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs("DisplayName"));
}
}
}
}
Then initialize the model list (could occur in the ViewModel, or page's code)
Items = new List<MyModel>
{
new MyModel { DisplayName = "model 1" },
new MyModel { DisplayName = "model 2" },
}
Connecting the list of models to the pivot control
<phone:Pivot ItemsSource="{Binding Items}" DisplayMemberPath="DisplayName">
<phone:Pivot.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding DisplayName}" />
</DataTemplate>
</phone:Pivot.HeaderTemplate>
</phone:Pivot>
So now we have 2 pivot items and the headers are displayed correctly. Now we change DisplayName property of the first item during app runtime (say following a button click) and assign a longer string value:
Items[0].DisplayName = "Some other header";
This causes the headers to overlap.
Any thoughts?
Elad
if you set displayName property to "Some other header" at first time, and then change the value to "model 2", normal display. So, in my opinion, this problem was caused by the pivot header width property(in your code,the textblock's width). When the pivot was loaded, every header had fixed width, and at this time, you changed the header display name to a longger value, the pivot will not be display correctly.
I have a ColumnSeries chart where I want to control the selected item from the view model. I do this by binding the the SelectedItem of the chart to an object on the view model.
<chartingToolkit:Chart Grid.Row="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" BorderThickness="0" MinHeight="200" Margin="0" x:Name="ratingsChart" Style="{StaticResource ChartWithoutLegendStyle}">
<chartingToolkit:Chart.Series>
<chartingToolkit:ColumnSeries x:Name="chartRatingColSeries" IsSelectionEnabled="True"
SelectedItem="{Binding SelectedRatingDistribution, Mode=TwoWay}"
ItemsSource="{Binding RatingsList}"
IndependentValueBinding="{Binding RatingName}"
DependentValueBinding="{Binding NumberOfGoodies}">
</chartingToolkit:ColumnSeries>
</chartingToolkit:Chart.Series>
</chartingToolkit:Chart>
There are various elements on the page which will force the chart's data to be reloaded (via a web service). When I need to reload the charts data (from the view model), I want to set the SelectedItem of the chart to the very first data point. This appears to work EXCEPT the chart does not visually show (in red, by default) the selected item. Here is sample code that reloads data after web service call and resets selected item:
private RatingDistribution _selectedRatingDistribution = new RatingDistribution();
public RatingDistribution SelectedRatingDistribution
{
get { return _selectedRatingDistribution; }
set
{
_selectedRatingDistribution = value;
RaisePropertyChanged("SelectedRatingDistribution");
}
}
private ObservableCollection<RatingDistribution> _lstRatings = new ObservableCollection<RatingDistribution>();
public ObservableCollection<RatingDistribution> RatingsList
{
get { return _lstRatings; }
set
{
_lstRatings = value;
RaisePropertyChanged("RatingsList");
}
}
private void GetRatingsDistributionCompleted(object sender, GetRatingsDistributionCompletedEventArgs e)
{
IsBusy = false;
RatingsList.Clear();
foreach (RatingDistribution rd in e.Result)
RatingsList.Add(rd);
SelectedRatingDistribution = RatingsList[0];
}
Setting the SelectedRatingDistribution from the View model will not visually show the selected item on the chart in red. Any ideas??
Update:
So if I click on a column, the chart correctly shows the selected item in red as so:
But If I set the SelectedItem from view model, the column will not be displayed in red (as the selected item)
Changed function below fixes problem..
private void GetRatingsDistributionCompleted(object sender, GetRatingsDistributionCompletedEventArgs e) {
RatingsList.Clear();
foreach (RatingDistribution rd in e.Result)
RatingsList.Add(rd);
App.Current.RootVisual.Dispatcher.BeginInvoke(new Action(delegate() { SelectedRatingDistribution = RatingsList[0]; }));
}