Displaying an alternative text when no image has been assigned yet

Question

I have an image control on which the user can drag and drop pictures. When no image has been dropped in there and the control is empty, I'd like to show an alternative text such as "Drop a picture here" to better indicate what is expected from him/her.

I can't figure out how to use triggers with this, this shows nothing at all and I can no longer drop pictures on my image control:

<StackPanel Grid.Column="1" Grid.Row="2" FlowDirection="LeftToRight" Orientation="Horizontal" Margin="0px 4px">         
    <StackPanel.Resources>
        <DataTemplate x:Key="tmpTemplate">

            <Border BorderThickness="2" BorderBrush="#FF969DFF" CornerRadius="2" VerticalAlignment="Top">
            <DockPanel>
            <Image Name="imgSelectedViewImage" Source="{Binding Image}" MinWidth="32" MinHeight="32" MaxWidth="48" MaxHeight="48" 
                    HorizontalAlignment="Left" Stretch="None"
                    IsEnabled="{Binding EditMode}" Margin="2px"/>
            <Label Content="Drag here" Name="AltText" Visibility="Collapsed"></Label>
            </DockPanel>
        </Border>

        <DataTemplate.Triggers>
            <DataTrigger Binding="{Binding Path=Image}" Value="{x:Null}">
            <Setter TargetName="AltText" Property="Visibility" Value="Visible" />
            </DataTrigger>
        </DataTemplate.Triggers>
    </DataTemplate>
</StackPanel.Resources>

score 1 · Accepted Answer · answered Feb 23 '14 at 01:04

I can't tell you what you've done to break your previously working drag and drop functionality and all I can do is to suggest you undo your changes to remedy that. However, if you want to display something when a collection is empty, then there's an easy way to do that. Using the collection's Count property is no good because it won't update when items are added or removed.

You can simply add an int property next to your item collection for this, but you have to make sure that you notify the INotifyPropertyChanged interface for it also when the collection property changes:

public ObservableCollection<YourItem> YourItems
{
    get { return yourItems; }
    set 
    {
        yourItems = value; 
        NotifyPropertyChanged("YourItems");
        NotifyPropertyChanged("YourItemsCount");
    }
}

public int YourItemsCount
{
    get { return YourItems.Count; }
}

Then you can use it in a simple DataTrigger like this:

<Grid>
    <!-- Put your normal content here -->
    <TextBlock FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"
        Text="Drop images here">
        <TextBlock.Style>
            <Style>
                <Setter Property="TextBlock.Visibility" Value="Collapsed" />
                <Style.Triggers>
                    <DataTrigger Binding="{Binding YourItemsCount}" Value="0">
                        <Setter Property="TextBlock.Visibility" Value="Visible" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </TextBlock.Style>
    </TextBlock>
</Grid>

thanks a lot, that should be a useful piece of Xaml; I'll try it now — BuZz, Feb 23 '14 at 13:10

score 1 · Answer 2 · edited May 23 '17 at 11:57

I did it by setting the TargetNullValue and the FallbackValue to a static resource. See the code snippet below. You can of course set it to everything else you want.

<Image Stretch="Uniform"
       Grid.Row="0"
       Grid.Column="1"
       MaxHeight="250"
       MaxWidth="250"
       Margin="10"
       Source="{Binding Path=Character.Portrait, TargetNullValue={StaticResource FallbackImage}, FallbackValue={StaticResource FallbackImage}}">
       <i:Interaction.Triggers>
           <i:EventTrigger EventName="MouseDoubleClick">
               <cal:ActionMessage MethodName="ChangePicture">
               </cal:ActionMessage>
           </i:EventTrigger>
       </i:Interaction.Triggers>
</image>

Another approach, which could be more to your liking, as it uses triggers could be this solution: Handling null when binding to an Image in XAML (look at the accepted answer). However in my opinion setting TargetNullValue and the FallbackValue is the best way to go.

Displaying an alternative text when no image has been assigned yet

2 Answers2