CODEWITHSUNDEEP
uwpuwp-xaml
Vincent
Vincent

Reputation: 3304

Change detail items using UWP master-detail

I'm learning and creating a master-detail project using "Windows Template Studio".

Now I want to change the details, and want the changes shown in the master. Like below enter image description here

But I don't known how? I have upload the sample code to GitHub. https://github.com/hupo376787/App2

Can anyone change the sample code, thanks a lot!

Upvotes: 2

Views: 668

Answers (2)

Justin XL
Justin XL

Reputation: 39006

In order to automatically update the company field on the list when the Company property gets changed, you need to make the following changes -

  1. You need to add Mode=OneWay to your binding in MasterDetailPage since the default mode in x:Bind is OneTime, which means once the value is set, it will never be updated.

    <TextBlock Grid.Row="1"
           Text="{x:Bind Company, Mode=OneWay}"
           Style="{StaticResource ListSubTitleStyle}" />

  2. Your Order class needs to implement INotifyPropertyChanged otherwise the change will never make to the UI.

    public class Order: INotifyPropertyChanged
{
    private string _company;

    public string Company
    {
        get => _company;
        set
        {
            if (_company == value) return;

            _company = value;
            OnPropertyChanged();
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    [NotifyPropertyChangedInvocator]
    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

  3. In your TextBox, you will need UpdateSourceTrigger=PropertyChanged in the binding 'cause you want to trigger the update by every key down. Unfortunately this is not supported in x:Bind so you will have to change back to use the traditional Binding. Note once you have changed it, you will also need to give your UserControl a name, say Self, so you can use ElementName to locate the same binding expression (i.e. MasterMenuItem.Company).

    <UserControl x:Class="App2.Views.MasterDetailDetailControl"
             ...
             x:Name="Self">

<TextBox Text="{Binding MasterMenuItem.Company, ElementName=Self, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"

    />

Now run your app and it should work just fine. :)

Upvotes: 2

Lindsay
Lindsay

Reputation: 595

The Order item that is bound to the Master view needs to notify the view of the property change, so should implement INotifyPropertyChanged

Documentation

Upvotes: 0

Related Questions