WPF用图片的方式实现圆形按钮？

-小仙- 2012-07-18 02:55:55
圆形按钮，用WPF贴图实现，该怎么做呢?
...全文
1387 33 打赏 收藏 转发到动态 举报
写回复
用AI写文章
33 条回复
切换为时间正序
请发表友善的回复…
发表回复
-小仙- 2012-07-24
  • 打赏
  • 举报
 回复
[Quote=引用 31 楼 的回复:]

我受不了WPF
[/Quote]

WPF的体系确实很不同，尤其是与传统的VC开发框架区别很大，虽然运行效率不如VC的程序高！
但现在硬件的性能发展很快，生产效率才是关键！
-小仙- 2012-07-24
  • 打赏
  • 举报
 回复
[Quote=引用 30 楼 的回复:]

虽然blend很方便，建议你先脱离blend，等理解完template以后再来加速，否则不能做到通透，个人建议，仅供参考
[/Quote]

是这样的，现在在学习 《深入浅出WPF》 这本书，blend也在学，blend和wpf的帮助文档还是比较好的，中文支持的比较好！
nonocast 2012-07-21
  • 打赏
  • 举报
 回复
虽然blend很方便，建议你先脱离blend，等理解完template以后再来加速，否则不能做到通透，个人建议，仅供参考
3tzjq 2012-07-21
  • 打赏
  • 举报
 回复
我受不了WPF
nonocast 2012-07-20
  • 打赏
  • 举报
 回复
http://nonocast.cn/button-in-wpf2/
暖枫无敌 2012-07-20
  • 打赏
  • 举报
 回复
[Quote=引用 28 楼 的回复:]

引用 26 楼 的回复:

使用Blend来制作，想变成什么样的按钮，就能实现什么样的按钮！

做WPF、Silverlight开发，Blend基本操作必须会！


我刚开始就只用XAML写代码，真是费劲啊 ！
[/Quote]
简单的可以自己写XAML代码，稍微复杂点的处理，强烈建议使用Blend来做，一个是写起来麻烦，而且容易出错，有这么好的设计工具不用，可惜了！
-小仙- 2012-07-20
  • 打赏
  • 举报
 回复
[Quote=引用 26 楼 的回复:]

使用Blend来制作，想变成什么样的按钮，就能实现什么样的按钮！

做WPF、Silverlight开发，Blend基本操作必须会！
[/Quote]

我刚开始就只用XAML写代码，真是费劲啊 ！
-小仙- 2012-07-20
  • 打赏
  • 举报
 回复
[Quote=引用 23 楼 的回复:]

最简单的方法:
新建一个圆,如图片填充
XML code

<Ellipse Stroke="#FF000000" StrokeThickness="0">
<Ellipse.Fill>
<ImageBrush ImageSource="msgsys_warn.png" Stretch="Uniform"/>
</Ellipse.Fill>
</Ellipse>

……
[/Quote]

刚把你给的blog的用blend做自定义按钮的两篇博文照着做了下，果然很强大！
暖枫无敌 2012-07-20
  • 打赏
  • 举报
 回复
使用Blend来制作，想变成什么样的按钮，就能实现什么样的按钮！

做WPF、Silverlight开发，Blend基本操作必须会！
-小仙- 2012-07-20
  • 打赏
  • 举报
 回复
[Quote=引用 24 楼 的回复:]

不用，你图片做成PNG即可，透明区域不会响应
参考下图
http://nonocast.cn/?attachment_id=4336
[/Quote]

你这个返回按钮 ，点击拐角会相应！

你上面给的那个例子，我自己建了一个工程，三态图片也下载下来实验了！
nonocast 2012-07-20
  • 打赏
  • 举报
 回复
不用，你图片做成PNG即可，透明区域不会响应
参考下图
http://nonocast.cn/?attachment_id=4336
叫我三三 2012-07-20
  • 打赏
  • 举报
 回复
最简单的方法:
新建一个圆,如图片填充


<Ellipse Stroke="#FF000000" StrokeThickness="0">

   <Ellipse.Fill>

      <ImageBrush ImageSource="msgsys_warn.png" Stretch="Uniform"/>

   </Ellipse.Fill>

</Ellipse>

然后选中这个圆,在工具里选择 转换为控件 选择button.一个圆形button就出来了
这是最原始的button没有任何效果.
然后你按下面这个方法添加效果就行了
http://blog.csdn.net/wangyong0921/article/details/7003243
-小仙- 2012-07-20
  • 打赏
  • 举报
 回复
[Quote=引用 18 楼 的回复:]

http://nonocast.cn/button-in-wpf2/
[/Quote]

你的例子 对图片进行剪切了，但按钮的形状没有剪切，拐角依旧可以触发，要加一个剪切，像你说的用border吧！
-小仙- 2012-07-20
  • 打赏
  • 举报
 回复
[Quote=引用 19 楼 的回复:]

XML code
<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Bu……
[/Quote]

谢谢基本上明白了，方法很多，看哪种做简洁！
-小仙- 2012-07-20
  • 打赏
  • 举报
 回复
[Quote=引用 18 楼 的回复:]

http://nonocast.cn/button-in-wpf2/
[/Quote]

这个例子要好好研究下！
cmis7645 2012-07-20
  • 打赏
  • 举报
 回复 
<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">

			<Setter Property="Template">

				<Setter.Value>

					<ControlTemplate TargetType="{x:Type Button}">

						<Grid>

							<Ellipse x:Name="ellipse" Fill="#FFF4F4F5" Stroke="Black"/>

							<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

						</Grid>

						<ControlTemplate.Triggers>

							<Trigger Property="IsFocused" Value="True"/>

							<Trigger Property="IsDefaulted" Value="True"/>

							<Trigger Property="IsMouseOver" Value="True">

								<Setter Property="Fill" TargetName="ellipse" Value="Blue"/>

							</Trigger>

							<Trigger Property="IsPressed" Value="True"/>

							<Trigger Property="IsEnabled" Value="False"/>

						</ControlTemplate.Triggers>

					</ControlTemplate>

				</Setter.Value>

			</Setter>

		</Style>

1.包含了一个IsMouseOver触发
2.模板定义好之后，你随便拖个按钮出来，应用这个模板，你的新按钮就变成你模板的样式了
-小仙- 2012-07-19
  • 打赏
  • 举报
 回复
[Quote=引用 16 楼 的回复:]

引用 10 楼 的回复:
你这个出来时一个圆形 里面一个矩形button， 不是我说的！ 是不是我用错了！

我上面都写了Stretch 改变填充模式,你改成Fill 不就是圆的了,不过改成Fill会拉伸字体,所以我才用
Uniform
把button 的 width和height改成和圆的直径一样,button看着就是圆的.
很无语,给你一袋方便面,你就知道干吃,也不知道加水泡开……
[/Quote]

我是刚入手WPF 对于他的方法，不熟悉，所以才需要一点一点的推敲！
叫我三三 2012-07-19
  • 打赏
  • 举报
 回复
[Quote=引用 10 楼 的回复:]
你这个出来时一个圆形 里面一个矩形button， 不是我说的！ 是不是我用错了！
[/Quote]
我上面都写了Stretch 改变填充模式,你改成Fill 不就是圆的了,不过改成Fill会拉伸字体,所以我才用
Uniform
把button 的 width和height改成和圆的直径一样,button看着就是圆的.
很无语,给你一袋方便面,你就知道干吃,也不知道加水泡开
-小仙- 2012-07-19
  • 打赏
  • 举报
 回复 


<Style x:Key="RoundBoardBtn" TargetType="Button">           

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="Button">                        

                        <Border x:Name="Border"  BorderBrush="SlateBlue" BorderThickness="1,1,1,1" Padding="5" CornerRadius="25" Width="50" Height="50">

                            <Border.Background>

                                <SolidColorBrush Color="LightGreen"></SolidColorBrush>

                            </Border.Background>

                        </Border>                              

                        <ControlTemplate.Triggers>

                            <Trigger Property="IsPressed" Value="true">

                                <Setter TargetName="Border" Property="Background">

                                    <Setter.Value>

                                        <SolidColorBrush Color="DarkBlue"></SolidColorBrush>

                                    </Setter.Value>

                                </Setter>

                            </Trigger>                            

                        </ControlTemplate.Triggers>                        

                    </ControlTemplate>

                </Setter.Value>   

            </Setter>

        </Style>



<Button Width="50" Height="50" Margin="128,22,0,89" Style="{StaticResource ResourceKey=RoundBoardBtn}">            

        </Button>


这个可以定义外观和相位，但我有些疑问？
1、如果使用的是统一外观和相位的控件，那么用这种XML定义模版的方式是可以实现多次复用的，但如果我的控件是图片表现的（比如按钮，鼠标悬停时一张图片、按下去一张图片，松开一张图片），并且每个按钮所使用过的图片又不一样，那用XAML的方式能不能实现这种图片按钮控件的模版定义呢？

2、定义了模版之后，是不是就把本身默认的内容给替换了，即如果
<ControlTemplate TargetType="Button">
</ControlTemplate>
在这个标签内部不绘制按钮的图形，那么这个按钮即为空了,是这样吗？ 就是模版里面必须重新绘制控件图形，是这样吗？
-小仙- 2012-07-19
  • 打赏
  • 举报
 回复
[Quote=引用 13 楼 的回复:]

http://msdn.microsoft.com/en-us/library/system.windows.controls.border.cornerradius.aspx
[/Quote]

谢谢 nonocast的恢复，用这个和
<Style TargetType="Button">

            
<!--Set to true to not get any properties from the themes.-->

            <Setter Property="OverridesDefaultStyle" Value="True"/>

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="Button">

                        <Grid>

                            <Ellipse Fill="{TemplateBinding Background}"/>

                            <ContentPresenter HorizontalAlignment="Center"

                            VerticalAlignment="Center"/>

                        </Grid>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>


都可以实现圆形按钮，又学到一招！

但我怎么定义它的触发方式呢？
我的代码：


<Window.Resources>

        <Style x:Key="RoundBoardBtn" TargetType="Button">

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="Button">

                        <Border BorderBrush="SlateBlue" BorderThickness="1,1,1,1" Background="AliceBlue" Padding="5" CornerRadius="25" Width="50" Height="50"/>

                    </ControlTemplate>

                </Setter.Value>   

            </Setter>

        </Style>

    </Window.Resources>

<Grid>

<Button Width="50" Height="50" Margin="128,22,0,89" Style="{StaticResource ResourceKey=RoundBoardBtn}">   

</Grid>


加载更多回复（13）
Wpf 圆形按钮
WPF 圆形按钮，使用了 telerik 控件
wpf圆形玻璃按钮
wpf做的一个圆形玻璃按钮，和window vista风格一样
WPF不规则形状按钮
WPF复杂形状按钮，PNG，图片类按钮。
漂亮的WPF按钮样式，水晶效果
是用样式实现更改WPF默认按钮外观，效果很棒。
WPF自定义圆形按钮控件
WPF圆形按钮
C#

110,539

社区成员

642,577

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术 C#
社区管理员
  • C#
  • Web++
  • by_封爱
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

让您成为最强悍的C#开发者

试试用AI创作助手写篇文章吧

+ 用AI写文章