1

画像を並べて配置する必要があり、各画像の下に小さな画像アイコンを 1 つ配置する必要があります。デザインの仕方を教えてください。サンプルがあれば教えてください。

条件に基づいて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 に答える