Xamarin.Forms: как воспроизвести этот интерфейс, который сочетает в себе встроенные макеты

Question

Я пытаюсь воспроизвести этот интерфейс на странице:

Страница содержит:

• "основной" элемент, который отображается вверху
• "другие" элементы, которые отображаются внизу в 2 столбцах

Я уже могу отобразить изображение основного элемента и других элементов с XAML, которое выглядит следующим образом:

<ScrollView>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="450" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <!-- Main item  -->
        <StackLayout MinimumHeightRequest="450" HeightRequest="450">
            <ffil:CachedImage Source="{Binding MainProduct.Icon}"      
                              MinimumHeightRequest="450" HeightRequest="450" 
                              Aspect="AspectFill"/>
        </StackLayout>

        <!-- Other items -->
        <!-- through the use of 2 Repeaters -->
    </Grid>
</ScrollView>

Но когда я пытаюсь добавить контент, отображаемый на изображении основного элемента, я сталкиваюсь с проблемой: страница больше не отображается, потому что приложение сталкивается с ошибкой, когда создается страница.

Я добавил вторичную сетку, которая находится в первой строке существующей сетки, потому что я надеялся, что это поможет мне показать соответствующее содержимое основного элемента на изображении:

<ScrollView>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="450" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <!-- Main item  -->
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="**" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>                   
            <StackLayout MinimumHeightRequest="450" HeightRequest="450"
                        Grid.ColumnSpan="2" Grid.RowSpan="2">
                <ffil:CachedImage Source="{Binding MainProduct.Icon}" 
                                  MinimumHeightRequest="450" HeightRequest="450" 
                                  Aspect="AspectFill"/>
            </StackLayout>
            <Frame BackgroundColor="Black"
                   Opacity="0.75"
                   Margin="10"
                   VerticalOptions="End" HorizontalOptions="End"
                   Grid.Column="1" Grid.Row="1">
                <StackLayout>
                    <Label Text="{Binding MainProduct.Title}" 
                           HorizontalOptions="StartAndExpand" VerticalTextAlignment="Center"/>
                    ...
                </StackLayout>
            </Frame>
        </Grid>

        <!-- Other items -->
        <!-- through the use of 2 Repeaters -->
    </Grid>
</ScrollView>

Что не так в моем XAML? Есть ли лучший способ добиться этого через RelativeLayout или AbsoluteLayout?

редактировать

ошибка следующая:

{System.Reflection.TargetInvocationException: исключение было сгенерировано целью вызова. ---> System.FormatException: один из идентифицированных элементов был в недопустимом формате. в Xamarin.Forms.GridLengthTypeConverter.ConvertFromInvariantString (значение System.String) [0x000a0] в C:\BuildAgent3\work\ca3766cfc22354a1\Xamarin.Forms.Core\GridLengthTypeConverter.cs.Tignpe.TinkTect2.Tink.Tect2. ] в C:\Projets\MyProject\MyProjectNewUi\DevMyProjectNewUi\tablet\MyProjectTablet\MyProjectTablet\obj\Debug\MyProjectTablet.Views.ListProductPage.xaml.g.cs:21 в MyProjectTablet.Views.ListProductPage000) () в C:\Projets\MyProject\MyProjectNewUi\DevMyProjectNewUi\tablet\MyProjectTablet\MyProjectTablet\Views\ListProductPage.xaml.cs:24 в (управляемая оболочка является родной) System.Reflection.MonoCMethod:InternalInvoke (System.oeflection. object,object[],System.Exception&) в System.Reflection.MonoCMethod.InternalInvoke (параметры System.Object obj, System.Object[]) [0x00002] в <657aa8fea4454dc898a9e5f379c58734>:0 --- Отслеживание конца стека внутренних исключений - - в System.Reflection.MonoCMethod.InternalInvoke (System.Object obj, параметры System.Object []) [0x00017] в <657aa8fea4454dc898a9e5f379c58734>: 0 в System.RuntimeType.CreateInstanceMono (System.Boolean nonPublic) [0x000a8 publicOnly, System.Boolean, skipCheckThis, System.Boolean, fillCache, System.Threading.StackCrawlMark& ​​stackMark) [0x00009] в <657aa8fea4454dc898a9e5f379c58734>: 0 в System.RuntimeTooleCooleCef.BeCleBile System.Threading.StackCrawlMark & ​​stackMark) [0x00027] в <657aa8fea4454dc898a9e5f379c58734>: 0 в System.Activator.CreateInstance (тип System.Type, System.Boolean, непубличный) System..Type type) [0x00000] в <657aa8fea4454dc898a9e5f379c58734>: 0 в MobileCommon.Services.NavigationService.CreatePage (MobileCommon.Services.PageType pageType, параметр System.Object e)) [0x00053] в C:\Projets\MyProject\MyProjectNewUi\DevMyProjectNewUi\mobile\MobileCommon\Services\NavigationService.cs:118 }

Я не понимаю, почему я получаю исключение, связанное с GridLengthTypeConverter...

Answer 1

Проблема на самом деле совсем другая - вы случайно использовали ** вместо * как в одном из ColumnDefinitions:

<ColumnDefinition Width="**" />

Чтобы проиллюстрировать, как я это заметил, рассмотрим трассировку стека исключений. Вы можете видеть, что вторая строка говорит Xamarin.Forms.GridLengthTypeConverter.ConvertFromInvariantString (System.String value), Это указывает на источник ошибки довольно хорошо.

Чтобы получить n:1 соотношение размеров столбцов, нужно написать n* где n это число, а не **,, лайк:

<ColumnDefinition Width="2*" />