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的更多相关文章

  1. Silverlight自定义数据绑定控件应该如何处理IEditableObject和IEditableCollectionView对象

    原文:Silverlight自定义数据绑定控件应该如何处理IEditableObject和IEditableCollectionView对象 原创文章,如需转载,请注明出处. 最近在一直研究Silve ...

  2. Silverlight 用DependencyProperty 自定义ImageButton控件 定义属性

    为ImageButton自定义IconSource和Contents属性 xaml代码 <UserControl x:Class="SilverlightCreate.Silverli ...

  3. Silverlight 创建 ImageButton

    这几天一直在折腾怎么在silverlight 按钮上添加图片,直接向imagebutton那样设置成属性可以直接更改,最后到处查找资料终于搞出一个imagebutton了. <Style x:K ...

  4. WPF 自定义 ImageButton

    控件源码: public class ImageButton : Button    {        public ImageButton() {        } public string No ...

  5. Flex4 自定义通用的ImageButton

    Flex4与之前版本的一个极大区别就是外观皮肤的分离,虽然进一步解耦,但存在一个不爽的地方就是增加了编码的工作量,你能想象为你的每个自定义组件都写一个对应的皮肤吗?可能仅仅和你之前写过的组件差了那么一 ...

  6. android控件---自定义带文本的ImageButton

    由于SDK提供的ImageButton只能添加图片,不能添加文字:而Button控件添加的文字只能显示在图片内部:当我们需要添加文字在图片外部时就不能满足我们的需求了,顾只能自己写个自定义ImageB ...

  7. Android 自定义Android带图片和文字的ImageButton

    经过分析,上述按钮效果实际上就是一个布局,一个最简单不过的垂直线性布局,上部分是一个ImageView,下部分是一个TextView,这个布局可点击.可设置监听. 我们首先要编写自己的ImageBut ...

  8. 带文字的ImageButton[自定义]

    今天Android项目中遇到一个ImageButton控件上面要显示文字,无奈自定义了一个ImageButton,继承自ImageButton.其实就是override这个控件的onDraw(Canv ...

  9. [UWP]附加属性2:实现一个Canvas

    5. 附加属性实践:自定义Canvas 附加属性在UWP中是一个十分重要的组成部分,很多功能都依赖于附加属性实现,典型的例子是常用的Grid和Canvas.通常附加属性有三个使用场景:插入属性.触发行 ...

随机推荐

  1. Maven&&Ant使用

    “使用操作系统环境为CentOS-6.5” Ant使用 Maven使用 “Maven是一个项目管理和综合工具.Maven提供了开发人员构建一个完整的生命周期框架.开发团队可以自动完成项目的基础工具建设 ...

  2. 通过正则获取URL中的参数

    闲着无聊用正则做了一个获取URL参数的小算法^_^ function getParam(name) { var objs = window.location.search.match("(\ ...

  3. Spring中Template模式与callback的结合使用浅析

    Spring不论是与ibatis,还是与Hibernate的结合中,都使用到了Template模式与callback技术,来达到简化代码实现的目的.Template模式也即模板模式,用于对一些不太变化 ...

  4. PHP面试题集之基础题

    1.用PHP打印出前一天的时间格式是 2006-5-10 22:21:21 date_default_timezone_set('PRC'); //默认时区 echo "今天:", ...

  5. VISUAL STUDIO 调试

    调试术语 Visual Studio调试之断点基础篇 Visual Studio调试之断点进阶篇 不能设置断点的检查步骤 Visual Studio调试之断点技巧篇 Visual Studio调试之断 ...

  6. python中列表和元组以及字符串的操作

    python中列表是非常好用的.不过有一些使用小细节还需要注意一下. tag[32:-4] 从index为32到tag的倒数第4个字符. 如果索引为32的值在倒数第4个字符的右边,那么将输出为空.只要 ...

  7. 集算器协助java处理多样性数据源之MongoDB

    MongoDB不支持join,其官网上推荐的unity jdbc可以把数据取出来进行二次计算实现join运算,但这些join.group.函数.表达式等高级功能都是收费版才有,而且即使是收费版本,对子 ...

  8. jQuery Form 表单提交插件----Form 简介,官方文档,官方下载地址

     一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxF ...

  9. CentOS6.3下安装VSFTP服务

    CentOS下安装FTP服务器: 第一步,检查服务器端是否已经安装FTP:[root@localhost centos]# rpm -q vsftpd 如果出现的是:[root@localhost c ...

  10. 在ubuntu14.04上配置cuda_caffe_cudnn_anaconda_digits

    参考网上的很多网站,以这篇为主:http://blog.csdn.net/yhl_leo/article/details/50961542 这篇算是自己对caffe学习的一个总结系列的开头.首先因为c ...