Как перекрыть границу с изображением и добавить эффект тени на границу? - PullRequest
Новая
       1

Как перекрыть границу с изображением и добавить эффект тени на границу?

2 голосов
/ 23 февраля 2012

Я пытался перекрыть границу с изображением внутри, но я обнаружил, что он не может быть применен, в то время как я видел, что некоторые приложения могут это сделать.Любая идея?

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>

но, похоже, не поддерживает эффект.+ Я обнаружил, что на каком-то форуме говорилось, что они сняли эффект из-за производительности ~ Есть идеи, как это сделать?

Ответы [ 2 ]

1 голос
/ 23 февраля 2012

Привет, я нахожу это для тебя, чувак ... Попробуйте это, вы можете получить перекрытое изображение на границе 

       <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
 }
0 голосов
/ 23 февраля 2012

Постарайтесь, чтобы прямоугольник и изображение были в стеке 

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

Попробуйте выровнять поле изображения слева от панели стека, а высота прямоугольника должна быть меньше высоты изображения. Попробуйте также уменьшить угловой радиус прямоугольника.

...