C# how to bind a property to display it in an XAML-Element-CodePudding

I want to output a value in a view element that comes from a view model (here car brand). The SubView consists only one label and should display this. Should I change the label to a texbox and which binding, the value will be displayed to me in the ViewModel!

XAML:

<Grid>
    <Label FontSize="32" Content="{Binding CarModel}" Background="GreenYellow" Height="55" Width="288">
        <Label.Resources>
            <Style TargetType="Border">
                <Setter Property="CornerRadius" Value="10"></Setter>
            </Style>
        </Label.Resources>
    </Label>
</Grid>

ViewModle

 class CarVM : CarBase
    {
        private tblCars _carModel;
        public ObservableCollection<tblCars> AllCars { get; }
...
        public tblCars CarModel
        {
            get { return _carModel; }
            set
            {
                value;
            }
        }
... 
}

CodePudding user response：

You are getting CLOSE. What I think you are trying to go for is a little short in the question and you might need to EDIT your post and provide more detail. As it stands, your tblCars is the type of object (implying a table of cars), but the property CarModel is the actual thing is being exposed, and that might have other components like the model, year, color, manufacturer.

Your view label is setting its binding to the thing, not an individual string/int/whatever VALUE, so the label cant really show you anything.

You probably need to set the GRID to the binding of whatever the current TblCars is first, THEN have the label refer to the individual element/property OF the car you want to display. Let me expand just a bit for you

public class SingleCar
{
   public string Mfg {get; set;}
   public string Color {get; set;}
   public string Model {get; set;}
}

public SingleCar OneCarForTheView {get; set;}

Then, in your bindings, you are binding to the OneCarForTheView, and your label would be the Model, Color or Mfg of the car. The bindings in your view can either be dotted notation to the granularity of the part, or one parent to the object itself, THEN just bind to the property itself. Such as

<Grid DataContext={Binding OneCarForTheView}>
   <Label Content="{Binding Model}" />
   <Label Content="{Binding Color}" />
   <Label Content="{Binding Mfg}" />
</Grid>

<Grid>
   <Label Content="{Binding OneCarForTheView.Model}" />
   <Label Content="{Binding OneCarForTheView.Color}" />
   <Label Content="{Binding OneCarForTheView.Mfg}" />
</Grid>

However, your view itself does need to have its "DataContext", set to your view model so those properties are the components available for getting the bindings.

CodePudding user response：

Did you remember to set the binding context? Also i can't tell which project type you are using. If it's a Xamarin Forms project, the label content property is named 'Text', else if it's WPF it's 'Content'

Also make sure your Carmodel is not null - set a breakpoint and inspect it at runtime when the binding occours. If you load the model after the view has been initialized, you will need to call OnPropertyChanged("CarModel") after you have set the value. There is multiple ways to set the BindingContext - here is one:

 public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        BindingContext = new CarVM();
    }



}

class CarVM : BindableObject
{
    private tblCars _carModel;
    public tblCars CarModel
    {
        get { return _carModel; }
        set
        {
            if (_carModel != value)
            {
                _carModel = value;
                OnPropertyChanged();
            } 
        } 
    }

    public CarVM()
    {

    }
}

If you have set your BindingContext you can find the property you want to display by 'dotting' your way through the object

  <Grid>
        <Label FontSize="32" Content="{Binding CarModel.SomePropertyYouWantToBindTo}" Background="GreenYellow" Height="55" Width="288">
            <Label.Resources>
                <Style TargetType="Border">
                    <Setter Property="CornerRadius" Value="10"></Setter>
                </Style>
            </Label.Resources>
        </Label>
    </Grid>