Question

我有一个图像控件，用户可以在其上拖放图片。当没有图像被丢弃并且控件为空时，我想显示一个替代文本，例如“在此处放一张图片”以更好地指出他/她的期望。

我无法弄清楚如何使用触发器，这根本没有显示任何内容，我不能再在我的图像控件上删除图片了：

<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>

Answer 1

我无法告诉您，您已经做了什么来打破以前工作的拖放功能，我所能做的就是建议您撤消更改以解决问题。但是，如果您想在集合为空时显示某些内容，那么这是一种简单的方法。使用该集合的Count属性并不好，因为在添加或删除项目时它不会更新。

您可以在项目集合旁边添加int属性，但是当集合属性发生更改时，您必须确保通知INotifyPropertyChanged接口：

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

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

然后你可以在一个简单的DataTrigger中使用它：

<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>

Answer 2

我是通过将TargetNullValue和FallbackValue设置为静态资源来实现的。请参阅下面的代码段。您当然可以将其设置为您想要的任何其他内容。

<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>

另一种方法可能更符合您的喜好，因为它使用触发器可能是这个解决方案： Handling null when binding to an Image in XAML （查看已接受的答案）。但是在我看来，设置TargetNullValue和FallbackValue是最好的方法。

尚未分配图像时显示替代文本

2 个答案: