Update 2: I have determined that this is caused by the Xamarin Forms Extended Card View (XfxCardView) package I am using. Changing out the Card View for a Frame stops the issue (pic 1).
<Frame
Grid.Column="0"
Grid.Row="0"
Padding="0"
CornerRadius="10"
HasShadow="true">
<Label
Margin="12"
VerticalTextAlignment="Center"
Text="{Binding Total}"
FontSize="32"
HorizontalTextAlignment="Center"
HorizontalOptions="Center"
VerticalOptions="Center"
TextColor="Gray" />
</Frame>
UPDATE 1: I have discovered that adding a background color eliminates one of the duplicates (pic 2), but it is the one in the wrong position. As soon as the property is updated to a new value, the wrong label disappears and the correct one shows. And changing the "HorizontalOptions" and "VerticalOptions" on the label simply moves the incorrect label around (pic 3).
I have a XAML ContentPage that has multiple child ContentViews inside it. All have their own view models. I have the view models built so that when the hosts ContentPage's OnAppearing() method is called, it calls Start() on all the view models to set the default values to properties. One of these properties is a label that gets the default value of "$0.00". The problem is that this single label draws twice, in 2 different positions (see below screenshot). How do I make that ContentView redraw so that only the correct label is shown?
I have done testing and know that there is only one label (no duplicate somewhere that I missed) and I know that it is the setting of the bindable property causing the issue. Hard coding the value into the xaml prevents this (then of course I cannot bind a property to it).
Part of the Parent ContentPage:
<Grid
Grid.Row="2"
Grid.Column="0"
RowSpacing="0"
ColumnSpacing="0"
HorizontalOptions="Fill"
VerticalOptions="Fill"
x:Name="SubviewLayout">
<Grid.ColumnDefinitions>
<ColumnDefinition
Width="100*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition
Height="100*" />
</Grid.RowDefinitions>
<views:SaleItemListView
x:Name="SalesItemListView" />
<views:KeypadView
x:Name="KeypadView" />
</Grid>
Applicable portion of the "Keypad View"
<Grid
ColumnSpacing="0"
HorizontalOptions="Center"
VerticalOptions="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition
Width="100*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition
Height="*" />
<RowDefinition
Height="Auto" />
</Grid.RowDefinitions>
<xfx:XfxCardView
Grid.Column="0"
Grid.Row="0"
CornerRadius="10"
Elevation="15">
<Label
Margin="12"
VerticalTextAlignment="Center"
Text="{Binding Total}"
FontSize="32"
HorizontalTextAlignment="Center"
BackgroundColor="Transparent"
TextColor="Gray" />
</xfx:XfxCardView>
Applicable portion of the Parent's ViewModel
public SalesViewModel()
{
KeypadViewModel = new KeypadViewModel();
}
public override async Task Start()
{
await ListViewModel.Start();
await KeypadViewModel.Start();
}
Applicable portion of the KeypadViewModel
public string Total { get; set; }
public override async Task Start()
{
Total = "$0.00";
}