none
WPF : Rounded-Courners Images

    Question

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


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


    Saturday, May 21, 2011 2:14 PM

Answers

  • Hi WaveCode,

    In your second code snippet, the border named "Mask" doesn't have a background. This border is later used as a OpacityMask for the content, if you do not assign a brush to its background, the relevant part of the content, such as the image, will become transparent.

    Simply set its background to the white as in the first code snippet could fix the problem.

    If you still have any questions or concerns about this issue, please feel free to let me know.

    Best regards,


    Min Zhu [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Monday, May 23, 2011 7:42 AM
    Moderator

All replies

  • Hi,

    I am not sure what happen to your code ... why its not wokring...

    Please click the following link for a live sample.

    http://www.chriscavanagh.com/chris/silverlight/VisualImageTest/VisualImageTestTestPage.html

    I also tested in a project and its working fine.

     

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

     

    Regards,

     


    Md. Masudur Rahman
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.
    Sunday, May 22, 2011 4:27 AM
  • Hi,

    One more thing I tested in a WPF application not a WPF Browser application, 

    If need I can give you the project.

    Regards,


    Md. Masudur Rahman
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.
    Sunday, May 22, 2011 4:29 AM
  • Hi WaveCode,

    In your second code snippet, the border named "Mask" doesn't have a background. This border is later used as a OpacityMask for the content, if you do not assign a brush to its background, the relevant part of the content, such as the image, will become transparent.

    Simply set its background to the white as in the first code snippet could fix the problem.

    If you still have any questions or concerns about this issue, please feel free to let me know.

    Best regards,


    Min Zhu [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Monday, May 23, 2011 7:42 AM
    Moderator
  • Hi WaveCode,

    I am marking this issue as "Answered". If you have any new questions or concerns about this issue, please feel free to let me know.

    Thank you and have a nice day!


    Min Zhu [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Thursday, May 26, 2011 3:25 AM
    Moderator