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

Question

下面是我的 XAML 部分 windows Phone 8.1.

<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 容器，例如列表视图和堆栈面板，都是从上到下填充的，并且它们的高度等于其内容高度的总和。

如果您有想要显示在容器底部的内容，您有以下选择：

使用所需尺寸的 canvas 并将每个元素明确放置在 canvas 上。这让你失去了 XAML 的一大好处 - 即它对可用 space 的变化做出反应并为你重新定位元素。
在您的布局中插入一些填充以强制元素位于您希望的位置。同样，您可能无法更改视图大小等。

您可能会发现使用 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>

这可能适合你。

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

Vertical alignment is not working -Windows Phone 8.1

windows-phone-8.1