2017-02-12 30 views
0

在針對Windows Store 8.1和Windows Phone 8.1的Windows通用應用8.1平臺中,我需要隱藏文本塊,該文本塊在收集綁定時顯示「列表爲空」到ListView有一些項目,我需要顯示這個文本塊,只要收集是空的。如何在通用Windows應用程序8.1中顯示和隱藏文本塊

請爲此建議一個解決方案。

到目前爲止,我已經嘗試過這種方式,但是在集合中有項目的時候它不起作用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> 

當集合中沒有項目時工作正常。

enter image description here

問題:顯示「列表是空的」,即使它不是。

enter image description here

回答

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和收集改變事件(考慮看看您的代碼我假設您使用ObservableCollectionTasks)。 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

+0

沒有二傳手,StateTriggers性能上的VisualState在Windows應用程序萬能,我得到一個錯誤的XAML ,看起來像你發佈的解決方案是Windows通用平臺,我正在使用Windows通用應用程序 –

+0

@AbdulMateenMohammed是的,我認爲他們也在Win-RT中,不難改變這一點,給我一點時間。 – Romasz

+0

@AbdulMateenMohammed帶轉換器的版本,適用於WinRT。 – Romasz

1

我試圖在XAML中解決這個問題,但到目前爲止我無法做到這一點,所以我嘗試了另一種方式,即通過使用BooleanToVisibilityConverter來綁定TextBlock的Visibility屬性。

我設置了一個名爲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> 
相關問題