FrameworkElements شرطي اعتمادا على DataContext

Question

في طلبي M-V-VM لدي لإظهار الصورة الرمزية للمستخدم. يتم توفير الصورة في خاصية نوع ImageSource الكائن ViewModel. هذا ما لدي حاليا:

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

ولكن، قد لا يكون بعض المستخدمين افاتار تكوين، لذلك UserAvatar هو null. في هذه الحالة أريد أن تظهر افتراضي. لا أحد لكن الرأي يجب أن يعرف عن الصورة الافتراضية، لأنه مجرد قلق العرض.

ولكن كيف يمكنني إما إظهار صورة مع ImageSource معين، أو مورد معين إذا ImageSource هو null. هل يجب أن تستخدم نوعا من DataTemplate مع DataTriggers؟ منذ الآن كنت فقط منهم لItemsControls، لذلك أنا لا أعرف.

Answer 1

وكما كنت تفكر بشكل صحيح، قوالب ومشغلات هي في الواقع صديقك هنا.

وهنا هو تنفيذ باستخدام 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>

وآمل أن يساعد هذا ..