xaml - Xamarin DataGrid 标题垂直向下

Question

有谁知道是否可以将标题更改为按行而不是按列？目前它看起来像这样

代码

<dg:DataGrid HeaderHeight="50"
     BorderColor="#CCCCCC" HeaderBackground="#E0E6F8">
<dg:DataGrid.Columns>
    <dg:DataGridColumn Title="Zone 1"/>
    <dg:DataGridColumn Title="Zone 2"/>
    <dg:DataGridColumn Title="Zone 3"/>
    <dg:DataGridColumn Title="Zone 4"/>
    <dg:DataGridColumn Title="Zone 5"/>
    <dg:DataGridColumn Title="Zone 6"/>
</dg:DataGrid.Columns>

我希望它是

我尝试删除标题并将标题标题附加为我的视图模型类中的行。它有效，但需要做更多的工作。只是想知道是否还有其他方法可以实现此结果？

标签： xamlxamarin.formsdatagrid

Answer 1

插件DataGrid不支持这样的功能。

选项1：

您可以使用 nuget 中的库Syncfusion.Xamarin.SfDataGrid。文档可用，您可以通过登录 LinkedIn 或 XING 获得我们完整产品的免费许可证。检查https://www.syncfusion.com/downloads/communitylicense?utm_source=nuget&utm_medium=listing。

选项 2：

实际上，您可以使用BindableLayout来实现这样的布局

在xml中

<ScrollView Orientation="Horizontal" >
    <StackLayout Orientation="Horizontal"  VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" BindableLayout.ItemsSource="{Binding Teams}">
        <!-- Place new controls here -->
        <BindableLayout.ItemTemplate>

            <DataTemplate>

                <Frame Padding="0" Margin="{Binding Margin}">
                    <Grid RowSpacing="0.1" ColumnSpacing="0">

                        <Grid.RowDefinitions >
                            <RowDefinition Height="50" />
                            <RowDefinition Height="50" />
                            <RowDefinition Height="50" />
                        </Grid.RowDefinitions>

                        <Grid.ColumnDefinitions>

                            <ColumnDefinition Width="100"  />

                        </Grid.ColumnDefinitions>


                        <Frame BackgroundColor="{Binding BgColor}"  Grid.Row="0" Grid.Column="0" Padding="10,0" BorderColor="Black" >

                            <Label BackgroundColor="Transparent" Text="{Binding Name}" TextColor="Black" FontSize="20" VerticalTextAlignment="Center"/>

                        </Frame>

                        <Frame BackgroundColor="{Binding BgColor}" Grid.Row="1" Grid.Column="0" Padding="10,0" BorderColor="Black" >

                            <Label  BackgroundColor="Transparent" Text="{Binding Win}" TextColor="Black" FontSize="20" VerticalTextAlignment="Center" />

                        </Frame>



                        <Frame BackgroundColor="{Binding BgColor}" Grid.Row="2" Grid.Column="0" Padding="10,0" BorderColor="Black" >

                            <Label Text="{Binding Home}" TextColor="Black" FontSize="20" VerticalTextAlignment="Center"/>

                        </Frame>



                    </Grid>
                </Frame>


            </DataTemplate>

        </BindableLayout.ItemTemplate>



    </StackLayout>
</ScrollView>

在后面的代码中

public class MyViewModel
{
    public ObservableCollection<Team> Teams { get; set; }
    public MyViewModel()
    {
        Teams = new ObservableCollection<Team>();

        Teams.Add(new Team() { Home = "Zone2", Win = "Zone3", Name = "Zone1", Margin = new Thickness(0,0,-10,0),BgColor=Color.LightGray }); ;
        Teams.Add(new Team() { Home = "333", Win = "222", Name = "111", Margin = new Thickness(0, 0, -10, 0), BgColor = Color.White });
        Teams.Add(new Team() { Home = "333", Win = "222", Name = "111", Margin = new Thickness(0, 0, -10, 0), BgColor = Color.White });
        Teams.Add(new Team() { Home = "333", Win = "222", Name = "111", Margin = new Thickness(0, 0, -10, 0), BgColor = Color.White });
        Teams.Add(new Team() { Home = "333", Win = "222", Name = "111", Margin = new Thickness(0, 0, -10, 0), BgColor = Color.White });
        Teams.Add(new Team() { Home = "444", Win = "555", Name = "666", Margin = new Thickness(0, 0, 0, 0), BgColor = Color.White });

    }
}


public class Team
{

    public string Name { get; set; }
    public string Win { get; set; }
    public string Loose { get; set; }
    public string Home { get; set; }
    public string Percentage { get; set; }
    public Color BgColor { get; set; }
    public Thickness Margin { get; set; }

}