Xamarin Forms DevExpress Grid单元格weight与reps间加分隔线及表头定制问询

这个需求完全可以实现，你使用的DevExpress Grid的TemplateColumn支持完全自定义单元格内容与列头样式，按照以下方式修改代码即可：

修改方案 #

1. 实现单元格内weight与reps的分隔线 #

你可以在单元格的布局中插入BoxView控件作为分隔线，通过调整它的宽/高、颜色、边距即可控制分隔线的粗细、样式和位置。

2. 实现列头weight | rep样式 #

通过TemplateColumn的HeaderTemplate属性自定义列头布局，不需要使用默认的Caption属性渲染列头。

完整修改后的代码 #

<dxg:TemplateColumn FieldName="PU" 
   IsReadOnly="true" AllowSort="False" MinWidth="200">
    <!-- 自定义列头，实现weight | rep样式 -->
    <dxg:TemplateColumn.HeaderTemplate>
        <DataTemplate>
            <Grid HorizontalOptions="Center" VerticalOptions="Center">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <Label Text="weight" TextColor="White" Grid.Column="0" Margin="0,0,4,0"/>
                <BoxView WidthRequest="1" BackgroundColor="White" Grid.Column="1" VerticalOptions="Fill" Margin="0,2"/>
                <Label Text="rep" TextColor="White" Grid.Column="2" Margin="4,0,0,0"/>
            </Grid>
        </DataTemplate>
    </dxg:TemplateColumn.HeaderTemplate>

    <dxg:TemplateColumn.DisplayTemplate>
        <DataTemplate>
            <Grid VerticalOptions="Center" Padding="15, 0, 0, 0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <!-- 运动类型行 -->
                <Label TextColor="White" Text="{Binding Item.Type, StringFormat ='Pull Up Type: {0}'}" Grid.Row="0" Margin="0,0,0,6"/>
                <!-- weight和reps行，中间加分隔线 -->
                <Grid Grid.Row="1">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Label TextColor="White" Text="{Binding Item.PU, StringFormat ='{0}'}" Grid.Column="0" Margin="0,0,8,0"/>
                    <!-- 分隔线，WidthRequest控制粗细，BackgroundColor控制颜色 -->
                    <BoxView WidthRequest="1" BackgroundColor="White" Grid.Column="1" VerticalOptions="Fill"/>
                    <Label TextColor="White" Text="{Binding Item.PUReps, StringFormat ='{0}'}" Grid.Column="2" Margin="8,0,0,0"/>
                </Grid>
            </Grid>
        </DataTemplate>
    </dxg:TemplateColumn.DisplayTemplate>
</dxg:TemplateColumn>

参数调整说明 #

• 分隔线粗细：修改BoxView的WidthRequest属性即可，数值越大线条越粗
• 分隔线颜色：修改BoxView的BackgroundColor属性即可匹配设计稿
• 列头/单元格文字间距：调整对应Label的Margin属性即可

内容的提问来源于stack exchange，提问作者dotnetdevcsharp