1

我需要并排放置图像，并且需要在每个图像下方放置一个小图像图标。请帮助我如何设计？任何样品请告诉我..

如何根据条件动态地将用户图像放在一个小图像中..请帮助我..

4

4 回答 4

3

我为你做了简单的原型。我不能为你制作整个屏幕。这是我从您的评论和屏幕截图中得到的基本信息。请参阅下面的 XAML 和屏幕截图：

 <ListBox Name="lstImages" VerticalAlignment="Top">
                <ListBox.ItemContainerStyle>
                    <Style TargetType="ListBoxItem">
                        <Setter Property="Padding" Value="0,0,0,-15" />
                        <Setter Property="Margin" Value="2"/>
                    </Style>
                </ListBox.ItemContainerStyle>
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <toolkit:WrapPanel>
                        </toolkit:WrapPanel>
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel>
                            <Image Height="100" Width="110" Source="{Binding BigImageSource}" VerticalAlignment="Top"/>
                            <Image Height="10" Width="10" Source="{Binding SmallImageSource}" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,-35,10,0"/>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>

在此处输入图像描述

于 2012-06-08T11:44:29.987 回答
0

用这个

<Grid>
  <Grid.ColumnDefinitions>
    <ColumnDefinition/>
    <ColumnDefinition/>   
  </Grid.ColumnDefinitions>
    <Grid Grid.Column="0">
      <Grid.RowDefinitions>
      <RowDefinition/>
      <RowDefinition/>
     </Grid.RowDefinitions>
       <Image Source="Your image" Grid.Row="0"/>
       <Image Source="Your small icon" Grid.Row="1"/>
  </Grid>

<Grid Grid.Column="1">
  <Grid.RowDefinitions>
    <RowDefinition/>
    <RowDefinition/>
  </Grid.RowDefinitions>
   <Image Source="Your image" Grid.Row="0"/>
   <Image Source="Your small icon" Grid.Row="1"/>
</Grid>

</Grid>
于 2012-06-08T06:29:35.160 回答
0 
<StackPanel>
    <StackPanel Orientation="Horizontal">
      <Image Source="Firstimage" />
      <Image Source="Secondimage" />
    </Stackpanel>
    <StackPanel Orientation="Horizontal">
      <Image Source="Firsticon" />
      <Image Source="Secondicon" />
    </Stackpanel>
</StackPanel>

但是在这里您必须对图标堆栈面板进行一些更改，例如设置一些边距，以使其与实际图像对齐。

这只是一种选择，您也可以使用核子回答的网格

于 2012-06-08T06:52:33.683 回答
0

如果你想在列表框中显示你的图像，然后在环绕面板中包裹这种方式，你也可以设置包裹面板的方向。Wrappanel 位于 windows phone 7 的 silverlight 工具包中。 

                         <ListBox Name="lstImages">
                                <ListBox.ItemContainerStyle>
                                    <Style TargetType="ListBoxItem">
                                        <Setter Property="Padding" Value="-15" />
                                        <Setter Property="Margin" Value="0"/>
                                    </Style>
                                </ListBox.ItemContainerStyle>
                                <ListBox.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <toolkit:WrapPanel>
                                        </toolkit:WrapPanel>
                                    </ItemsPanelTemplate>
                                </ListBox.ItemsPanel>
                                <ListBox.ItemTemplate>
                                    <DataTemplate>
                                  <stackpanel>
                                  <Image Source="Your image" />
                                  <Image Source="Small image" />
                                  </stackpanel>
                                    </DataTemplate>
                                </ListBox.ItemTemplate>
                            </ListBox>

并将此列表框与您的数据集合绑定。

于 2012-06-08T07:30:32.760 回答