如何让UWP DataTemplate使用它的ListView的大小?

时间:2016-09-11 16:11:55

标签: xaml uwp

在下面的示例中,ListView控件了解其父容器RelativePanel的宽度。在设计器中查看布局时,很明显ListView填充到RelativePanel的整个宽度。但是,即使DataTemplate中的RelativePanel也要求填写父级的宽度,它也会忽略“左对齐”和“右对齐”。我似乎无法找到任何方法让它识别它的父容器的大小。

这里的任何建议都将不胜感激。

            <RelativePanel RelativePanel.AlignLeftWithPanel="True"
                          RelativePanel.AlignRightWithPanel="True">
                <ListView Name="LstOrders" ItemsSource="{x:Bind Vm.OrdersList, Mode=OneWay}" 
                          SelectionMode="None"
                          RelativePanel.AlignLeftWithPanel="True"
                          RelativePanel.AlignRightWithPanel="True"
                          Margin="0,5,0,0">
                    <ListView.ItemTemplate>
                        <DataTemplate x:DataType="genericOrder:OrderThumbnailVm">
                            <RelativePanel Name="PanelThumbnail" Margin="0,0,20,0">
                                <RelativePanel Name="PanelOrderDetails" 
                                               Background="BlueViolet"
                                               RelativePanel.AlignLeftWithPanel="True"
                                               RelativePanel.AlignRightWithPanel="True">
                                    <TextBlock Text="{x:Bind Name}" Margin="8,0,0,0" VerticalAlignment="Center"
                                               Foreground="{x:Bind Deleted, Mode=OneWay, Converter={StaticResource DeletedColor}}"
                                               TextWrapping="WrapWholeWords"
                                               RelativePanel.AlignLeftWithPanel="True"
                                               RelativePanel.LeftOf="BtnDeleteRestore"/>
                                    <Button Name="BtnDeleteRestore" 
                                            Content="{x:Bind DisplayDelete, Mode=OneWay}" 
                                            Click="{x:Bind DeleteOrder}"
                                            RelativePanel.AlignRightWithPanel="True"
                                            FontSize="10"
                                            Height="20"
                                            Padding="0"
                                            Visibility="{x:Bind ShowDeleteButton, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}"/>
                                </RelativePanel>
                            </RelativePanel>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </RelativePanel>

1 个答案:

答案 0 :(得分:2)

这是因为HorizontalContentAlignment ListViewItem的值为Left,我们需要覆盖它并使其成为Stretch。您可以在ListViewItem styles and templates

中找到它

要解决这个问题,正如我所说,我们需要覆盖它的风格,例如:

<ListView>
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            </Style>
        </ListView.ItemContainerStyle>
        <ListView.ItemTemplate>
            <DataTemplate >
                <RelativePanel>
                  ...
                </RelativePanel>
            </DataTemplate>
        </ListView.ItemTemplate>
</ListView>