FrameworkElements condicionais, dependendo DataContext

Question

Na minha aplicação M-V-VM eu tenho que mostrar avatar do usuário. A imagem é fornecida em uma propriedade do tipo ImageSource o objeto ViewModel. Então é isso que eu tenho atualmente:

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

No entanto, alguns usuários podem não ter um avatar configurado, então UserAvatar é null. Nesse caso, eu quero mostrar um avatar padrão. Noone mas a vista deve saber sobre a imagem padrão, porque é apenas uma preocupação de apresentação.

Então, como posso quer mostrar a imagem com o ImageSource dado, ou um recurso específico se ImageSource é null. Eu tenho que usar algum tipo de DataTemplate com DataTriggers? Desde agora eu apenas utilizado para ItemsControls, então eu não sei.

Answer 1

Como você adivinhou corretamente, modelos e gatilhos são realmente seu amigo aqui.

Aqui é uma implementação usando o 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>

E na situação quando o seu coisinha padrão é sem ImageSource, e quiser brincar um pouco com outros controles, você pode sempre recorrer à propriedade 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 isso ajude ..