Refresh view on property change in Caliburn Micro WPF

Question

Got a view, which has a BindingList property. This is responsible to store workitems, add and remove. The backend is working fine, but the UI is not updated.

The view:

<ListBox Grid.Row="7" Grid.Column="0" Grid.ColumnSpan="2" x:Name="WorkPieces" HorizontalAlignment="Stretch">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid HorizontalAlignment="Stretch">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="auto" />
                    <ColumnDefinition Width="auto" />
                    <ColumnDefinition Width="auto" />
                    <ColumnDefinition Width="auto" />
                    <ColumnDefinition Width="auto" />
                    <ColumnDefinition Width="auto" />
                    <ColumnDefinition Width="auto" />
                    <ColumnDefinition Width="auto" />
                    <ColumnDefinition Width="auto" />
                </Grid.ColumnDefinitions>

                <TextBlock Grid.Column="1" x:Name="DisplayName" Text="{Binding DisplayName}" MinWidth="40
                           " FontWeight="Bold"/>
                <TextBlock Grid.Column="2" Text="{x:Static lang:Resources.Txt_W}" />
                <TextBox Grid.Column="3" x:Name="Width" MinWidth="50" Text="{Binding Width}" TextAlignment="Right"/>
                <TextBlock Grid.Column="4" Text=" x " />
                <TextBlock Grid.Column="5" Text="{x:Static lang:Resources.Txt_L}" />
                <TextBox Grid.Column="6" x:Name="Length" MinWidth="50"  Text="{Binding Length}" TextAlignment="Right"/>

                <Button Grid.Row="0" Grid.Column="7" Margin="5" BorderThickness="0" Background="Transparent"
                        Visibility="{Binding IsLast, Converter={StaticResource Converter}}">
                    <Image Source ="/Images/plus-sign.png" Height="16" Width="16" />
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="Click">
                            <cal:ActionMessage MethodName="AddNewWorkPiece" />
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                </Button>

                <Button Grid.Row="0" Grid.Column="8" Margin="5" BorderThickness="0" Background="Transparent">
                    <Image Source ="/Images/minus-sign.png" Height="16" Width="16" />
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="Click">
                            <cal:ActionMessage MethodName="RemoveWorkPiece">
                                <cal:Parameter Value="{Binding Id}" />
                            </cal:ActionMessage>
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                </Button>
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

The property:

public BindingList<WorkPieceModel> WorkPieces
{
    get { return _workPieces; }
    set
    {
        _workPieces = value; NotifyOfPropertyChange(() => WorkPieces);
        NotifyOfPropertyChange(() => CanCalculate);
    }
}

The backend function to update display name and set icon display flags:

private void UpdateWorkPiecesDisplayName()
{
    var counter = 1;
    foreach (var item in WorkPieces)
    {
        item.DisplayName = Roman.To(counter);
        item.IsLast = false;
        counter++;
    }

    WorkPieces.Last().IsLast = true;
    NotifyOfPropertyChange(() => WorkPieces);
}

So when I click on the Add/Remove it is updating properly the number of elements, but the rest does not refreshing the buttons or the DisplayNumber. Tried to call NotifyOfPropertyChange() after adding and removing workpiece, without any desired result.

The goal is to display a + - icon only on the last element, - icon for the rest, and the displayed numbers always be ascending, disregarding which element has been removed.

As you can see: IV. is missing and III. has + icon (it shouldn't have)

Are you getting another item in the `ListBox`? Do you raise the `IsLast` property of the second last item? — mm8, Sep 16 '19 at 13:28
@mm8 yes I do get a new item, I can remove any item. The backend is setting the correct flags for every item — Paxsentry, Sep 16 '19 at 13:47
As I wrote: The backend is working fine, but the UI is not updated. — Paxsentry, Sep 16 '19 at 14:10
I don't understand what "I do get a new item, I can remove any item" means then. Are you getting a new item in the `ListBox` or not? The backend seems unrelated to your question. — mm8, Sep 16 '19 at 14:11
If I click on the + icon it is adding a new item. The new item (since it is the last) should have the + and - icon, and the rest should have only - icon. If I click on the - icon the element is removed from the list but the the icons are not updated. Hope this clarifies — Paxsentry, Sep 16 '19 at 14:15
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/199527/discussion-between-paxsentry-and-mm8). — Paxsentry, Sep 16 '19 at 14:30
Possible duplicate of [How to update UI change when property changed in MVVM](https://stackoverflow.com/questions/47491054/how-to-update-ui-change-when-property-changed-in-mvvm) — Dean Kuga, Sep 16 '19 at 19:00

score 1 · Accepted Answer · answered Sep 16 '19 at 14:56

1

Since you are binding to IsLast, you should implement the INotifyPropertyChanged interface in the WorkPieceModel class and raise the PropertyChanged event in the setter of IsLast.

answered Sep 16 '19 at 14:56

mm8

163,881
10
57
88

Thank you very much, this was the problem. – Paxsentry Sep 16 '19 at 15:03

Refresh view on property change in Caliburn Micro WPF

1 Answers1