Question

我尝试制作一个包含2列的Windows Phone页面，其中列填充了所有空间，以使矩形按钮类似于Windows Phone菜单。令人惊讶的是，这比预期的要复杂。我有布局工作，然而，2列，它们是小矩形，没有填充它们的宽度或高度。

我不想使用任何＆＃34;宽度= 250＆＃34;管他呢。我对响应式布局解决方案纯粹感兴趣。我目前的代码如下。我现在在这里待了大约2天......

    <ListView
        Grid.Row="1"
        ItemsSource="{Binding Locations}"
        HorizontalAlignment="Stretch"
        HorizontalContentAlignment="Stretch"
        VerticalContentAlignment="Stretch"
        Margin="12">
        <ListView.ItemTemplate>
            <DataTemplate>
                <StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                    <Button
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"
                    Margin="12"
                    BorderThickness="0">
                        <Button.Template>
                            <ControlTemplate>
                                <StackPanel Background="{ThemeResource PhoneAccentBrush}">
                                    <Image />
                                    <TextBlock
                                    TextAlignment="Center"
                                    Text="{Binding Name}" />
                                </StackPanel>
                            </ControlTemplate>
                        </Button.Template>
                    </Button>
                </StackPanel>

            </DataTemplate>
        </ListView.ItemTemplate>

        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapGrid Orientation="Horizontal" 
                          MaximumRowsOrColumns="2" 
                          HorizontalAlignment="Center" 
                          VerticalChildrenAlignment="Stretch" 
                          HorizontalChildrenAlignment="Stretch" />
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>

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

这是目前的截图。正如你所看到的，这些按钮有一个巨大的余量，实际上并没有由我提供......

http://gyazo.com/3c949bd9a6ac5d08b3e40bd5c9bb0e7b

Answer 1

正如您所说，您的照片中看起来有两列。我还从您的标记中看到您的列表上有12个像素的边距，按钮上有12个像素的边距。这意味着您将在所有UI元素之间保留至少24个像素的边距。看一下图片，我看到UI元素之间的距离接近60像素。我们应该进一步细分，看看额外的尺寸来自哪里。

出于调试目的，您可以为ListView添加临时背景颜色，并为DataTemplate项目的StackPanel添加不同的背景颜色。然后拍摄一个新截图，看看哪些元素消耗了所有空间。我敢打赌它是ListViewItem。您可能希望修改ItemContainerStyle以删除占用空间的任何内置不可见UI元素。

Windows Phone 8.1 ListView列宽

1 个答案: