如何为图像控件设置圆角?

时间:2013-02-09 00:39:52

标签: image button controls windows-phone-8 rounded-corners

背景

我是Windows Phone 8上的菜鸟。我过去曾学过WPF和Silverlight,但很久以前就已经学会了。

在Windows Phone 8上,我有一个可点击的图像控件,我希望它的内容(图片本身)有圆角。

问题

如何将圆角设置为控件?

另外,我可能会考虑使用Button控件,以便我可以自定义单击(或触摸)时发生的操作。单击后,我希望具有圆角的区域将以某种颜色着色,表明它确实被点击/触摸。我该怎么做?


编辑:

感谢@Depechie,我找到了this solution

<Grid>
    <Border Height="200" Width="250" CornerRadius="0,0,50,50">
        <Border.Background>
            <ImageBrush ImageSource="Images/Desert.jpg" />
        </Border.Background>
    </Border>
</Grid>

但是,我有两个问题:

  1. 我仍然无法找到触摸它时如何将其视为点击,因此圆角会有黄色背景。

  2. 处理点击事件时,我无法通过代码获取imageSource和转换器(及其参数)。以前,我用过:

    图片thumbnailImage =(图片)发件人; var bindingExpression = thumbnailImage.GetBindingExpression(Image.SourceProperty); string selectedItem =(string)bindingExpression.DataItem; string selectedThumbnailIndex =(string)bindingExpression.ParentBinding。 ConverterParameter;

    也许我可以编程而不是Xaml创建项目?如果是这样,如何(物品在网格中,顺便说一句)?

  3. 我现在能做什么?

5 个答案:

答案 0 :(得分:1)

列出了类似的问题here... 也许那些也可以帮到你?

如果您希望图片是可点击控件,请查看TiltEffect

中提供的the Phone toolkit

答案 1 :(得分:1)

使用Rect

尝试此操作
<Image VerticalAlignment="Center" 
                       HorizontalAlignment="Center" 
                       Stretch="None" 
                       Source="Jellyfish.jpg">
                    <Image.Clip>
                        <RectangleGeometry RadiusX="5"
                                           RadiusY="5"
                                           Rect="0,0,150,113"/>
                    </Image.Clip>
                </Image>

这是另一个链接 https://msdn.microsoft.com/en-us/library/ms750631(v=vs.110).aspx

答案 2 :(得分:0)

而不是试图改变控件的形状(在查看VS和Blend之后我认为不可能)为什么不简单地创建带有圆边的图像然后将按钮边框和背景设置为无颜色?

答案 3 :(得分:0)

对于圆角,您可以将RadiusX和RadiusY值设置为非零数字,以在矩形中实现该效果。所以我想如果你想保持按钮控制,你可以在矩形内嵌一个按钮。

答案 4 :(得分:0)

<Image  Width="25" Height="25"  VerticalAlignment="Center" 
                       HorizontalAlignment="Center" 
                       Stretch="Fill" 
                        >
                                                        <Image.Clip>
                                                            <RectangleGeometry RadiusX="12.5"
                                           RadiusY="12.5"
                                           Rect="0,0,25,25"/>
                                                        </Image.Clip>
                                                    </Image>

拐角半径应为宽度或高度的一半。