2016-11-23 42 views
0

我有一个示例项目,我试图做两件事情,如下所示。所有属性都在同一个ViewModel中。Xamarin表单ListView标题问题

我试图隐藏标题通过将可见性属性绑定到我的viewmodel中的属性将HeaderTemplate中的所有对象的可见性设置为false。这不起作用。我真正想要的是打开和关闭标题的方式,在代码中很好,但我更喜欢XAML。所有代码如下。任何建议,将不胜感激。

注意:我已经尝试将所有Header属性放入它们自己的类中,在ViewModel中实例化类的实例,并将Header Binding设置为该类的每个标题绑定绑定到该类的属性。这也没有用。

XAML代码

<?xml version="1.0" encoding="utf-8" ?> 
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
     xmlns:local="clr-namespace:SampleHeaderFooter" 
     x:Class="SampleHeaderFooter.MainPage"> 

<ContentPage.Content> 

    <!-- List of places --> 
    <ListView x:Name="lvPlaces" 
        VerticalOptions="StartAndExpand" 
        HorizontalOptions="StartAndExpand" 
        HasUnevenRows="True" 
        ItemsSource="{Binding GBSPlaceDetails}" 
        Header="{Binding HeaderText}"> 
     <ListView.HeaderTemplate> 
      <DataTemplate> 
       <StackLayout IsVisible="False"> 
        <Label x:Name="lblHeaderText" Text="{Binding .}" IsVisible="{Binding HeaderVisible}" TextColor="White" FontSize="Medium" FontAttributes="Bold" /> 
        <Label x:Name="lblHeaderLink" Text="Click here to change your settings." IsVisible="{Binding HeaderVisible}" 
          TextColor="Blue" FontSize="Medium" FontAttributes="Bold"> 
         <Label.GestureRecognizers> 
          <TapGestureRecognizer Tapped="btnSettings_Clicked"/> 
         </Label.GestureRecognizers> 
        </Label> 
       </StackLayout> 
      </DataTemplate> 
     </ListView.HeaderTemplate> 
     <ListView.ItemTemplate> 
      <DataTemplate> 
       <ViewCell> 
        <BoxView x:Name="bvLine" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" VerticalOptions="Center" HorizontalOptions="FillAndExpand" BackgroundColor="Black" HeightRequest="1" /> 
         <Label x:Name="lblPlaceName" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="Transparent" TextColor="Gray" FontAttributes="Bold" 
            Text="{Binding Title}" FontSize="Medium" Margin="0,4,0,4" VerticalOptions="Center" HorizontalOptions="FillAndExpand"/> 
       </ViewCell> 
      </DataTemplate> 
     </ListView.ItemTemplate> 
    </ListView> 
</ContentPage.Content>   

代码隐藏

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 
using System.Threading.Tasks; 
using Xamarin.Forms; 

namespace SampleHeaderFooter 
{ 
public partial class MainPage : ContentPage 
{ 
    public MainPage() 
    { 
     InitializeComponent(); 
     PlacesVM lobj_PlaceVM = new PlacesVM(); 
     BindingContext = lobj_PlaceVM; 
    } 

    private void btnSettings_Clicked(object sender, EventArgs e) 
    { 

    } 
    } 
} 

ViewModelClass

using System; 
using System.Collections.Generic; 
using System.Collections.ObjectModel; 
using System.Linq; 
using System.Text; 
using System.Threading.Tasks; 

namespace SampleHeaderFooter 
{ 
    public class GBSPlaceDetail 
    { 
     /// <summary> 
     /// Name/Title of the Place 
     /// </summary> 
     public string Title { get; set; } 
    } 

    public class PlacesVM 
    { 
     private bool ib_HeaderVisible = false; 
     private string is_HeaderText = ""; 

     /// <summary> 
     /// Indicates if the header should be visible. This only happens when a query was performed using the values as specified in the settings and no locations 
     /// were returned. 
     /// </summary> 
     public bool HeaderVisible 
     { 
      get 
      { 
       return ib_HeaderVisible; 
      } 

      set 
      { 
       ib_HeaderVisible = value; 
      } 
     } 

     /// <summary> 
     /// The Text that should appear in the header. 
     /// </summary> 
     public string HeaderText 
     { 
      get 
      { 
       return is_HeaderText; 
      } 
      set 
      { 
       is_HeaderText = value; 
      } 
     } 

    /// <summary> 
    /// A collection for Nearby Place objects. 
    /// </summary> 
    public ObservableCollection<GBSPlaceDetail> GBSPlaceDetails { get; private set; } 


     /// <summary> 
     /// Constructor for the Places View Model 
     /// </summary> 
     public PlacesVM() 
     { 
      this.GBSPlaceDetails = new ObservableCollection<GBSPlaceDetail>(); 

      this.GBSPlaceDetails.Add(new GBSPlaceDetail { Title = "Place 1" }); 
      this.GBSPlaceDetails.Add(new GBSPlaceDetail { Title = "Place 2" }); 
      this.GBSPlaceDetails.Add(new GBSPlaceDetail { Title = "Place 3" }); 
      this.GBSPlaceDetails.Add(new GBSPlaceDetail { Title = "Place 4" }); 
      this.GBSPlaceDetails.Add(new GBSPlaceDetail { Title = "Place 5" }); 
      this.GBSPlaceDetails.Add(new GBSPlaceDetail { Title = "Place 6" }); 

      HeaderVisible = false; 
      HeaderText = "This is my header text.";    
     } 

    } 
} 

回答

1

我设置标题是在一开始可见,因此您可以点击设置搜索gs文本。 需要更改很少。

XAML中只复制有改动顶部的一部分,其余部分是相同的

<ListView x:Name="lvPlaces" 
        VerticalOptions="StartAndExpand" 
        HorizontalOptions="StartAndExpand" 
        HasUnevenRows="True" 
        ItemsSource="{Binding GBSPlaceDetails}" 
        Header="{Binding .}"> 


     <ListView.HeaderTemplate> 
     <DataTemplate> 
      <StackLayout Orientation="Vertical" IsVisible="{Binding HeaderVisible}"> 
      <Label x:Name="lblHeaderText" Text="{Binding HeaderText}" TextColor="White" FontSize="Medium" FontAttributes="Bold" /> 
      <Label x:Name="lblHeaderLink" Text="Click here to change your settings." 
        TextColor="Blue" FontSize="Medium" FontAttributes="Bold"> 
       <Label.GestureRecognizers> 
       <TapGestureRecognizer Tapped="btnSettings_Clicked"/> 
       </Label.GestureRecognizers> 
      </Label> 
      </StackLayout> 
     </DataTemplate> 
     </ListView.HeaderTemplate> 

在代码中的MainPage:

public partial class MainPage : ContentPage 
{ 
    PlacesVM lobj_PlaceVM; 

    public HiddenHeaderPage() 
    { 
     InitializeComponent(); 

     lobj_PlaceVM = new PlacesVM(); 
     BindingContext = lobj_PlaceVM; 
    } 

    private void btnSettings_Clicked(object sender, EventArgs e) 
    { 
     lobj_PlaceVM.HeaderVisible = !lobj_PlaceVM.HeaderVisible; 
    } 
} 

在型号代码:

public class PlacesVM : INotifyPropertyChanged 
{ 
    private bool ib_HeaderVisible = false; 
    private string is_HeaderText = ""; 

    /// <summary> 
    /// Indicates if the header should be visible. This only happens when a query was performed using the values as specified in the settings and no locations 
    /// were returned. 
    /// </summary> 
    public bool HeaderVisible 
    { 
     get 
     { 
      return ib_HeaderVisible; 
     } 

     set 
     { 
      ib_HeaderVisible = value; 
      OnPropertyChanged(); 
     } 
    } 

    public event PropertyChangedEventHandler PropertyChanged; 
    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null) 
    { 
     PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); 
    } 
    /// <summary> 
    /// The Text that should appear in the header. 
    /// </summary> 
    public string HeaderText 
    { 
     get 
     { 
      return is_HeaderText; 
     } 
     set 
     { 
      is_HeaderText = value; 
     } 
    } 

    /// <summary> 
    /// A collection for Nearby Place objects. 
    /// </summary> 
    public ObservableCollection<GBSPlaceDetail> GBSPlaceDetails { get; private set; } 


    /// <summary> 
    /// Constructor for the Places View Model 
    /// </summary> 
    public PlacesVM() 
    { 
     this.GBSPlaceDetails = new ObservableCollection<GBSPlaceDetail>(); 

     this.GBSPlaceDetails.Add(new GBSPlaceDetail { Title = "Place 1" }); 
     this.GBSPlaceDetails.Add(new GBSPlaceDetail { Title = "Place 2" }); 
     this.GBSPlaceDetails.Add(new GBSPlaceDetail { Title = "Place 3" }); 
     this.GBSPlaceDetails.Add(new GBSPlaceDetail { Title = "Place 4" }); 
     this.GBSPlaceDetails.Add(new GBSPlaceDetail { Title = "Place 5" }); 
     this.GBSPlaceDetails.Add(new GBSPlaceDetail { Title = "Place 6" }); 

     HeaderVisible = true; 
     HeaderText = "This is my header text."; 
    } 

} 
+0

感谢,似乎修复它。我发誓我尝试了标题{绑定},但显然不能与所有其他正确的事情相结合。再次感谢尤里。 –

+0

更新 - 仍然有一个小问题。即使在本示例中 - 当您单击链接以“隐藏”标题时,项目行不会一直移动到页面上。看起来头部总是占用一些空间。有没有办法解决这个问题? –

+0

更新解决方案:为了不使我的头占用任何空间,我需要在头(StackLayout和Labels)的所有字段上使用IsVisible =“{Binding HeaderVisible}”。我还需要从ListView中删除VerticalOptions和Horizo​​ntalOptions。一旦我这样做了,除非它应该是可见的,否则标题不会占用空间。希望这可以帮助。 –