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

如果您想要在容器底部显示某些内容，则可以选择以下选项：

使用所需尺寸的画布，并将每个元素显式放置在画布上。这会让您失去XAML的一大好处 - 即它会对可用空间的变化做出反应并为您重新定位元素。
在布局中插入一些填充，以强制元素位于您想要的位置。您可能再次失去更改视图大小等功能。

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

2 个答案: