Question

我正在尝试在ListPicker中显示Tile。这意味着当用户点击ListPicker时，会弹出这样的Tile：

http://igrali.files.wordpress.com/2011/09/notestiles_thumb.png

来源：http://igrali.com/2011/09/01/how-to-use-the-coding4fun-tile-control/

我的问题是我想要像图片中那样有两列，但我的图像总是在彼此之下显示，而不是彼此相邻的两个图像。所以它看起来像这样：

http://www.imgbox.de/users/public/images/ONVAEOO7Av.png

这是我的xaml代码：

<phone:PhoneApplicationPage.Resources>
    <model:Bundesland x:Key="Bundesland"/>
    <DataTemplate x:Name="PickerFullItemTemplateBundesland">
            <coding4fun:Tile Background="Transparent" >
            <coding4fun:Tile.Content>
                <StackPanel>
                    <Image Source="{Binding Flagge, Mode=TwoWay}" Height="200" />
                    <TextBlock Text="{Binding Land}" FontSize="25"/>
                </StackPanel>
            </coding4fun:Tile.Content>
        </coding4fun:Tile>
                <!--<TextBlock Grid.Column="2" Text="{Binding Land}" FontSize="25"/>-->
    </DataTemplate>
</phone:PhoneApplicationPage.Resources>

<tool:ListPicker ItemsSource="{Binding BundeslandListe, Mode=TwoWay}" SelectedItem="{Binding Bundesland, Mode=TwoWay}" ExpansionMode="FullScreenOnly" FullModeItemTemplate="{StaticResource PickerFullItemTemplateBundesland}"/>

我的班级 Bundesland 包含图片和图片下方显示的文字

public class Bundesland
{
    public ImageSource Flagge { get; set; }
    public string Land { get; set; }

    public Bundesland()
    {
    }

    public Bundesland(ImageSource flagge, string land)
    {
        Flagge = flagge;
        Land = land;
    }
}

我也试过使用ImageTile和MetroFlow，但它仍然无效。是因为我可以将Listpicker中的项目仅显示在彼此之下而不是彼此相邻吗？

Answer 1

在您引用的博客中，作者使用WP工具包中的ListBox's ItemPanelTemplate覆盖默认WrapPanel以实现2列的显示：

<ListBox ItemsSource="{StaticResource Notes}">
    <ListBox.ItemsPanel>
      <ItemsPanelTemplate>
          <toolkit:WrapPanel />
      </ItemsPanelTemplate>
    </ListBox.ItemsPanel>

尝试通过覆盖默认ListPicker's ItemPanelTemplate来使用WrapPanel控件来执行相同的操作。例如：

<toolkit:ListPicker>
    <toolkit:ListPicker.ItemsPanel>
        <ItemsPanelTemplate>
            <toolkit:WrapPanel/>
        </ItemsPanelTemplate>
    </toolkit:ListPicker.ItemsPanel>
</toolkit:ListPicker>

ListPicker中的ImageTile无法正确显示

1 个答案: