2012-06-08 146 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