Windows Phone 8.1 ListView column width

本文关键字：column width ListView Phone Windows | 更新日期: 2023-09-27 18:03:39

我想做一个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

Windows Phone 8.1 ListView column width

就像你说的，看起来你的图片中有两列。我还从你的标记中看到，你的列表和按钮上都有12像素的空白。这意味着所有UI元素之间至少要有24像素的边距。从图片上看，我看到UI元素之间的距离接近60像素。我们应该进一步分解，看看额外的尺寸是从哪里来的。

为了调试的目的，你可以添加一个临时的背景颜色到你的ListView和一个不同的背景颜色到你的DataTemplate项目的StackPanel。然后重新截图，看看哪些元素占用了所有的空间。我打赌是ListViewItem。您可能需要修改ItemContainerStyle，以删除任何内置的不可见的UI元素占用空间。

相关文章：