Как показать и скрыть текстовый блок в универсальных приложениях Windows 8.1

Question

В платформе Windows Universal Apps 8.1, ориентированной на Windows Store 8.1 и Windows Phone 8.1 Мне нужно скрыть текстовый блок, в котором говорится: «Список пуст», когда привязка коллекции к ListView есть некоторые элементы в нем, и мне нужно показать этот блок текста всякий раз, когда коллекция пуста.

Пожалуйста, предложите решение для этого.

До сих пор я пробовал это, но он не работает, когда в коллекции есть элементы TasksEmptyMsg все еще показывает, что «Список пуст».

<Page 
    x:Class="ToDoer.Pages.Task" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:ToDoer.Pages" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:interactivity="using:Microsoft.Xaml.Interactivity" 
    xmlns:core="using:Microsoft.Xaml.Interactions.Core" 
    mc:Ignorable="d"> 

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
     <ListView x:Name="Tasks" 
        ItemsSource="{Binding Tasks}" 
        SelectedItem="{Binding SelectedTask,Mode=TwoWay}" 
        ItemTemplate="{StaticResource TasksItemTemplate}" 
        Padding="24,24"> 
      <interactivity:Interaction.Behaviors> 
       <core:EventTriggerBehavior EventName="SelectionChanged"> 
        <core:InvokeCommandAction Command="{Binding TaskSelectionChanged}"/> 
       </core:EventTriggerBehavior> 
      </interactivity:Interaction.Behaviors> 
     </ListView> 

     <TextBlock x:Name="TasksEmptyMsg" 
        Text="The list is empty" 
        HorizontalAlignment="Center" 
        VerticalAlignment="Center" 
        Visibility="Collapsed" 
        Style="{StaticResource GroupHeaderTextBlockStyle}"> 
      <interactivity:Interaction.Behaviors> 
       <core:DataTriggerBehavior Binding="{Binding ElementName=Tasks,Path=Items.Count}" 
              Value="0"> 
        <core:ChangePropertyAction TargetObject="{Binding ElementName=TasksEmptyMsg}" 
               PropertyName="Visibility" 
               Value="Visible"/> 
       </core:DataTriggerBehavior> 
      </interactivity:Interaction.Behaviors> 
     </TextBlock> 
     <!--Uncomment to see an alignment grid to help ensure your controls are 
      aligned on common boundaries. The image has a top margin of -32px to 
      account for the System Tray. Set this to 0 (or remove the margin altogether) 
      if the System Tray is hidden. 

      Before shipping remove this XAML and the image itself.--> 
     <!--<Image Source="/Assets/AlignmentGrid.png" VerticalAlignment="Top" Height="800" Width="480" Margin="0,-32,0,0" Grid.Row="0" IsHitTestVisible="False" />--> 
    </Grid> 

    <Page.BottomAppBar> 
     <CommandBar> 
      <AppBarButton Icon="Add" 
          Label="add todo" 
          Command="{Binding AddTask}"/> 
     </CommandBar> 
    </Page.BottomAppBar> 
</Page> 

Прекрасно работает, когда предметов нет в коллекции.

Издание: Шоу «Список пуст», даже если это не так.

Answer 1

ListView сами по себе не имеет какую-либо собственность сообщив, что она пуста, ни привязку к Items.Count помощи здесь, как изменить свойство не поднять. К счастью, реализовать такой механизм не сложно, и есть несколько способов сделать это. Вот один, который использует преобразователи:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <Grid.Resources> 
     <local:BoolToVisibility x:Key="BoolToVisibility"/> 
    </Grid.Resources> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="300"/> 
      <ColumnDefinition Width="*"/> 
     </Grid.ColumnDefinitions> 

    <ListView x:Name="TheList" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ItemsSource="{Binding Tasks}" Visibility="{Binding IsTasksEmpty, Converter={StaticResource BoolToVisibility}, ConverterParameter='INVERT'}"/> 
    <TextBlock x:Name="EmptyText" Grid.Column="0" Text="List is empty" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="{Binding IsTasksEmpty, Converter={StaticResource BoolToVisibility}}"/> 
     <StackPanel Grid.Column="1"> 
      <Button Content="Add item" Click="AddButton_Click" Margin="20"/> 
      <Button Content="Delete item" Click="DelButton_Click" Margin="20"/> 
     </StackPanel> 
</Grid> 

и код позади:

public class BoolToVisibility : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, string language) => (bool)value != ((string)parameter == "INVERT") ? Visibility.Visible : Visibility.Collapsed; 
    public object ConvertBack(object value, Type targetType, object parameter, string language) { throw new NotImplementedException(); } 
} 

public sealed partial class MainPage : Page, INotifyPropertyChanged 
{ 
    public event PropertyChangedEventHandler PropertyChanged; 
    private void RaiseProperty(string name) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name)); 

    public ObservableCollection<string> Tasks { get; set; } = new ObservableCollection<string>() { "Starting item" }; 
    public bool IsTasksEmpty => Tasks.Count < 1; 

    public MainPage() 
    { 
     this.InitializeComponent(); 
     this.DataContext = this; 
     Tasks.CollectionChanged += (sender, e) => RaiseProperty(nameof(IsTasksEmpty)); 
    } 

    private void AddButton_Click(object sender, RoutedEventArgs e) => Tasks.Add("Next item"); 
    private void DelButton_Click(object sender, RoutedEventArgs e) => Tasks.RemoveAt(Tasks.Count - 1); 
} 

Вот это один для UWP, который использует VisualStates и сбор изменили события (взглянуть на ваш код Я предполагаю, что вы используете ObservableCollection для Tasks). XAML-код:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup x:Name="ListStates"> 
      <VisualState x:Name="ListWithItems"/> 
      <VisualState x:Name="ListEmpty"> 
       <VisualState.Setters> 
        <Setter Target="EmptyText.Visibility" Value="Visible"/> 
        <Setter Target="TheList.Visibility" Value="Collapsed"/> 
       </VisualState.Setters> 
       <VisualState.StateTriggers> 
        <StateTrigger IsActive="{Binding IsTasksEmpty}"/> 
       </VisualState.StateTriggers> 
      </VisualState> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="300"/> 
     <ColumnDefinition Width="*"/> 
    </Grid.ColumnDefinitions> 

    <ListView x:Name="TheList" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ItemsSource="{Binding Tasks}"/> 
    <TextBlock x:Name="EmptyText" Grid.Column="0" Text="List is empty" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Collapsed"/> 
    <StackPanel Grid.Column="1"> 
     <Button Content="Add item" Click="AddButton_Click" Margin="20"/> 
     <Button Content="Delete item" Click="DelButton_Click" Margin="20"/> 
    </StackPanel> 
</Grid> 

код позади такой же, как указано выше, в решении с преобразователем.

Рабочий образец для UWP вы будете find at GitHub.

Answer 2

Я попытался решить эту проблему в XAML, но до сих пор я не мог этого сделать, поэтому я попробовал другой способ, т.е. привязать свойство Видимость TextBlock с помощью BooleanToVisibilityConverter.

Я установил свойство AreTasksEmpty, а уведомление о свойствах осуществляется с помощью библиотеки MvvmLight.

/// <summary> 
/// The are tasks empty. 
/// </summary> 
private bool _areTasksEmpty; 

/// <summary> 
/// Gets or sets the are tasks empty. 
/// </summary> 
public bool AreTasksEmpty 
{ 
    get 
    { 
     return this._areTasksEmpty; 
    } 
    set 
    { 
     this.Set(ref this._areTasksEmpty, value); 
    } 
} 

В методе, который выполняет задачи, я обновил значение свойства AreTasksEmpty следующим образом.

if (this.Tasks.Any()) 
{ 
    this.AreTasksEmpty = false; 
} 
else 
{ 
    this.AreTasksEmpty = true; 
} 

В XAML, я сделал привязку к Visibility собственности следующим образом,

<TextBlock x:Name="TasksEmptyMsg" 
      Text="The list is empty" 
      HorizontalAlignment="Center" 
      VerticalAlignment="Center" 
      Visibility="{Binding AreTasksEmpty, Converter={StaticResource BooleanToVisibilityConverter}}" 
      Style="{StaticResource GroupHeaderTextBlockStyle}"> 
</TextBlock>