Get value of property other object

Question

I have carousel view, I want get property color of next object in carousel using XAML. My XAML:

<CarouselView
    HeightRequest="300"
    PeekAreaInsets="100"
    IndicatorView="indicatorView"
    ItemsSource="{Binding TrafficColors}">
    <CarouselView.ItemTemplate>
        <DataTemplate>
            <StackLayout>
                <Frame HasShadow="False"
                       CornerRadius="5"
                       Padding="0"
                       Margin="10, 0"
                       WidthRequest="200"
                       HeightRequest="300"
                       >
                    <Frame.Background>
                        <LinearGradientBrush EndPoint="1,1">
                            <GradientStop Color="{Binding HEX, StringFormat='#{0}'}" Offset="0.4" />
                            <GradientStop Color="#CFDEF3" Offset="0.77" />
                        </LinearGradientBrush>
                    </Frame.Background>
                    <!--
                    <Frame.GestureRecognizers>
                        <TapGestureRecognizer 
                            Command="{Binding Source={RelativeSource AncestorType={x:Type view:EDocsMainPageViewModel}}, Path=GoToEDoc}"
                            CommandParameter="{Binding Id}" 
                        />
                    </Frame.GestureRecognizers>
                    -->
                    <StackLayout>
                        <Label Text="{Binding Name}"
                               TextColor="Black"
                               FontSize="22"
                               Padding="10"
                               HorizontalOptions="Center"
                               VerticalOptions="Center" />
                        <Label Padding="10" Text="{Binding ShiftCode, StringFormat='Номер МЛ:{0}'}" TextColor="Black" FontSize="14" />
                        <Label Padding="10" Text="{Binding RegDate, StringFormat='Дата:{0:yyyy.MM.dd HH:mm}'}" TextColor="Black" FontSize="14" />
                    </StackLayout>
                </Frame>
            </StackLayout>
        </DataTemplate>
    </CarouselView.ItemTemplate>
</CarouselView>  

For example, I want get BackgroundColor of next Frame in collection. For example, in HTML I have object ID or class name and by this keys and JS I can get something. What about XAML, can I set key to objects in collection and from XAML in some way get value by this key? I will be thankful for anything information.

P.S. I don`t want add in view model one more property, I want do that in XAML.

Answer 1

For example, I want get BackgroundColor of next Frame in collection. For example, in HTML I have object ID or class name and by this keys and JS I can get something. What about XAML, can I set key to objects in collection and from XAML in some way get value by this key?

We cannot get the BackgroundColor of next Frame in collection, since we don't know which item will be selected. But we can get the currentItem and previousItem.

And we know that the items of the CarouselView use the same DataTemplate of the CarouselView.ItemTemplate, so we cannot get the BackgroundColor of next Frame by the x:Name of the views in the DataTemplate layout.

Since you bind color to property Frame.Background, so you can get the currentItem and previousItem by event OnCurrentItemChanged.

So, I suggest to adding a property (e.g. BackgroundColor) to the Item of your ItemsSource(TrafficColors).

  public string BackgroundColor { get; set; }

Then, you will get the currentItem and previousItem in event OnCurrentItemChanged:

For example:

       void OnCurrentItemChanged(object sender, CurrentItemChangedEventArgs e)
    {
// here you can get the PreviousItem and CurrentItem which include the property `BackgroundColor`
        previousItem = e.PreviousItem as Item;
        currentItem = e.CurrentItem as Item;
        
    }

The TestPage.xaml

 <CarouselView ItemsSource="{Binding Monkeys}"
                  CurrentItemChanged="OnCurrentItemChanged"
                  PositionChanged="OnPositionChanged">
        <CarouselView.ItemTemplate>
            <DataTemplate>
                <StackLayout>
                    <Frame HasShadow="True"
                           BorderColor="DarkGray"
                           CornerRadius="5"
                           Margin="20"
                           HeightRequest="300"
                           HorizontalOptions="Center"
                           VerticalOptions="Center"
                           
                           BackgroundColor="{Binding BackgroundColor, Converter = {StaticResource ColorConverter}}"
                           >
                        <StackLayout>
                            <Label Text="{Binding Name}" 
                                   FontAttributes="Bold"
                                   FontSize="20"
                                   HorizontalOptions="Center"
                                   VerticalOptions="Center" />
                            <Image Source="{Binding ImageUrl}" 
                                   Aspect="AspectFill"
                                   HeightRequest="150"
                                   WidthRequest="150"
                                   HorizontalOptions="Center" />
                            <Label Text="{Binding Location}"
                                   HorizontalOptions="Center" />
                            <Label Text="{Binding Details}"
                                   FontAttributes="Italic"
                                   HorizontalOptions="Center"
                                   MaxLines="5"
                                   LineBreakMode="TailTruncation" />
                        </StackLayout>
                    </Frame>
                </StackLayout>
            </DataTemplate>
        </CarouselView.ItemTemplate>
    </CarouselView>

For more information about CarouselView,you can check: Configure CarouselView interaction.

For how to bind color , you can check thread：https://stackoverflow.com/questions/72901517/net-maui-how-to-reference-a-color-in-a-binding .