Условные FrameworkElements в зависимости от DataContext - PullRequest
3 голосов
/ 30 июля 2009

В моем приложении M-V-VM я должен показать аватар пользователя. Изображение предоставляется в свойстве типа ImageSource объекта ViewModel. Вот что у меня сейчас:

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

Однако у некоторых пользователей может не быть настроенного аватара, поэтому UserAvatar - null. В этом случае я хочу показать аватар по умолчанию. Никто, кроме представления, не должен знать об изображении по умолчанию, потому что это просто вопрос представления.

Так как же я могу показать изображение с заданным ImageSource или конкретным ресурсом, если ImageSource null. Должен ли я использовать какой-либо тип DataTemplate с DataTriggers? С тех пор я использовал их только для ItemsControls, поэтому я не знаю.

1 Ответ

6 голосов
/ 30 июля 2009

Как вы уже догадались, шаблоны и триггеры действительно ваши друзья здесь.

Вот реализация, использующая 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>

А в ситуации, когда вашим значением по умолчанию является ImageSource, и вы хотите немного поиграть с другими элементами управления, вы всегда можете прибегнуть к свойству 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>

Надеюсь, это поможет ..

...