Question

我尝试将边框与内部图像重叠，但我发现它无法应用，而我看到一些应用程序能够这样做。任何的想法？

Something like this

   <Border BorderBrush="White" BorderThickness="1" Margin="20,20" Height="120" Width="410" >
                                    <StackPanel Orientation="Horizontal">
                                        <Canvas>
                                            <Image Margin="-30,0,0,45" VerticalAlignment="Top" Source="{Binding Path=ListboxImage}" Width="100" Height="150" />
                                        </Canvas>
                                        <StackPanel>
                                            <TextBlock Margin="135,8" Width="300" TextWrapping="Wrap" VerticalAlignment="Top" HorizontalAlignment="Left" Text="{Binding Path=ListboxName}" FontSize="{StaticResource PhoneFontSizeExtraLarge}"/>
                                            <TextBlock Margin="150,0,0,8" Width="300" VerticalAlignment="Top" HorizontalAlignment="Left" Text="{Binding Path=ListboxDescription}" />
                                        </StackPanel>
                                    </StackPanel>
                                </Border>

虽然我试图在边框上添加一些阴影效果。

<Border>
    <Border.Effect>
    .......
    </Border.Effect>

</Border>

但它似乎并不支持这种效果。 +我发现一些论坛说他们因性能起飞效果了〜知道怎么做吗？

Answer 1

嗨，我找到了你的男人...试试这个你可以在边框中得到重叠的图像

       <ListBox ItemsSource="{Binding alldata}" Height="500" HorizontalAlignment="Left"   Margin="12,160,0,0" Name="listBox3" VerticalAlignment="Top" Width="438" Background="Black">
        <ListBox.ItemTemplate>
            <DataTemplate>

                <Border BorderThickness="1" BorderBrush="White">
                <StackPanel Height="250" Orientation="Vertical" Name="stackPanel1" Width="400" >


                    <Border Margin="30,40,0,120" BorderThickness="1" BorderBrush="White">
                            <Canvas Height="100">
                                <TextBlock Text="Catalogue" Margin="160,50">   </TextBlock>
                            </Canvas>
                        </Border>

                        <Image Height="150" Width="160" Margin="-400,-400,-200,0" Source="{Binding image}">

                        </Image>


                    </StackPanel>
                </Border>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

在mainpage.cs中

添加代码

      Uri uri = new      Uri("http://d1mu9ule1cy7bp.cloudfront.net/2012/media/catalogues/47/pages/p_"+ i +"/thump.jpg", UriKind.Absolute);
            ImageSource imgSource = new BitmapImage(uri);
            Image image = new Image();

alldata data = new alldata(){image = img.source, text = "catalogue"};


  public class alldata
 {
  public imagesource image
  public string text
 }

Answer 2

尝试在堆栈中放置矩形和图像

          <StackPanel Orientation="Horizontal">
             <border>
              <rectangle height="50">
              <textblock text={}>
              </rectangle>
              </border>
                  <Image Margin="-30,0,0,45"  height = "75"/>
          </Stackpanel>

尝试将图像边距对齐在stackpanel的左侧，矩形高度应小于图像高度。尝试减小矩形的角半径，这也有帮助。

如何重叠边框与图像并在边框上添加阴影效果？

2 个答案: