Xamarin MasterPage-在菜单中显示/隐藏分隔线

时间:2019-01-23 13:29:26

标签: xaml xamarin xamarin.forms

如何从MasterPage中显示/隐藏菜单中的分隔线?目前,所有行似乎都已启用,但我不知道它们来自何处。我想禁用除“ Slaap”和“ Persoonlijke gegevens”之间的行以外的所有行。在这张图片中看起来只有两行,但实际上您可以清楚地看到它们。

https://i.stack.imgur.com/6EIrA.jpg

MasterPage.xaml

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:local="clr-namespace:TimeToSport.Views"
         xmlns:local1="clr-namespace:TimeToSport.Views"
         x:Class="TimeToSport.Views.Main.MasterPage"
         Padding="0,0,0,0" Title="Time To Sport">
<StackLayout>
    <Image Source="HeaderBackground.png" Margin="0,0,0,15"/>
    <ListView x:Name="listView" x:FieldModifier="public">
        <ListView.ItemsSource>
            <x:Array Type="{x:Type local:MasterPageItem}">
                <local1:MasterPageItem Title="Home" IconSource="contacts.png" TargetType="{x:Type local:ItemsPage}" />
                <local1:MasterPageItem Title="Sport" IconSource="contacts.png" TargetType="{x:Type local:SportPage}" />
                <local1:MasterPageItem Title="Voeding" IconSource="reminders.png" TargetType="{x:Type local:VoedingPage}" />
                <local1:MasterPageItem Title="Slaap" IconSource="todo.png" TargetType="{x:Type local:SlaapPage}" />
                <local1:MasterPageItem Title="Persoonlijke Gegevens" IconSource="todo.png" TargetType="{x:Type local:GegevensGewichtDoel}"/>
            </x:Array>
        </ListView.ItemsSource>
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid Padding="5,10">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="30"/>
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Image Source="{Binding IconSource}" />
                        <Label Grid.Column="1" Text="{Binding Title}" FontSize="17" />
                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>
</ContentPage>

1 个答案:

答案 0 :(得分:1)

首先,您的Listview应该具有SeparatorVisibility=None

在您的local: MasterPageItem中添加一个新的属性IsSeparator,以标识将被分隔的元素

然后,在您的列表视图中

<ListView x:Name="listView" SeparatorVisibility="None" x:FieldModifier="public">
        <ListView.ItemsSource>
            <x:Array Type="{x:Type local:MasterPageItem}">
                <local1:MasterPageItem Title="Home" IconSource="contacts.png" TargetType="{x:Type local:ItemsPage}" />
                <local1:MasterPageItem Title="Sport" IconSource="contacts.png" TargetType="{x:Type local:SportPage}" />
                <local1:MasterPageItem Title="Voeding" IconSource="reminders.png" TargetType="{x:Type local:VoedingPage}" />
                <local1:MasterPageItem IsSeparator="true" Title="Slaap" IconSource="todo.png" TargetType="{x:Type local:SlaapPage}" />
                <local1:MasterPageItem Title="Persoonlijke Gegevens" IconSource="todo.png" TargetType="{x:Type local:GegevensGewichtDoel}"/>
            </x:Array>
        </ListView.ItemsSource>
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid Padding="5,10">
                        <Grid.RowDefinitions>
                            <RowDefinition Height ="*"/>
                            <RowDefinition Height ="1"/>
                        <Grid.RowDefinitions/>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="30"/>
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Image Source="{Binding IconSource}" />
                        <Label Grid.Column="1" Text="{Binding Title}" FontSize="17" />

                        <BoxView Grid.Row="1" Grid.ColumnSpan="2" HeightRequest="1" Color="Red" IsVisible="{Binding IsSeparator}">
                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>