UWP开发求助：DropDownButton无法添加至IGridList的问题

错误原因 #

你碰到的XLS0503错误，核心问题是Grid的单个单元格只能直接容纳一个子元素。你在Grid.Column="4" Grid.Row="0"的单元格里，同时放了Label和DropDownButton两个控件，直接把它们加入Grid的子元素集合，就会触发这个类型不匹配的报错。

解决方法 #

给这两个控件套一个布局容器父元素，比如StackLayout或AbsoluteLayout，把它们放在容器内部，再将容器作为Grid单元格的唯一子元素即可。

示例1：用StackLayout实现横向排列

适合需要控件左右分布的场景：

<DataTemplate>
    <ViewCell>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="50"/>
            </Grid.RowDefinitions>
            <Label Grid.Column="2" Grid.Row="0" Text="1" />
            <Label Grid.Column="3" Grid.Row="0" Text="2" />
            <!-- 用StackLayout包裹两个控件，作为Grid单元格的唯一子元素 -->
            <StackLayout Grid.Column="4" Grid.Row="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
                <Label Text="3" HorizontalOptions="Start" />
                <controls:DropDownButton HorizontalOptions="End" />
            </StackLayout>
        </Grid>
    </ViewCell>
</DataTemplate>

示例2：用AbsoluteLayout实现重叠布局

适合需要控件重叠显示的场景：

<DataTemplate>
    <ViewCell>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="50"/>
            </Grid.RowDefinitions>
            <Label Grid.Column="2" Grid.Row="0" Text="1" />
            <Label Grid.Column="3" Grid.Row="0" Text="2" />
            <!-- 用AbsoluteLayout实现控件重叠定位 -->
            <AbsoluteLayout Grid.Column="4" Grid.Row="0">
                <Label Text="3" HorizontalOptions="Start" AbsoluteLayout.LayoutBounds="0,0,AutoSize,AutoSize" />
                <controls:DropDownButton HorizontalOptions="End" AbsoluteLayout.LayoutBounds="1,0,AutoSize,AutoSize" AbsoluteLayout.LayoutFlags="PositionProportional" />
            </AbsoluteLayout>
        </Grid>
    </ViewCell>
</DataTemplate>

选择建议 #

• 若要让控件横向/纵向有序排列，选StackLayout；
• 若要精确控制控件位置或实现重叠效果，选AbsoluteLayout。

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