码迷,mamicode.com
首页 > Windows程序 > 详细

wpf 设置图片圆角

时间:2019-10-09 17:36:10      阅读:794      评论:0      收藏:0      [点我收藏+]

标签:center   bin   fill   水平   cli   target   for   ref   分辨率   

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

第一种:

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

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

图:

技术图片

 

 

 第二种:

<Image Width="123" Height="80" Margin="0,0,0,0" Source="jpj\123.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 填充整个空间,但不保持纵横比。 图像不会被裁剪,但可能会发生拉伸。这类似于拉伸模式。

 

wpf 设置图片圆角

标签:center   bin   fill   水平   cli   target   for   ref   分辨率   

原文地址:https://www.cnblogs.com/lovebear123/p/11642983.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!