How to bind a variable that is not part of the x:DataTemplate in the isVisible property-CodePudding

I wanted to make use of the Sports.IsExpanded(which part of the model:SportsModel datatype) to be binded to the IsVisible property of the controls:TappableStack, but the problem is there is another x:Datatype set on that part which is the model:AthleteModel.

How can I access the variable outside the x:Datatype.

<CollectionView IsGrouped="true" 
                        ItemsSource="{x:Binding AthletesPerSportsList}"
                        Margin="0,-15,0,0">
            <CollectionView.GroupHeaderTemplate>
                <DataTemplate x:DataType="model:SportsModel">
                    <StackLayout BackgroundColor="{x:StaticResource PurpleLight}">
                        <StackLayout.GestureRecognizers>
                            <TapGestureRecognizer Command="{x:Binding Source={x:Reference Athletes}, 
                                                  Path=BindingContext.SportTappedCommand}" 
                                                  CommandParameter="{x:Binding Sports}"/>
                        </StackLayout.GestureRecognizers>
                        <StackLayout Orientation="Horizontal" Padding="20,10">
                            <CheckBox IsChecked="{x:Binding Sports.IsSelected}"/>
                            <Label
                                Text="{x:Binding Sports.Name}"
                                FontAttributes="Bold" 
                                TextColor="Black" 
                                Style="{x:StaticResource MediumTextBold}"/>
                            <Label
                                Grid.Column="1"
                                Margin="10,0"
                                FontFamily="ABC"
                                FontSize="25"
                                Text="{x:Static common:ABCIcon.ArrowDown}"
                                TextColor="Black"
                                HorizontalOptions="EndAndExpand">
                                <Label.Triggers>
                                    <DataTrigger
                                        Binding="{x:Binding Sports.IsExpanded}"
                                        TargetType="Label"
                                        Value="true">
                                        <Setter Property="Text" Value="{x:Static common:ABCIcon.ArrowUp}" />
                                    </DataTrigger>
                                </Label.Triggers>
                            </Label>
                        </StackLayout>
                        <BoxView HeightRequest="1" Color="LightGray" Margin="0,-5,0,0"/>
                    </StackLayout>
                </DataTemplate>
            </CollectionView.GroupHeaderTemplate>

            <CollectionView.ItemTemplate>
                <DataTemplate x:DataType="model:AthleteModel">
                    <controls:TappableStack TappedCommand="{x:Binding Source={x:Reference Athletes},
                                                            Path=BindingContext.AthleteDetailsCommand}"
                                                            TappedCommandParameter="{x:Binding AthleteId}"
                                                            IsVisible="{x:Binding ">
                        <StackLayout Orientation="Horizontal" Padding="20,10">
                            <CheckBox IsChecked="{x:Binding IsSelected}"/>
                            <StackLayout Spacing="5">
                                <Label 
                                    VerticalOptions="Center"
                                    Text="{x:Binding Name}"
                                    TextColor="Black"
                                    Style="{x:StaticResource SmallText}"
                                    FontFamily="RM"/>
                                <Label Margin="0,-5,0,0">
                                    <Label.FormattedText>
                                        <FormattedString>
                                            <Span Text="{x:Static i18n:Translator.Athelete_Alias}" TextColor="Black" Style="{x:StaticResource SmallText}" FontFamily="RM"/>
                                            <Span Text=" :  " TextColor="Black" Style="{x:StaticResource SmallText}" FontFamily="RM"/>
                                            <Span Text="{x:Binding Alias}" TextColor="Black" Style="{x:StaticResource SmallText}"/>
                                        </FormattedString>
                                    </Label.FormattedText>
                                </Label>
                            </StackLayout>
                            <Label
                                FontFamily="ABC"
                                FontSize="Large"
                                Text="{x:Static common:ABCIcon.ArrowRight}"
                                TextColor="Black"
                                VerticalOptions="Center"
                                HorizontalOptions="EndAndExpand"/>
                        </StackLayout>
                        <BoxView HeightRequest="1" Color="LightGray"/>
                    </controls:TappableStack>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

CodePudding user response：

Looks to me like that isn't possible with the xaml shown. The problem is that model:SportsModel is known in GroupHeaderTemplate, but NOT in ItemTemplate.

Currently I see no way for an item's VM to know which group's VM to access.

To fix, you could add a property to each AthleteModel to tell it the SportsModel.

Here is one way to do that:

class AthleteModel
{
    public SportsModel MySport { get; set; }
    ...
}

// Code where you create Sports and Athletes.
SportsModel currentSport = ...
// Create the athletes associated with this sport.
AthleteModel athlete1 = ...
// Tell the athlete which sport it is in.
athlete1.MySport = currentSport;
...

Then you can reference it via the AthleteModel you already have:

<... IsVisible="{Binding MySport.IsExpanded}" ...