none
wpf圆角图片 RRS feed

  • 问题

  • border中包含image控件,怎样圆角

    <Window x:Class="Wpf圆角图片.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:Wpf圆角图片"
            mc:Ignorable="d"
            Title="MainWindow" Height="350" Width="525">
        <Grid>
            <Border   Background="#f9f9f9" BorderBrush="Red"  BorderThickness="6"  Width="300" Height="300"
                      CornerRadius="4" VerticalAlignment="Center" HorizontalAlignment="Center">
                <Image x:Name="img" 
                           
                               Cursor="SizeAll" Stretch="Fill" Source="s.jpg" />
            </Border>
        </Grid>
    </Window>
    

    这样子并不能让图片圆角,只是border圆角了而已。

    2017年12月7日 7:27

答案

  • Hi,

    尝试以下方法:

      <Image
                Width="90"
                Height="90"
                Source="http://sipi.usc.edu/database/misc/4.1.01.tiff">
                <Image.Clip>
                    <EllipseGeometry
                        Center="45,45"
                        RadiusX="40"
                        RadiusY="40" />
                </Image.Clip>
            </Image>
    
            <Grid Width="90" Height="90">
                <Grid.Clip>
                    <EllipseGeometry
                        Center="45,45"
                        RadiusX="40"
                        RadiusY="40" />
                </Grid.Clip>
                <Image Source="http://sipi.usc.edu/database/misc/4.1.01.tiff" />
            </Grid>
    
            <Grid>
                <Border
                    Name="myBorder"
                    Margin="1"
                    Background="White"
                    CornerRadius="250" />
                <Image Width="90" Height="90" Margin="1" Source="http://sipi.usc.edu/database/misc/4.1.01.tiff">
                    <Image.OpacityMask>
                        <VisualBrush Visual="{Binding ElementName=myBorder}" />
                    </Image.OpacityMask>
                </Image>
            </Grid>
    https://msdn.microsoft.com/en-us/library/system.windows.uielement.clip(v=vs.110).aspx


    Sincerely,

    Bob


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    • 已建议为答案 shao.meng 2017年12月8日 1:07
    • 已标记为答案 彭123 2017年12月8日 1:54
    2017年12月7日 9:49
    版主

全部回复

  • Hi,

    尝试以下方法:

      <Image
                Width="90"
                Height="90"
                Source="http://sipi.usc.edu/database/misc/4.1.01.tiff">
                <Image.Clip>
                    <EllipseGeometry
                        Center="45,45"
                        RadiusX="40"
                        RadiusY="40" />
                </Image.Clip>
            </Image>
    
            <Grid Width="90" Height="90">
                <Grid.Clip>
                    <EllipseGeometry
                        Center="45,45"
                        RadiusX="40"
                        RadiusY="40" />
                </Grid.Clip>
                <Image Source="http://sipi.usc.edu/database/misc/4.1.01.tiff" />
            </Grid>
    
            <Grid>
                <Border
                    Name="myBorder"
                    Margin="1"
                    Background="White"
                    CornerRadius="250" />
                <Image Width="90" Height="90" Margin="1" Source="http://sipi.usc.edu/database/misc/4.1.01.tiff">
                    <Image.OpacityMask>
                        <VisualBrush Visual="{Binding ElementName=myBorder}" />
                    </Image.OpacityMask>
                </Image>
            </Grid>
    https://msdn.microsoft.com/en-us/library/system.windows.uielement.clip(v=vs.110).aspx


    Sincerely,

    Bob


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    • 已建议为答案 shao.meng 2017年12月8日 1:07
    • 已标记为答案 彭123 2017年12月8日 1:54
    2017年12月7日 9:49
    版主
  • <Grid> <Border Name="myBorder" Margin="1" Background="White" CornerRadius="250" /> <Image Width="90" Height="90" Margin="1" Source="http://sipi.usc.edu/database/misc/4.1.01.tiff"> <Image.OpacityMask> <VisualBrush Visual="{Binding ElementName=myBorder}" /> </Image.OpacityMask> </Image> </Grid>

    用的是这一个。

    2017年12月8日 1:55