Windows Phone 8.1 ListView列宽

Question

我正在尝试创建一个有2列的Windows Phone页面，这些列填满了它们的所有空间，从而使矩形按钮类似于Windows Phone菜单。令人惊讶的是，这比预期的要棘手。我有工作的布局，和2列，但是，他们是小矩形，没有填充他们的宽度或高度。

我不想使用任何"Width = 250“之类的东西。我纯粹对响应式布局解决方案感兴趣。我当前的代码如下所示。我已经在这里待了两天了。

    <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元素。