I'm learning xamarin and all my attempts to influence the behavior of my label have failed. only my label still behaves strangely how to right align screen. They do not change even if I put horizontalOptions everywhere, it seems to me that I just don’t know something my ProductCard

<Grid xmlns="http://xamarin.com/schemas/2014/forms"
  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  xmlns:models="clr-namespace:Notes.Models;assembly=Notes"
  x:DataType="models:Goods"
  x:Class="Notes.Cells.ProductCard">
<Frame Style="{StaticResource ProductCard}" BackgroundColor="Coral">
    <StackLayout Orientation="Horizontal">
        <StackLayout VerticalOptions="Center">
            <Label
                BackgroundColor="Aqua"
                HorizontalTextAlignment="End"
                VerticalOptions="End"
                HorizontalOptions="End">
                <Label.FormattedText>
                    <FormattedString>
                        <Span Text="{Binding Name}" Style="{StaticResource LabelMedium}" BackgroundColor="Blue"></Span>
                        <Span Text=" " BackgroundColor ="Brown"/>
                        <Span Text="Price: " BackgroundColor="Green"/>
                        <Span Text="{Binding Price}" FontAttributes="Bold" BackgroundColor="Yellow"/>
                    </FormattedString>
                </Label.FormattedText>
            </Label>
        </StackLayout>
    </StackLayout>
</Frame>

and my ListView

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:viewmodels="clr-namespace:Notes.ViewModel"
         xmlns:cells="clr-namespace:Notes.Cells"
         xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
         x:DataType="viewmodels:GoodsViewModel"
         x:Class="Notes.Views.ProductsCatalog"
         >
<ContentPage.BindingContext>
    <viewmodels:GoodsViewModel />
</ContentPage.BindingContext>
<ContentPage.Resources>
    <ResourceDictionary>
        <DataTemplate x:Key="Normal">
            <ViewCell>
                <cells:ProductCard/>
            </ViewCell>
        </DataTemplate>
        <DataTemplate x:Key="Special">
            <ViewCell>
                <cells:SpecialItem/>
            </ViewCell>
        </DataTemplate>
        <cells:ItemDataTemplateSelector x:Key="GoodsSelector"
                Normal="{StaticResource Normal}"
                Special="{StaticResource Special}"/>
    </ResourceDictionary>
</ContentPage.Resources>
<ListView
    SeparatorVisibility="Default"
    CachingStrategy="RecycleElement"
    Style="{StaticResource NoteNewsListView}"
    GroupDisplayBinding="{Binding Key}"
    IsGroupingEnabled="True"
    IsRefreshing="{Binding IsBusy, Mode=OneWay}"
    SelectedItem="{Binding CurrentGoods, Mode=TwoWay}"
    ItemsSource="{Binding GoodsGroup}"
    RefreshCommand="{Binding RefreshCommand}"
    ItemTemplate="{StaticResource GoodsSelector}">
    <ListView.Behaviors>
        <xct:EventToCommandBehavior
            Command="{Binding SelectedCommand}"
            EventName="ItemSelected" />
    </ListView.Behaviors>
    <ListView.GroupHeaderTemplate>
        <DataTemplate x:DataType="{x:Null}">
            <ViewCell>
                <StackLayout Padding="0,0,0,0" Margin="10,0,0,0">
                    <Label Style="{StaticResource LabelLarge}" Text="{Binding Key}" />
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.GroupHeaderTemplate>
    <ListView.Header>
        <StackLayout Orientation="Horizontal">
            <Label
                Margin="80"
                FontFamily="AC"
                HorizontalOptions="Center"
                Style="{StaticResource LabelLarge}"
                Text="Catalog Products">
            </Label>
        </StackLayout>
    </ListView.Header>
    <ListView.Footer>
        <StackLayout HorizontalOptions="Center" Orientation="Horizontal">
            <Button
                Command="{Binding LoadMoreCommand}"
                Style="{StaticResource ButtonOutline}"
                Text="Load more" />
        </StackLayout>
    </ListView.Footer>
</ListView>

and my styles

<Style x:Key="ServiceCard" TargetType="Frame">
            <Setter Property="HasShadow" 
                    Value="{OnPlatform Android=true, iOS=false, Default=true}"/>
            <Setter Property="CornerRadius" Value="20"/>
            <Setter Property="BackgroundColor"
                    Value="{AppThemeBinding Dark={StaticResource CardBackgroundDark},
                Light={StaticResource CardBackground}}"/>
        </Style>

<Style x:Key="NoteNewsListView" TargetType="ListView">
            <Setter Property="HasUnevenRows" Value="True"/>
            <Setter Property="BackgroundColor" Value="Transparent"/>
            <Setter Property="SeparatorVisibility"
                    Value="None"/>
            <Setter Property="RefreshControlColor"
                    Value="{StaticResource SystemBlue}"/>
            <Setter Property="IsPullToRefreshEnabled"
                    Value="True"/>
        </Style>

how to do like below picture? thanks @Jason for advice to add backgroundcolor to my labels

CodePudding user response：

We can create two Labels to display Name and Price.

<Grid xmlns="http://xamarin.com/schemas/2014/forms"
          xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
          xmlns:models="clr-namespace:Notes.Models;assembly=Notes"
          x:DataType="models:Goods"
          x:Class="Notes.Cells.ProductCard">
          <Frame Style="{StaticResource ProductCard}" BackgroundColor="Coral">
            <StackLayout Orientation="Horizontal">
                <Label
                        BackgroundColor="Aqua"
                        HorizontalTextAlignment="Start"
                        HorizontalOptions="FillAndExpand">
                        <Label.FormattedText>
                            <FormattedString>
                                <Span Text="{Binding Name}" Style="{StaticResource LabelMedium}" BackgroundColor="Blue"></Span>
                            </FormattedString>
                        </Label.FormattedText>
                    </Label>
    <Label HorizontalOptions="End">
                        <Label.FormattedText>
                            <FormattedString>
                                
                                <Span Text="Price: " BackgroundColor="Green"/>
                                <Span Text="{Binding Price}" FontAttributes="Bold" BackgroundColor="Yellow"/>
                            </FormattedString>
                        </Label.FormattedText>
                    </Label>
    
            </StackLayout>
         </Frame>