2012-06-08 95 views
1

我需要并排放置图像,并需要在每个图像下方放置一个小图像图标。请帮助我如何设计?任何示例请让我知道..如何在网格中的图像内放置图像?

如何将userimage放置在一个小图像动态基于condition..please帮助我..

+1

可能重复[如何显示这样的图像在Windows Phone 7的?](http://stackoverflow.com/questions/10946553/how-to -show-images-like-this-in-windows-phone-7) – ZombieSheep

+0

请不要继续添加与以前相同的问题。如果你想添加更多信息,请更新原始问题,而不是创建一个全新的问题 - 这对任何人都没有帮助 – ZombieSheep

回答

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> 

enter image description here

+0

如果你能在这张截图中看到我在每张图片上添加了一点搜索图标。您可以更好地在蓝色屏幕上看到此图标。我没有小图标,所以我使用了这个图标,但是它并不像png那么清晰。 :) –

+0

谢谢@ Arslan.Can你告诉我你如何设置小图像的边距? – WP7

+0

我将所有控件放置在堆叠面板中,并将其放置在底部。我正在给右边和底部留出边缘以获得所需的形状。请查看silverlight控件。希望对你有帮助 –

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

任何样品请让我知道。 – WP7

0
<StackPanel> 
    <StackPanel Orientation="Horizontal"> 
     <Image Source="Firstimage" /> 
     <Image Source="Secondimage" /> 
    </Stackpanel> 
    <StackPanel Orientation="Horizontal"> 
     <Image Source="Firsticon" /> 
     <Image Source="Secondicon" /> 
    </Stackpanel> 
</StackPanel> 

但在这里,你必须做出一些更改图标的StackPanel如设置一定的余量,序,使其对准实际上 图片。

这仅仅是一种选择,你还可以使用Grid的由核子

0

如果你想显示您的图片在列表框,然后把这个包的方式在画布面板,你可以设置wrappanel的方向以及回答。 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> 

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

+0

嗨,请告诉我如何设计屏幕像上面的屏幕截图如何将图像放置在小图像和文本块....如何给项目容器的风格。 – WP7

+0

我使用上面的代码来绑定项目以及如何设计屏幕,就像上面的屏幕截图一样。 – WP7

+0

你能帮我吗。 – WP7