垂直对齐不起作用-Windows Phone 8.1

Question

下面是我在windows Phone 8.1中的XAML部分。

<Grid Background="#FAE8C9">
        <ListView x:Name="articleListing">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid Margin="5,5,5,5">
                        <StackPanel  Background="#FFFEDC" RequestedTheme="Light" Tapped="RedirectToArticle" Tag="{Binding URL}" >
                            <StackPanel Orientation="Horizontal" >
                                <StackPanel Margin="10 0 0 0" Width="{Binding Width}">
                                    <StackPanel  VerticalAlignment="Top">
                                    <TextBlock TextWrapping="Wrap"  Text="{Binding HeadLine}" FontSize="22"/>
                                    </StackPanel>
                                    <StackPanel Orientation="Horizontal" VerticalAlignment="Bottom">
                                        <Image Source="/Images/cal.png" Width="20" />
                                        <TextBlock Text="{Binding UpdatedAtDate}" FontSize="18" Foreground="#CEBFA5" />
                                        <Image Source="/Images/clock.png" Width="20"/>
                                        <TextBlock Text="{Binding UpdatedAtTime}" FontSize="18" Foreground="#CEBFA5" />
                                    </StackPanel>
                                </StackPanel>
                                <StackPanel Background="Transparent" Width="{Binding Width}" >
                                    <Image Source="{Binding ImageURL}" />
                                </StackPanel>
                            </StackPanel>
                        </StackPanel>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>

在这篇文章中，我试图使下面的部分与底部垂直对齐。但它不起作用。

<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom">
                                        <Image Source="/Images/cal.png" Width="20" />
                                        <TextBlock Text="{Binding UpdatedAtDate}" FontSize="18" Foreground="#CEBFA5" />
                                        <Image Source="/Images/clock.png" Width="20"/>
                                        <TextBlock Text="{Binding UpdatedAtTime}" FontSize="18" Foreground="#CEBFA5" />
                                    </StackPanel>
                                </StackPanel>

请帮我解决这个问题。感谢

Answer 1

大多数XAML容器（如列表视图和堆栈面板）从上到下填充，其高度等于其内容的高度之和。

如果你有想要出现在容器底部的东西，你有以下选择：

1. 使用所需尺寸的画布，并明确地将每个元素放置在画布上。这会让您失去XAML的一大好处，即它会对可用空间中的更改做出反应，并为您重新定位元素
2. 在布局中插入一些填充，以强制元素位于您希望的位置。同样，您可能会失去更改视图大小等功能

您可能会发现，使用Grid而不是StackPanel可以更好地控制位置，但通常行高和列宽由其中包含的元素的大小决定。

Answer 2

使用此代码。

<Grid Background="#FAE8C9">
            <ListView x:Name="articleListing">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <Grid Margin="5,5,5,5">
                            <StackPanel  Background="#FFFEDC" RequestedTheme="Light" Tapped="RedirectToArticle" Tag="{Binding URL}" >
                                <StackPanel Orientation="Horizontal" >
                                    <Grid Margin="10 0 0 0" Width="{Binding Width}">
                                        <StackPanel  VerticalAlignment="Top">
                                            <TextBlock TextWrapping="Wrap"  Text="{Binding HeadLine}" FontSize="22"/>
                                        </StackPanel>
                                        <StackPanel Orientation="Horizontal" VerticalAlignment="Bottom">
                                            <Image Source="/Images/cal.png" Width="20" />
                                            <TextBlock Text="{Binding UpdatedAtDate}" FontSize="18" Foreground="#CEBFA5" />
                                            <Image Source="/Images/clock.png" Width="20"/>
                                            <TextBlock Text="{Binding UpdatedAtTime}" FontSize="18" Foreground="#CEBFA5" />
                                        </StackPanel>
                                    </Grid>
                                    <StackPanel Background="Transparent" Width="{Binding Width}" >
                                        <Image Source="{Binding ImageURL}" />
                                    </StackPanel>
                                </StackPanel>
                            </StackPanel>
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </Grid>

这可能对你有用。