Home/ Questions/Q 5932683
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T14:52:05+00:00

<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

  • 0
<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>

This XAML is from WPF – Easy rounded corners for anything but it doesn’t work form me =(

<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>

— EDIT —
I make borders sizes to auto and change source of image to an image from a link
when window loaded border size becomes as image size but image not shown !!!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You forgot the Grid that makes the mask and the image siblings and nested the image in the mask. and you forgot to set the background of the mask.

    This works:

    <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