SilverLight自定义ImageButton
SilverLight中XAML的写法和WPF一样,但是发现在自定义按钮上,没有WPF来的容易,下面说说我制作SilverLight中的ImageButton的一些思路。
在SilverLight中,我们可以利用Button的Content属性来承载多个元素。然后通过stackPanel来包容图片和文本:
<Button x:Name="AddUserButton" Width="150" Margin="32,140,0,0" Height="38" VerticalAlignment="Top" HorizontalAlignment="Left" d:LayoutOverrides="Width">
<Button.Content>
<StackPanel Orientation="Horizontal">
<Image Source="Images/eqrth.png" Width="16" Height="16" />
<TextBlock Text="Add User" Margin="10,0,0,0" />
</StackPanel>
</Button.Content>
</Button>
<Button x:Name="EditUserButton" Width="150" Margin="32,82,0,0" Height="38" VerticalAlignment="Top" HorizontalAlignment="Left" d:LayoutOverrides="Width">
<Button.Content>
<StackPanel Orientation="Horizontal">
<Image Source="Images/eqrth.png" Width="16" Height="16" />
<TextBlock Text="Edit User" Margin="10,0,0,0" />
</StackPanel>
</Button.Content>
</Button>
<Button x:Name="DeleteUserButton" Width="150" Margin="32,26,0,0" Height="38" VerticalAlignment="Top" HorizontalAlignment="Left" d:LayoutOverrides="Width">
<Button.Content>
<StackPanel Orientation="Horizontal">
<Image Source="Images/eqrth.png" Width="16" Height="16" />
<TextBlock Text="Delete User" Margin="10,0,0,0" />
</StackPanel>
</Button.Content>
</Button>
这样,我们就能够得到想要的效果,图片可以通过重设Image的Source属性来变换。
但是如果我们项目中很多地方用到了这个配置文件的话,那么我们最好把它放到资源文件中,然后引用即可:
首先,创建一个ResourceDictionary页面。
然后,将样式写入进去:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- 应该在此定义资源字典条目。--> <Style x:Key="AddButtonStyle" TargetType="Button">
<Setter Property="Width" Value="150" />
<Setter Property="Margin" Value="0,0,0,10" />
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="Images/eqrth.png" Width="16" Height="16" />
<ContentPresenter Content="{Binding}" Margin="10,0,0,0" />
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style> <Style x:Key="DeleteButtonStyle" TargetType="Button">
<Setter Property="Width" Value="150" />
<Setter Property="Margin" Value="0,0,0,10" />
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="Images/eqrth.png" Width="16" Height="16" />
<ContentPresenter Content="{Binding}" Margin="10,0,0,0" />
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style> <Style x:Key="EditButtonStyle" TargetType="Button">
<Setter Property="Width" Value="150" />
<Setter Property="Margin" Value="0,0,0,10" />
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="Images/eqrth.png" Width="16" Height="16" />
<ContentPresenter Content="{Binding}" Margin="10,0,0,0" />
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style> </ResourceDictionary>
这里需要注意的是,每一个Style必须分配X:key属性,并且属性ID唯一。
最后,在前端页面,我们可以这样使用:
先引入样式资源:
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="ResourceDictionary1.xaml"></ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
然后Apply上样式即可:
<Button HorizontalAlignment="Left" Margin="32,0,0,160"
VerticalAlignment="Bottom"
Width="152"
Content="添加用户信息"
Style="{StaticResource AddButtonStyle}" Height="40" RenderTransformOrigin="-2,0.2"
/>
SilverLight自定义ImageButton的更多相关文章
- Silverlight自定义数据绑定控件应该如何处理IEditableObject和IEditableCollectionView对象
原文:Silverlight自定义数据绑定控件应该如何处理IEditableObject和IEditableCollectionView对象 原创文章,如需转载,请注明出处. 最近在一直研究Silve ...
- Silverlight 用DependencyProperty 自定义ImageButton控件 定义属性
为ImageButton自定义IconSource和Contents属性 xaml代码 <UserControl x:Class="SilverlightCreate.Silverli ...
- Silverlight 创建 ImageButton
这几天一直在折腾怎么在silverlight 按钮上添加图片,直接向imagebutton那样设置成属性可以直接更改,最后到处查找资料终于搞出一个imagebutton了. <Style x:K ...
- WPF 自定义 ImageButton
控件源码: public class ImageButton : Button { public ImageButton() { } public string No ...
- Flex4 自定义通用的ImageButton
Flex4与之前版本的一个极大区别就是外观皮肤的分离,虽然进一步解耦,但存在一个不爽的地方就是增加了编码的工作量,你能想象为你的每个自定义组件都写一个对应的皮肤吗?可能仅仅和你之前写过的组件差了那么一 ...
- android控件---自定义带文本的ImageButton
由于SDK提供的ImageButton只能添加图片,不能添加文字:而Button控件添加的文字只能显示在图片内部:当我们需要添加文字在图片外部时就不能满足我们的需求了,顾只能自己写个自定义ImageB ...
- Android 自定义Android带图片和文字的ImageButton
经过分析,上述按钮效果实际上就是一个布局,一个最简单不过的垂直线性布局,上部分是一个ImageView,下部分是一个TextView,这个布局可点击.可设置监听. 我们首先要编写自己的ImageBut ...
- 带文字的ImageButton[自定义]
今天Android项目中遇到一个ImageButton控件上面要显示文字,无奈自定义了一个ImageButton,继承自ImageButton.其实就是override这个控件的onDraw(Canv ...
- [UWP]附加属性2:实现一个Canvas
5. 附加属性实践:自定义Canvas 附加属性在UWP中是一个十分重要的组成部分,很多功能都依赖于附加属性实现,典型的例子是常用的Grid和Canvas.通常附加属性有三个使用场景:插入属性.触发行 ...
随机推荐
- Maven&&Ant使用
“使用操作系统环境为CentOS-6.5” Ant使用 Maven使用 “Maven是一个项目管理和综合工具.Maven提供了开发人员构建一个完整的生命周期框架.开发团队可以自动完成项目的基础工具建设 ...
- 通过正则获取URL中的参数
闲着无聊用正则做了一个获取URL参数的小算法^_^ function getParam(name) { var objs = window.location.search.match("(\ ...
- Spring中Template模式与callback的结合使用浅析
Spring不论是与ibatis,还是与Hibernate的结合中,都使用到了Template模式与callback技术,来达到简化代码实现的目的.Template模式也即模板模式,用于对一些不太变化 ...
- PHP面试题集之基础题
1.用PHP打印出前一天的时间格式是 2006-5-10 22:21:21 date_default_timezone_set('PRC'); //默认时区 echo "今天:", ...
- VISUAL STUDIO 调试
调试术语 Visual Studio调试之断点基础篇 Visual Studio调试之断点进阶篇 不能设置断点的检查步骤 Visual Studio调试之断点技巧篇 Visual Studio调试之断 ...
- python中列表和元组以及字符串的操作
python中列表是非常好用的.不过有一些使用小细节还需要注意一下. tag[32:-4] 从index为32到tag的倒数第4个字符. 如果索引为32的值在倒数第4个字符的右边,那么将输出为空.只要 ...
- 集算器协助java处理多样性数据源之MongoDB
MongoDB不支持join,其官网上推荐的unity jdbc可以把数据取出来进行二次计算实现join运算,但这些join.group.函数.表达式等高级功能都是收费版才有,而且即使是收费版本,对子 ...
- jQuery Form 表单提交插件----Form 简介,官方文档,官方下载地址
一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxF ...
- CentOS6.3下安装VSFTP服务
CentOS下安装FTP服务器: 第一步,检查服务器端是否已经安装FTP:[root@localhost centos]# rpm -q vsftpd 如果出现的是:[root@localhost c ...
- 在ubuntu14.04上配置cuda_caffe_cudnn_anaconda_digits
参考网上的很多网站,以这篇为主:http://blog.csdn.net/yhl_leo/article/details/50961542 这篇算是自己对caffe学习的一个总结系列的开头.首先因为c ...