如何让 UWP DataTemplate 使用其 ListView 的大小? [英] How to get a UWP DataTemplate to use the sizing of it's ListView?

问题描述

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

In the example below, the ListView control understands the width of it's parent container RelativePanel. When looking a the layout in the designer, it is clear that the ListView is filling out to the full width of the RelativePanel. However, even though the RelativePanel inside the DataTemplate is also asking to fill out the width of the parent, it ignores the "align left" and "align right". I can't seem to find any way to get it to recognize it's parent container's size.

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

Any suggestions here would be appreciated.

            <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>

推荐答案

那是因为ListViewItem的Horizo​​ntalContentAlignment的值为Left，我们需要覆盖它并使其Stretch.您可以在 ListViewItem 样式和模板 中找到它.

That is because the value of HorizontalContentAlignmentof ListViewItem is Left, we need to override it and make it Stretch. You can find it in the ListViewItem styles and templates.

为了解决这个问题，正如我所说，我们需要覆盖它的样式，例如这样:

To solve this problem, as I said, we need to override its style, for example like this:

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

这篇关于如何让 UWP DataTemplate 使用其 ListView 的大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！