2017-05-08 91 views
1

我有一個ListView默認SeparatorVisibility。如果在ItemsSource中有元素,並停止在最後一個元素下面顯示它,我的Android項目將顯示分隔符。這是我想要的iOS項目的結果。Xamarin.Forms(iOS項目):ListView分隔符顯示在所有屏幕

但是,在我的iOS項目中,無論有多少元素,屏幕都充滿了分隔符,即使我沒有元素或僅有一個元素,分隔符仍然在那裏。

有人可以給我一個理由,如何解決它嗎?謝謝。

回答

2

我覺得你可以看看到this post

這些都是一些提示

首先禁用默認的分隔符,這是通過添加以下屬性到ListView XAML

SeparatorColor="Transparent" 

後完成這樣,將完整的ViewCell內容包裝在雙層StackLayout中!我知道這聽起來像是矯枉過正,但這樣你就不會遇到任何有關ViewCell內部邊緣或其他東西的BoxView問題。 第一個StackLayout應該有一個BackgroundColor設置爲你希望你的分隔符的顏色,第二個StackLayout應該和它在其中的容器的其餘部分具有相同的BackgroundColor ......在我們的例子中該頁面被設置爲白色。一定要在第二個StackLayout的底部添加一個邊距,因爲這將代表我們分隔符的厚度!

我想你可以用這個「保證金」 ......當你的數據是空的,除去保證金,所以你不應該有分隔

<ListView x:Name="SeparatorListView" 
    SeparatorColor="Transparent" 
    ItemsSource="{Binding Persons}" 
    Margin="0,20,0,0" 
    RowHeight="60" 
    HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" 
    BackgroundColor="White" 
    Grid.Row="1"> 
    <ListView.ItemTemplate> 
     <DataTemplate> 
      <ViewCell IsEnabled="false"> 
       <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" 
        BackgroundColor="Black"> 
       <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" 
        BackgroundColor="White" 
        Margin="0,0,0,0.4"> 
        <StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand" Spacing="0"> 
         <Label Text="{Binding FullName}" TextColor="Maroon" VerticalOptions="CenterAndExpand" Margin="20,0,20,0" /> 
         <Label Text="{Binding Profession}" TextColor="Maroon" VerticalOptions="CenterAndExpand" Margin="20,0,20,0" /> 
        </StackLayout> 
       </StackLayout> 
       </StackLayout> 
      </ViewCell> 
     </DataTemplate> 
    </ListView.ItemTemplate> 
</ListView> 

隨着在地方玩,你會得到與本博文右上角的預覽圖像具有相同的視覺效果。

作爲獎勵,如果頁面的背景顏色不是白色,則可以省略StackLayouts之一。因爲如果是這種情況,您可以通過使用ListView中的透明度來使用該顏色作爲分隔符顏色。

這個例子,只有在頁面本身也有一個BackgroundColor設置爲Olive的情況下才能使用。

<ListView x:Name="SeparatorListView" 
    SeparatorColor="Transparent" 
    ItemsSource="{Binding Persons}" 
    Margin="0,20,0,0" 
    RowHeight="60" 
    HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" 
    BackgroundColor="Olive" 
    Grid.Row="1"> 
    <ListView.ItemTemplate> 
     <DataTemplate> 
      <ViewCell IsEnabled="false"> 
        <StackLayout BackgroundColor="#f4eac3" 
           Padding="0,5,0,5" 
           HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> 
         <StackLayout BackgroundColor="Transparent" 
            HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" 
            Spacing="0" 
            Margin="20,0,20,0"> 
         <Label Text="{Binding FullName}" TextColor="Maroon" VerticalOptions="CenterAndExpand" /> 
         <Label Text="{Binding Profession}" TextColor="Maroon" VerticalOptions="CenterAndExpand" /> 
        </StackLayout> 
       </StackLayout> 
      </ViewCell> 
     </DataTemplate> 
    </ListView.ItemTemplate> 
</ListView> 
+0

感謝@AlessandroCaliaro!它不適合我,因爲我的頁面有一個BackgroundImage,而我的ListView具有'BackgroundColor =「Transparent」'因此,我無法做到這一點。 但是你給了我製作我的'SeparatorVisibility =「None」'並且添加到我的網格(我在每個ViewCell中有一個)一個額外的小行與BackgroundColor模擬我的分隔符!它非常完美,非常感謝! –

0

這是由於在iOS端執行了ListView。它呈現爲UITableView,其中(在ListView的情況下)總是佔據整個高度並顯示空的項目。要更改此類行爲,您可以在頁面的代碼隱藏中動態設置ListView高度。另一種選擇是看看Xamarin的Evolve sample app,它有幾頁,它使用CardViewListView相結合,以使其看起來像它在Android上一樣。

1
using UIKit; 
using Xamarin.Forms; 
using Xamarin.Forms.Platform.iOS; 

[assembly: ExportRenderer (typeof(ListView), typeof(CustomListViewRenderer))] 
namespace yourNamespace 
{ 
    public class CustomListViewRenderer : ListViewRenderer 
    { 
     protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.ListView> e) 
     { 
      base.OnElementChanged(e); 
      if (e.NewElement != null) 
      { 
       var listView = Control as UITableView; 
       listView.SeparatorInset = UIEdgeInsets.Zero; 
      } 
     } 
    } 
}