zoukankan      html  css  js  c++  java
  • wpf 设置图片圆角

    设置页面布局的时候。遇到了设置图片圆角问题,然后试了几种方法,都可以

    第一种:

    <Border CornerRadius="50" BorderBrush="Blue" BorderThickness="2" Width="200" Height="200">
    <Border.Background>
    <ImageBrush ImageSource="pj123.jpg" />
    </Border.Background>
    </Border>

    这种图片是跟着border设置的圆角而改变的,自适应图片的大小

    图:

     第二种:

    <Image Width="123" Height="80" Margin="0,0,0,0" Source="jpj123.jpg" Stretch="Fill" VerticalAlignment="Center" HorizontalAlignment="Center">
    <Image.Clip>
    <RectangleGeometry RadiusX="30" RadiusY="10" Rect="0,0,123,90"/>
    </Image.Clip>
    </Image>

    这种是根据x和y来设置圆角,自我感觉这种比较适合只设置上边的圆角比较适合

    图:

     第三种:

    <!--border1样式-->
    <Style x:Key="border1style" TargetType="{x:Type Border}">
    <Setter Property="Width" Value="38"></Setter>
    <Setter Property="Height" Value="23"></Setter>
    <Setter Property="Margin" Value="3,3,0,0"></Setter>
    <Setter Property="CornerRadius" Value="0,0,4,4"></Setter>
    <Setter Property="BorderBrush" Value="Black"></Setter>
    <Setter Property="BorderThickness" Value="0"></Setter>
    </Style>
    <!--border2样式-->
    <Style x:Key="border2style" TargetType="{x:Type Border}">
    <Setter Property="CornerRadius" Value="0,0,4,4"></Setter>
    <Setter Property="Width" Value="38"></Setter>
    <Setter Property="Height" Value="23"></Setter>
    <Setter Property="Background" Value="#E3E3E3"></Setter>

    </Style>

    <Border Style="{StaticResource border1style}">
    <Grid>
    <Border Name="myBorder2" Style="{StaticResource border2style}" />
    <Image Source="{Binding img2}" Width="37" Height="23" Stretch="Fill">
    <Image.OpacityMask>
    <VisualBrush Visual="{Binding ElementName=myBorder2}"/>
    </Image.OpacityMask>
    </Image>
    </Grid>
    </Border>

    图:

    自我感觉还是第一中比较简单,中间我有遇到图片不自适应大小的问题,然后我加上这个属性就好了,Stretch="Fill",这个属性的意思是

    填充整个空间,但不保持纵横比。 图像不会被裁剪,但可能会发生拉伸。

    小计:

    Stretch 状态类似于许多电视机上的图片大小设置。

    • None 显示原始大小的内容的原始分辨率。
    • Uniform 在保持纵横比和图像内容的同时填充尽可能多的空间。这可能会导致在视频的边缘出现水平和垂直黑色条。这类似于宽屏模式。
    • UniformToFill 在保持纵横比的同时填充整个空间。这可能会导致某些图像被裁剪。这类似于全屏模式。
    • Fill 填充整个空间,但不保持纵横比。 图像不会被裁剪,但可能会发生拉伸。这类似于拉伸模式。
  • 相关阅读:
    ubuntu安装后做得几件事情 【robby_chan】
    malloc函数的一种简单的原理性实现[转]
    了解B树 B+树
    win下格式转为utf8 编码 转码
    log4j2与slf4j日志桥接
    java获取当前行数
    java获取服务器ip地址解决linux上为127.0.0.1的问题
    log4j2的基本使用
    navicator使用之mysql
    log4j与log4j2日志文件的操作
  • 原文地址:https://www.cnblogs.com/lovebear123/p/11642983.html
Copyright © 2011-2022 走看看