找到你要的答案

Q:Windows Phone - News block

Q:视窗电话-新闻块

I'm trying to make a block that contain news that i'd like to implement in a scroll viewer. The block should look like this :

  • Picture in the top-right resolution (with a resolution : 50*50 );
  • Text wrapped along with the picture ;

    <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 : I'd like to design it only , not trying to make a functional app.

I'm trying to make a block that contain news that i'd like to implement in a scroll viewer. The block should look like this :

  • Picture in the top-right resolution (with a resolution : 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:我只想设计它,而不是试图使功能的应用程序。

answer1: 回答1:

You can just use Grid with ColumnDefinitions inside your Button, for example:

 <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>

Note: It's only sample, I didn't test it but you can try to adjust your view. Hope it helps.

Futhermore I recommend to use a ListView if you'll add a big amount of items (Buttons) into your list. ListView supports virtualizaton and avoids memory problems.

If you have source collection of items, you can just create ListView with item template and set ItemsSource. I found thread about it here: Windows Phone ListView Binding

你可以使用网格内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支持virtualizaton避免内存问题。

如果你有项目源的收集,你可以创建ListView项模板和设置ItemsSource。我在这里发现关于这个的帖子:Windows Phone ListView结合

xaml  windows-phone-7  windows-phone-8  windows-phone-8.1