Condizionale FrameworkElements a seconda di DataContext

Question

Nella mia applicazione M-V-VM devo mostrare l'avatar dell'utente. L'immagine è fornita in una proprietà di tipo ImageSource l'oggetto ViewModel. Questo è quello che ho attualmente:

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

Tuttavia, alcuni utenti potrebbero non avere un avatar configurato, quindi UserAvatar è null . In tal caso, voglio mostrare un avatar predefinito. Nessuno, ma la vista deve conoscere l'immagine predefinita, perché è solo una questione di presentazione.

Quindi, come posso mostrare l'immagine con la ImageSource fornita o una risorsa specifica se ImageSource è null . Devo usare un qualche tipo di DataTemplate con DataTriggers? Da allora li ho usati solo per ItemsControls, quindi non lo so.

Answer 1

Come hai indovinato correttamente, i modelli e i trigger sono davvero i tuoi amici qui.

Ecco un'implementazione che utilizza 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 nel caso in cui il tuo oggetto predefinito non sia ImageSource e desideri giocare un po 'con altri controlli, puoi sempre ricorrere alla proprietà 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>

Spero che questo aiuti ...