Windows Phone - 新闻版块

Question

我正在尝试制作一个包含我想在滚动查看器中实现的新闻的块。该块应如下所示：

右上角分辨率的图片（分辨率：50*50）；

文字与图片一起包裹;

<ScrollViewer Grid.Row="1" x:Name="ContentRoot" Margin="20,0,20,0">
    <StackPanel>
        <Button Width="Auto" Height="150">
            /*Text and picture here like described before*/
        </Button>
        <Button Width="Auto" Height="150">
            /*Text and picture here like described before*/
        </Button>
    </StackPanel>
</ScrollViewer>

PS : 我只想设计它，而不是尝试制作功能性应用程序。

Answer 1

您可以在 Button 中使用 Grid 和 ColumnDefinitions，例如：

 <Button Width="Auto"
                    Height="50"
                    HorizontalContentAlignment="Stretch">
                <Grid Height="50">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>

                    <TextBlock Text="Sample text - lorem ipsum dolor sit amet"
                               TextWrapping="Wrap"
                               TextAlignment="Left"
                               VerticalAlignment="Top" 
                               Margin="12"/>

                    <Image Grid.Column="1"
                           Source="SampleImageSourceHere"
                           HorizontalAlignment="Right"
                           Width="50" />
                </Grid>
            </Button>

注意：这只是示例，我没有测试，但您可以尝试调整您的视图。希望对你有帮助。

此外，如果您要向列表中添加大量项目（按钮），我建议使用 ListView。 ListView支持虚拟化，避免内存问题

如果您有项目的源集合，您只需使用项目模板创建 ListView 并设置 ItemsSource。我在这里找到了关于它的帖子：

Windows Phone - 新闻版块

Windows Phone - News block

xaml

windows-phone-7

windows-phone-8

windows-phone-8.1