2011-05-21 30 views
6
<Page 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Background="Black"> 
    <!-- Rounded yellow border --> 
    <Border BorderThickness="3" BorderBrush="Yellow" CornerRadius="10" Padding="2" 
     HorizontalAlignment="Center" VerticalAlignment="Center"> 
     <Grid> 
     <!-- Rounded mask (stretches to fill Grid) --> 
     <Border Name="mask" Background="White" CornerRadius="7"/> 
     <!-- Main content container --> 
     <StackPanel> 
      <!-- Use a VisualBrush of 'mask' as the opacity mask --> 
      <StackPanel.OpacityMask> 
       <VisualBrush Visual="{Binding ElementName=mask}"/> 
      </StackPanel.OpacityMask> 
      <!-- Any content --> 
      <Image Source="http://chriscavanagh.files.wordpress.com/2006/12/chriss-blog-banner.jpg"/> 
      <Rectangle Height="50" Fill="Red"/> 
      <Rectangle Height="50" Fill="White"/> 
      <Rectangle Height="50" Fill="Blue"/> 
     </StackPanel> 
     </Grid> 
    </Border> 
</Page> 

Bu XAML WPF – Easy rounded corners for anything gelen ama beni formu çalışmıyor = (WPF: Yuvarlak-Köşeler Görüntüler

<Border Canvas.Left="55" 
     Canvas.Top="30" 
     Width="100" 
     Height="Auto" 
     Margin="12,12,8,0" 
     VerticalAlignment="Top" 
     BorderBrush="#FF3B5998" 
     BorderThickness=".5" 
     CornerRadius="18"> 
    <Border.Effect> 
     <DropShadowEffect BlurRadius="5" 
          Opacity=".5" 
          ShadowDepth="3" /> 
    </Border.Effect> 
    <Border Name="ReceiverColor" 
      BorderBrush="#FF96B2E4" 
      BorderThickness="6" 
      CornerRadius="15"> 
     <Border Name="Mask" 
       BorderBrush="#FF3B5998" 
       BorderThickness=".5" 
       CornerRadius="13"> 
       <StackPanel> 
        <StackPanel.OpacityMask> 
         <VisualBrush Visual="{Binding ElementName=Mask}" /> 
        </StackPanel.OpacityMask> 
        <Image Name="Receiver" /> 
       </StackPanel> 
     </Border> 
    </Border> 
</Border> 

--- DÜZENLEME ---
Ben sınırları boyutları yapmak pencere yüklenen kenarlık boyutu resim boyutu olarak ortaya çıktığında ve görüntü gösterilmediğinde, görüntünün kaynağını bir görüntüden otomatik olarak değiştirin ve görüntüyü değiştirin.

+2

benim için çalışıyor wpf içinde? – biju

cevap

15

o maske ve görüntü kardeşleri ve maske içinde görüntüyü iç içe. ve maskenin arka planını kurmayı unuttun.

Bu çalışır:

<Grid> 
    <Border Canvas.Left="55" 
      Canvas.Top="30" 
      Width="100" 
      Height="Auto" 
      Margin="12,12,8,0" 
      VerticalAlignment="Top" 
      BorderBrush="#FF3B5998" 
      BorderThickness=".5" 
      CornerRadius="18"> 
     <Border.Effect> 
      <DropShadowEffect BlurRadius="5" 
           Opacity=".5" 
           ShadowDepth="3" /> 
     </Border.Effect> 
     <Border Name="ReceiverColor" 
       BorderBrush="#FF96B2E4" 
       BorderThickness="6" 
       CornerRadius="15"> 
      <Grid> 
       <Border Name="Mask" 
         Background="White" 
         BorderBrush="#FF3B5998" 
         BorderThickness=".5" 
         CornerRadius="13"> 
       </Border> 
       <StackPanel> 
        <Image Name="Receiver" 
          Source="/Images/test.jpg" /> 
        <StackPanel.OpacityMask> 
         <VisualBrush Visual="{Binding ElementName=Mask}" /> 
        </StackPanel.OpacityMask> 
       </StackPanel> 
      </Grid> 
     </Border> 
    </Border> 
</Grid> 
+0

Hayır, ilk kod makaleden geliyor ama ikinci kod benim projemden –

+2

@Ahmed Adel, Sabit. –

+0

benim için çok iyi çalıştı. – chengzi

4

bu bir ... Ne çalışmıyor

<Ellipse Width="50" Height="50"> 
     <Ellipse.Fill> 
      <ImageBrush ImageSource="http://chriscavanagh.files.wordpress.com/2006/12/chriss-blog-banner.jpg" /> 
     </Ellipse.Fill> 
    </Ellipse> 
+0

Bu çözüm, gerçek yarıçap üzerinde herhangi bir kontrol sağlamaz - ve gerçek görüntü üzerinde kontrolü kaybedersiniz. Bir Elips'e ihtiyacınız varsa iyi bir çözümdür - ama bu sorular sorar gibi yuvarlatılmış köşelerle aynı şey değildir. –