代码之家 › 专栏 › 技术社区 › Pirzada

抽屉布局:如何进行此自定义布局

xamarin.android xamarin.forms xamarin

0

Pirzada · 技术社区 · 8 年前

我想把这些放在抽屉里,但找不到正确的方法。

需要这些布局

和

我已经试过并且一直在思考这个问题。我应该使用

1-列表

问题:如何添加分隔符和分组。

2-列表+网格

3-表格视图

我在下面张贴代码。我没有经验,也不认为这是正确的方法。请给我一些指示。

密码

        <ListView.Header>
            <Grid BackgroundColor="Transparent">
                <Grid.RowDefinitions>
                    <RowDefinition Height="150" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid>
                    <Image Source="bg.jpg" Aspect="AspectFill" />
                    <StackLayout Padding="11,110,0,20" >
                        <Label  Text="AppName" TextColor="White" FontSize="Medium"  Style="{DynamicResource SubtitleStyle}"/>
                    </StackLayout>
                </Grid>
            </Grid>
        </ListView.Header>

        <ListView.ItemsSource>
            <x:Array Type="{x:Type local:MasterPageItem}">
                <local:MasterPageItem Title="All Tasks" IconSource="ic_date_range_black_48dp.png" TargetType="{x:Type local:ContactsPage}" Color="Black" />
                <local:MasterPageItem Title="Today" IconSource="ic_date_range_black_48dp.png" TargetType="{x:Type local:TodoListPage}" Color="Black"/>
                <local:MasterPageItem Title="Completed" IconSource="ic_check_black_48dp.png" TargetType="{x:Type local:ReminderPage}" Color="Green"/>
                <local:MasterPageItem Title="InComplete" IconSource="ic_close_black_48dp.png" TargetType="{x:Type local:ReminderPage}" Color="Red"/>
                <local:MasterPageItem Title="My List" IconSource="ic_date_range_black_48dp.png" TargetType="{x:Type local:ReminderPage}" Color="Black"/>
            </x:Array>
        </ListView.ItemsSource>
        <ListView.ItemTemplate>
            <DataTemplate>

                <ViewCell>
                    <Grid Padding="5,10">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="30" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="30" />
                        </Grid.ColumnDefinitions>
                        <Image Source="{Binding IconSource}" VerticalOptions="Center"/>
                        <Label Grid.Column="1" Text="{Binding Title}" TextColor="{Binding Color}" FontSize="Medium" VerticalOptions="Center"/>
                        <Label Grid.Column="2" Text="5" TextColor="Black" FontSize="Medium" VerticalOptions="Center"/>
                    </Grid>

                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>


    </ListView>

    <BoxView VerticalOptions="Center" HorizontalOptions="FillAndExpand" HeightRequest="1" Color="#5b5d68"></BoxView>

    <Grid Padding="5,10" BackgroundColor="#e8e8e8">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="30" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="60" />
            <RowDefinition Height="60" />
        </Grid.RowDefinitions>

        <Image Grid.Column="0" Grid.Row="0" Source="ic_date_range_black_48dp.png" VerticalOptions="Center"/>
        <Label Grid.Column="1" Grid.Row="0" Text="Create List" TextColor="Gray" FontSize="Medium" VerticalOptions="Center"/>
        <Image Grid.Column="0" Grid.Row="1" Source="ic_date_range_black_48dp.png" VerticalOptions="Center"/>
        <Label Grid.Column="1" Grid.Row="1" Text="Settings" TextColor="Gray" FontSize="Medium" VerticalOptions="Center"/>
    </Grid>

</StackLayout>

后果

谢谢

1 回复 | 直到 8 年前

1

2

Billy Liu - MSFT 8 年前

我认为您需要在代码中设置listview的ItemsSource。
例如:

    public ListView ListView;
    public MasterPage1()
    {
        InitializeComponent();
        ListView = ItemListview;
        List<List<MasterPageItem>> masterPageItemGroup = new List<List<MasterPageItem>>(){
        new List<MasterPageItem>(){
            new MasterPageItem() { Title = "All Tasks", IconSource = "ic_date_range_black_48dp.png", Color = "Black" }
        },
        new List<MasterPageItem>(){
             new MasterPageItem() { Title="Today", IconSource="ic_date_range_black_48dp.png",  Color="Black" },
              new MasterPageItem() { Title = "Completed", IconSource = "ic_check_black_48dp.png", Color = "Green" },
               new MasterPageItem() { Title = "InComplete", IconSource = "ic_close_black_48dp.png", Color = "Red" },
        },
        new List<MasterPageItem>(){
            new MasterPageItem() { Title="My List", IconSource="ic_date_range_black_48dp.png" , Color="Black" }
        },
        };
        ListView.ItemsSource = masterPageItemGroup;
    }

然后设置 IsGroupingEnabled 值到 true 以xaml为单位。如果要隐藏组标题,还需要设置 HasUnevenRows 到 符合事实的 并使用 ListView.GroupHeaderTemplate .在 GroupHeaderTemplate 创建 ViewCell 和设置 Height 到0。
以下是xaml:

<ListView x:Name="ItemListview" IsGroupingEnabled="true" HasUnevenRows="True">
    <ListView.Header>
        <Grid BackgroundColor="Transparent">
            <Grid.RowDefinitions>
                <RowDefinition Height="150" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid>
                <Image Source="bg.jpg" Aspect="AspectFill" />
                <StackLayout Padding="11,110,0,20" >
                    <Label  Text="AppName" TextColor="White" FontSize="Medium"  Style="{DynamicResource SubtitleStyle}"/>
                </StackLayout>
            </Grid>
        </Grid>
    </ListView.Header>         
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Grid Padding="5,10">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="30" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="30" />
                    </Grid.ColumnDefinitions>
                    <Image Source="{Binding IconSource}" VerticalOptions="Center"/>
                    <Label Grid.Column="1" Text="{Binding Title}" TextColor="{Binding Color}" FontSize="Medium" VerticalOptions="Center"/>
                    <Label Grid.Column="2" Text="5" TextColor="Black" FontSize="Medium" VerticalOptions="Center"/>
                </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>

    <ListView.GroupHeaderTemplate>
        <DataTemplate>
            <ViewCell Height="0">
                <Grid/>
            </ViewCell>
        </DataTemplate>
    </ListView.GroupHeaderTemplate>
</ListView>

结果是:

更新时间:

如何删除/隐藏所有任务上方的行?。这个不应该在那里。

似乎无法移除。但这是一个解决办法。如果删除 <RowDefinition Height="*" /> 在您的 ListView.Header ,该行将被bg隐藏。jpg。
结果: