Marco condicionalElementos dependiendo de DataContext

Question

En mi aplicación M-V-VM tengo que mostrar el avatar del usuario. La imagen se proporciona en una propiedad de tipo ImageSource del objeto ViewModel. Así que eso es lo que tengo actualmente:

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

Sin embargo, es posible que algunos usuarios no tengan un avatar configurado, por lo que UserAvatar es null . En ese caso quiero mostrar un avatar predeterminado. Nadie, pero la vista debe conocer la imagen predeterminada, porque es solo una cuestión de presentación.

Entonces, ¿cómo puedo mostrar la imagen con el ImageSource dado o un recurso específico si ImageSource es null ? ¿Tengo que usar algún tipo de DataTemplate con DataTriggers? Desde ahora solo los he usado para ItemsControls, así que no lo sé.

Answer 1

Como has adivinado correctamente, las plantillas y los activadores son, de hecho, tu amigo aquí.

Aquí hay una implementación utilizando el 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>

Y en la situación en la que tu cosa predeterminada no es ImageSource , y deseas jugar un poco con otros controles, siempre puedes recurrir a la propiedad 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>

Espero que esto ayude ..