Xamarin.Forms Associazioni relative

Scaricare l'esempio Scaricare l'esempio

Le associazioni relative consentono di impostare l'origine del binding rispetto alla posizione della destinazione del binding. Vengono creati con l'estensione RelativeSource di markup e impostati come proprietà di Source un'espressione di associazione.

RelativeSourceL'estensione di markup è supportata dalla classe , che definisce le proprietà RelativeSourceExtension seguenti:

  • Mode, di tipo RelativeBindingSourceMode , descrive il percorso dell'origine del binding rispetto alla posizione della destinazione dell'associazione.
  • AncestorLevel, di tipo int , un livello predecessore facoltativo da cercare, quando Mode la proprietà è FindAncestor . Un AncestorLevel di ignora le istanze di nn-1AncestorType .
  • AncestorType, di tipo Type , il tipo di predecessore da cercare, quando la proprietà è ModeFindAncestor .

Nota

Il parser XAML consente RelativeSourceExtension di abbreviare la classe come RelativeSource .

La Mode proprietà deve essere impostata su uno dei membri RelativeBindingSourceMode dell'enumerazione :

  • TemplatedParent indica l'elemento a cui viene applicato il modello, in cui è presente l'elemento associato. Per altre informazioni, vedere Eseguire l'associazione a un elemento padre con modelli.
  • Self indica l'elemento su cui viene impostata l'associazione, consentendo di associare una proprietà di tale elemento a un'altra proprietà nello stesso elemento. Per altre informazioni, vedere Eseguire l'associazione a self.
  • FindAncestor indica il predecessore nella struttura ad albero visuale dell'elemento associato. Questa modalità deve essere usata per l'associazione a un controllo predecessore rappresentato dalla AncestorType proprietà . Per altre informazioni, vedere Eseguire l'associazione a un predecessore.
  • FindAncestorBindingContext indica BindingContext l'oggetto del predecessore nella struttura ad albero visuale dell'elemento associato. Questa modalità deve essere usata per eseguire l'associazione BindingContext all'oggetto di un predecessore rappresentato dalla AncestorType proprietà . Per altre informazioni, vedere Eseguire l'associazione a un predecessore.

La Mode proprietà è la proprietà content della classe RelativeSourceExtension . Pertanto, per le espressioni di markup XAML espresse con parentesi graffe, è possibile eliminare Mode= la parte dell'espressione.

Per altre informazioni sulle estensioni Xamarin.Forms di markup, vedere Xamarin.Forms

Eseguire l'associazione a se stessi

La Self modalità di associazione relativa viene usata per associare una proprietà di un elemento a un'altra proprietà nello stesso elemento:

<BoxView Color="Red"
         WidthRequest="200"
         HeightRequest="{Binding Source={RelativeSource Self}, Path=WidthRequest}"
         HorizontalOptions="Center" />

In questo esempio, BoxView imposta la proprietà su una dimensione fissa e la proprietà viene WidthRequestHeightRequest associata alla proprietà WidthRequest . Pertanto, entrambe le proprietà sono uguali e quindi viene disegnato un quadrato:

Screenshot di un binding relativo in modalità self-service, in modalitàdi binding iOS e Android

Importante

Quando si associa una proprietà di un elemento a un'altra proprietà nello stesso elemento, le proprietà devono essere dello stesso tipo. In alternativa, è possibile specificare un convertitore nell'associazione per convertire il valore.

Un uso comune di questa modalità di associazione è l'impostazione di un oggetto BindingContext su una proprietà su se stesso. Il codice seguente illustra un esempio:

<ContentPage ...
             BindingContext="{Binding Source={RelativeSource Self}, Path=DefaultViewModel}">
    <StackLayout>
        <ListView ItemsSource="{Binding Employees}">
            ...
        </ListView>
    </StackLayout>
</ContentPage>

In questo esempio, BindingContext la proprietà della pagina è impostata sulla proprietà di se DefaultViewModel stessa. Questa proprietà è definita nel file code-behind per la pagina e fornisce un'istanza del modello di visualizzazione. ListViewL'oggetto viene associato alla proprietà del modello di Employees visualizzazione.

Eseguire l'associazione a un predecessore

Le FindAncestor modalità di associazione e relative vengono usate per FindAncestorBindingContext l'associazione a elementi padre, di un determinato tipo, nella struttura ad albero visuale. La FindAncestor modalità viene usata per eseguire l'associazione a un elemento padre, che deriva dal tipo Element . La FindAncestorBindingContext modalità viene utilizzata per eseguire l'associazione BindingContext all'oggetto di un elemento padre.

Avviso

La AncestorType proprietà deve essere impostata su quando si utilizzano le modalità di associazione e relative. In caso TypeFindAncestorFindAncestorBindingContext contrario, viene generata XamlParseException un'eccezione .

Se la Mode proprietà non è impostata in modo esplicito, l'impostazione della proprietà su un tipo che deriva da imposta in modo AncestorTypeElementMode implicito la proprietà su FindAncestor . Analogamente, l'impostazione della proprietà su un tipo che non deriva da imposta in modo AncestorTypeElement implicito Mode la proprietà su FindAncestorBindingContext .

Nota

Le associazioni relative che usano FindAncestorBindingContext la modalità verranno riapplicate quando l'oggetto BindingContext di qualsiasi predecessore cambia.

Il codice XAML seguente illustra un esempio in cui Mode la proprietà verrà impostata in modo implicito su FindAncestorBindingContext :

<ContentPage ...
             BindingContext="{Binding Source={RelativeSource Self}, Path=DefaultViewModel}">
    <StackLayout>
        <ListView ItemsSource="{Binding Employees}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Orientation="Horizontal">
                            <Label Text="{Binding Fullname}"
                                   VerticalOptions="Center" />
                            <Button Text="Delete"
                                    Command="{Binding Source={RelativeSource AncestorType={x:Type local:PeopleViewModel}}, Path=DeleteEmployeeCommand}"
                                    CommandParameter="{Binding}"
                                    HorizontalOptions="EndAndExpand" />
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

In questo esempio, BindingContext la proprietà della pagina è impostata sulla proprietà di se DefaultViewModel stessa. Questa proprietà è definita nel file code-behind per la pagina e fornisce un'istanza del modello di visualizzazione. ListViewL'oggetto viene associato alla proprietà del modello di Employees visualizzazione. , DataTemplate che definisce l'aspetto di ogni elemento in ListView , contiene un oggetto Button . La proprietà del pulsante Command è associata a DeleteEmployeeCommand nel modello di visualizzazione dell'elemento padre. Se si tocca Button un elemento , un dipendente viene eliminato:

Screenshot di un binding relativo in modalitàFindAncestor, in modalitàdi binding relativo per iOS e Android

Inoltre, la proprietà facoltativa consente di risolvere le ambiguità nella ricerca dei predecessori negli scenari in cui è possibile che nella struttura ad albero visuale siano presenti più AncestorLevel predecessori di tale tipo:

<Label Text="{Binding Source={RelativeSource AncestorType={x:Type Entry}, AncestorLevel=2}, Path=Text}" />

In questo esempio la proprietà viene associata alla proprietà del secondo oggetto rilevato nel percorso verso l'alto, a partire Label.TextTextEntry dall'elemento di destinazione dell'associazione.

Nota

La AncestorLevel proprietà deve essere impostata su 1 per trovare il predecessore più vicino all'elemento di destinazione del binding.

Eseguire l'associazione a un elemento padre con modelli

La modalità di associazione relativa viene usata per eseguire l'associazione dall'interno di un modello di controllo all'istanza dell'oggetto di runtime a cui viene applicato il modello (noto come elemento TemplatedParent padre con modelli). Questa modalità è applicabile solo se l'associazione relativa si trova all'interno di un modello di controllo ed è simile all'impostazione di un oggetto TemplateBinding .

Il codice XAML seguente mostra un esempio della TemplatedParent modalità di associazione relativa:

<ContentPage ...>
    <ContentPage.Resources>
        <ControlTemplate x:Key="CardViewControlTemplate">
            <Frame BindingContext="{Binding Source={RelativeSource TemplatedParent}}"
                   BackgroundColor="{Binding CardColor}"
                   BorderColor="{Binding BorderColor}"
                   ...>
                <Grid>
                    ...
                    <Label Text="{Binding CardTitle}"
                           ... />
                    <BoxView BackgroundColor="{Binding BorderColor}"
                             ... />
                    <Label Text="{Binding CardDescription}"
                           ... />
                </Grid>
            </Frame>
        </ControlTemplate>
    </ContentPage.Resources>
    <StackLayout>        
        <controls:CardView BorderColor="DarkGray"
                           CardTitle="John Doe"
                           CardDescription="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elit dolor, convallis non interdum."
                           IconBackgroundColor="SlateGray"
                           IconImageSource="user.png"
                           ControlTemplate="{StaticResource CardViewControlTemplate}" />
        <controls:CardView BorderColor="DarkGray"
                           CardTitle="Jane Doe"
                           CardDescription="Phasellus eu convallis mi. In tempus augue eu dignissim fermentum. Morbi ut lacus vitae eros lacinia."
                           IconBackgroundColor="SlateGray"
                           IconImageSource="user.png"
                           ControlTemplate="{StaticResource CardViewControlTemplate}" />
        <controls:CardView BorderColor="DarkGray"
                           CardTitle="Xamarin Monkey"
                           CardDescription="Aliquam sagittis, odio lacinia fermentum dictum, mi erat scelerisque erat, quis aliquet arcu."
                           IconBackgroundColor="SlateGray"
                           IconImageSource="user.png"
                           ControlTemplate="{StaticResource CardViewControlTemplate}" />
    </StackLayout>
</ContentPage>

In questo esempio, , che è l'elemento radice dell'oggetto , ha la proprietà impostata sull'istanza dell'oggetto Frame di runtime a cui viene applicato il ControlTemplateBindingContext modello. Pertanto, e Frame i relativi elementi figlio risolvono le espressioni di associazione in base alle proprietà di ogni CardView oggetto:

Modalità di associazione relativa Screenshot di un binding relativo in modalitàTemplatedParent, in modalità diassociazione relativa per iOS e Android

Per altre informazioni sui modelli di controllo, vedere Xamarin.Forms Control Templates .