2012-06-08 5 views
1

Мне нужно разместить изображения рядом друг с другом, и вам нужно разместить один маленький значок изображения под каждым изображением. Пожалуйста, помогите мне, как спроектировать какие-либо образцы, пожалуйста, дайте мне знать.Как разместить изображения внутри изображения в сетке?

Как разместить изображение на одном маленьком изображении динамически на основе 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 как параметр некоторого запаса, чтобы сделать Симметричный его в соответствие с Настоящий изображений.

Это просто альтернатива, вы можете также использовать сетки в качестве ответил нуклонами

0

Если вы хотите, чтобы показать ваши изображения в ListBox затем обернуть этот путь в оберточной панели, и вы можете установить направление WrapPanel, а также. WrapPanel находится в SilverLight инструментария Windows Phone 7.

      <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

Смежные вопросы