XAML 布局问题答案

【问题标题】：XAML Layout ProblemsXAML 布局问题
【发布时间】：2017-04-11 03:55:09
【问题描述】：

我是 UWP 的新手，一天中的大部分时间都在为应该是一些简单的 XAML 而苦苦挣扎，但我无法让它按照我想要的方式进行布局。我想要达到的目标如下所示。

在第 1 列中水平和垂直居中的单个文本。 2 条文本在第 2 列中左对齐。在第 3 列中水平和垂直居中的单个文本。

这是我目前拥有的 XAML。我知道我需要使用列，但即使尝试这样做，我也无法获得正确的布局。

<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TramTimes"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
x:Class="TramTimes.ServicesPage"
mc:Ignorable="d">

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <ListView x:Name="list" IsItemClickEnabled="False" SelectionMode="None">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <StackPanel>
                        <TextBlock Text="{Binding Destination}"/>
                        <TextBlock Text="{Binding Company}"/>
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>
</Page>

如果能帮助我按照我需要的方式查看列表，我们将不胜感激。

编辑

这是我现在使用的代码和我得到的结果 - 谁能帮我让网格填满列表的整个宽度？

<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TramTimes"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:Maps="using:Windows.UI.Xaml.Controls.Maps"
x:Class="TramTimes.ServicesPage"
mc:Ignorable="d">

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Maps:MapControl x:Name="map" Height="300" VerticalAlignment="Top"/>
    <ListView x:Name="list" IsItemClickEnabled="False"  Margin="0,300,0,0" SelectionMode="None">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="1*"/>
                        <ColumnDefinition Width="3.5*"/>
                        <ColumnDefinition Width="1*"/>
                    </Grid.ColumnDefinitions>

                    <TextBlock Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Scheduled}"/>

                    <StackPanel Grid.Column="2">
                        <TextBlock Text="{Binding Destination}"/>
                        <TextBlock Text="{Binding Company}"/>
                    </StackPanel>

                    <TextBlock Grid.Column="3" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Route}"/>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>
</Page>

【问题讨论】：

标签： c# xaml uwp

【解决方案1】：

我已经解决了这个问题 - 忘记了列引用是基于 0 的，这没有帮助，还添加了下面的内容，这使得网格填充了列表的整个宽度。

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

【讨论】：

【解决方案2】：

您可以在模板中按比例宽度向网格中添加列：

<DataTemplate>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="3.5*"/>
            <ColumnDefinition Width="1*"/>
        </Grid.ColumnDefinitions>

        <TextBlock Text="{Binding Destination}" Grid.Column="0"/>
        <TextBlock Text="{Binding Company}" Grid.Column="1"/>
        <TextBlock Text="3rd column" Grid.Column="2"/>
    </Grid>
</DataTemplate>

详细了解 UWP 中的布局面板，特别是 Grid here。

【讨论】：

感谢您的代码 - 我尝试过类似的方法，但仍然遇到问题。我已经编辑了上面的帖子，以包含当前代码和它当前外观的新屏幕截图。它就像网格没有填充列表的宽度，我也无法得到它。
解决了，见我上面的回答。谢谢。
是的，对不起，我忘了。