How to force a Xamarin Forms label or view to redraw to prevent duplicate label

381 Views Asked by At

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> 

enter image description here

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).

enter image description here enter image description here

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";
    }

enter image description here

0

There are 0 best solutions below