Xamarin如何在列表视图中定位标签以右对齐屏幕

daupos2t  于 2022-12-07  发布在  其他
关注(0)|答案(1)|浏览(215)

我正在学习xamarin,所有试图影响标签行为的尝试都失败了。只有我的标签仍然表现得很奇怪,如何右对齐屏幕。即使我到处放置horizontalOptions,它们也没有改变,在我看来,我只是不知道我的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>

和我的列表视图

<?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>

和我的样式

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

第一次
如何做喜欢下面的图片?谢谢@杰森的建议,添加背景色到我的标签

8yoxcaq7

8yoxcaq71#

我们可以创建两个标签来显示名称和价格。

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

相关问题