WPF 设置图片圆角的3种方式

这篇具有很好参考价值的文章主要介绍了WPF 设置图片圆角的3种方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在WPF中,设置页面布局的时,遇到了设置图片圆角问题,试了以下几种方式,都能实现:

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

<Border x:Name="b_IsChecked"  Width="48" Height="48" HorizontalAlignment="Right" VerticalAlignment="Top" CornerRadius="0,8,0,0">
<Border.Background>
<ImageBrush ImageSource="{Binding CheckImageUrl}"></ImageBrush>
</Border.Background>
</Border>

 效果:

 文章来源地址https://www.toymoban.com/news/detail-690008.html

或者:

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

效果:

 

第二种:根据x和y来设置圆角,感觉这种比较适合只设置上边的圆角比较适合

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

效果:

 

第三种:

<!--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 设置图片圆角的3种方式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • WPF 零基础入门笔记(1):WPF静态页面,布局+样式+触发器

    WPF 零基础入门笔记(0):WPF简介 WPF MaterialDesign 初学项目实战(0):github 项目Demo运行 WPF MaterialDesign 初学项目实战(1)首页搭建 WPF MaterialDesign 初学项目实战(2)首页导航栏样式 WPF MaterialDesign 初学项目实战(3)动态侧边栏 WPF MaterialDesign 初学项目实战(4)侧边栏路由管理

    2024年02月11日
    浏览(42)
  • iOS长宽不一致图片,设置圆角并裁切多余部分

    问题: 直接设置圆角的话,如果所选图片长宽不一致,会导致展示的图片畸形,不是我们所想要的圆角 解决方案:  如果想要圆角完整显示,在代码中加入 _avatarIcon.contentMode = UIViewContentModeScaleAspectFill;  UIViewContentModeScaleAspectFill表示按比例缩放并且填满view,意味着图片可能

    2024年01月23日
    浏览(46)
  • C# WPF: Imag图片填充方式有哪些?

    C#和WPF中的图像填充方式 在WPF中,你可以使用 Image 控件来显示图像,并使用不同的填充方式来控制图像在控件中的显示方式。以下是一些常见的图像填充方式: Stretch(拉伸):这是默认的填充方式,它会拉伸图像以充满整个 Image 控件。这可能导致图像的宽高比失真。 Unif

    2024年02月07日
    浏览(35)
  • 设置layout布局嵌套路由格式正确但是看不见页面问题

    一定确保格式正确.试试重置component路径 children: [

    2024年02月13日
    浏览(56)
  • wpf RadioButton自定义样式 圆角/直角变化 背景色渐变

    样式部分 xam  根据  CommandParameter 的value不同,背景圆角的方向不同 效果如    

    2024年02月16日
    浏览(39)
  • Uniapp设置页面的背景图片

    设置背景有两种 注意一个是全背景设置,一个是在相应的view内设置背景 这是设置大背景 这是在相应的view内设置view块的背景

    2024年02月08日
    浏览(41)
  • vue设置页面背景及背景图片

    本地静态图片  cdn图片 设置背景色 实战-PC web登录页 实战-小程序登录页

    2024年02月12日
    浏览(58)
  • 使用CSS的@media screen 规则为不同的屏幕尺寸设置不同的样式(响应式图片布局)

    当你想要在不同的屏幕尺寸或设备上应用不同的CSS样式时,可以使用 @media 规则,特别是 @media screen 规则。这允许你根据不同的屏幕特性,如宽度、高度、方向等,为不同的屏幕尺寸设置不同的样式。 具体来说, @media screen 规则用于在CSS中创建响应式设计,使网页在不同设备

    2024年02月10日
    浏览(50)
  • HTML图片设置成为页面背景 ( 五个小步骤)

    1 在body里面使用, 一般放在网页的开头编写 2 找到图片存放路径( 可以是jpg也可以是gif图片格式) 3 设置图片不重复出现 4 使图片位置固定 5 使背景 比例 达到窗口的100% 6 代码展示

    2024年02月11日
    浏览(58)
  • unity设置图片的填充方式

    功能实现:点击按钮,图片出现,在点击一次,图片消失,可以选择图片出现的方式和出现的位置 新建一个image,拖入一张图片,在Fill Method中选择第四个:Filled(填充)  设置填充方式,开始填充方向,和填充百分比设置不同的图片展示效果 将代码拖到一个Button上,将需要

    2024年02月11日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包