FrameworkElements conditionnels dépendant de DataContext

Question

Dans mon application M-V-VM, je dois afficher l'avatar de l'utilisateur. L'image est fournie dans une propriété de type ImageSource, l'objet ViewModel. C'est donc ce que j'ai actuellement:

<Image Source="{Binding Path=UserAvatar}"/>

Cependant, certains utilisateurs peuvent ne pas avoir d'avatar configuré. Par conséquent, UserAvatar est null . Dans ce cas, je veux montrer un avatar par défaut. Personne, mais la vue doit connaître l’image par défaut, car il s’agit simplement d’une question de présentation.

Alors, comment puis-je afficher l'image avec le ImageSource donné ou une ressource spécifique si ImageSource est null ? Dois-je utiliser une sorte de DataTemplate avec DataTriggers? Depuis, je ne les utilise que pour ItemsControls, donc je ne sais pas.

Answer 1

Comme vous l'avez bien compris, les modèles et les déclencheurs sont vraiment vos amis ici.

Voici une implémentation utilisant ContentControl :

<ContentControl Content="{Binding Path=UserAvatar}">
    <ContentControl.ContentTemplate>
        <DataTemplate>
            <Image x:Name="image" Source="{Binding}"/>
            <DataTemplate.Triggers>
                <DataTrigger Binding="{Binding}" Value="{x:Null}">
                    <Setter TargetName="image" Property="Source" Value="--your awesome default image here--" />
                </DataTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>
    </ContentControl.ContentTemplate>
</ContentControl>

Et dans le cas où votre objet par défaut n'est pas ImageSource et que vous souhaitez vous amuser un peu avec d'autres contrôles, vous pouvez toujours utiliser la propriété Visibilty :

<ContentControl Content="{Binding Path=UserAvatar}">
    <ContentControl.ContentTemplate>
        <DataTemplate>
            <Grid>
                <Image x:Name="image" Source="{Binding}" />
                <Canvas x:Name="defaultImage" Visibility="Collapsed" />
            </Grid>
            <DataTemplate.Triggers>
                <DataTrigger Binding="{Binding}" Value="{x:Null}">
                    <Setter TargetName="image" Property="Visibility" Value="Collapsed" />
                    <Setter TargetName="defaultImage" Property="Visibility" Value="Visible" />
                </DataTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>
    </ContentControl.ContentTemplate>
</ContentControl>

J'espère que cela vous aide ..