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. UnityShader之Shader格式篇【Shader资料1】

    关于Shader,在Unity里面我们一般叫做ShaderLab,只要你的职业是与渲染搭边,Unity就与ShaderLab有着直接的关联,你都应该试着去学会它,其实我们在新手未有入门的时候,我们总是 ...

  2. UVa 105 - The Skyline Problem(利用判断,在于想法)

    题目来源:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=3&pa ...

  3. 利用 cos 组件实现jsp中上传附件

    需求:在web功能中附件上传功能为最基本的功能之一,所以用cos组件做了一个附件上传的demo.附件上传功能的实现可以利用其它的java组件实现,相关资料网上比较多. 说明步骤:下载组件并安装 --& ...

  4. CI框架SESSION重写

    这个是我平时用的是 PHP 自己的 Session 机制,是真正的 PHP Session,存储在服务器端,而不是用的 cookie 接口完全兼容于 CI 2.0.x 的 Session 类库,也就是 ...

  5. ArcGIS API for JavaScript Beta初步试探(一)

    这段时间一直在看https://developers.arcgis.com/javascript/beta/sample-code/index.html, 下面直接看图片: 叠加了二维arcgis s ...

  6. PHP模拟发送POST请求之五curl基本使用和多线程优化

    今天来介绍PHP模拟发送POST请求的重型武器——cURL函数库的使用和其多线程的优化方法. 说起cURL函数,可谓是老生常谈,但网上许多资料都在关键部分语焉不详,列出一大堆手册上的东西,搞得我入门时 ...

  7. 问题解决——XP线程池找不到QueueUserWorkItem

    2013年7月11号 主管让同事写一个并发100的小工具进行什么压力测试,据说是创建100个线程. 我表示这真真的是在坑人! 线程创建消耗资源,以自己的笔记本来跑这个东西,时间片都消耗在了线程切换上了 ...

  8. cocos2d-x之Vector与map

    bool HelloWorld::init() { if ( !Layer::init() ) { return false; } Size visibleSize = Director::getIn ...

  9. 2013年 蓝桥杯预赛 java 本科A 题目

    1.标题: 世纪末的星期 曾有邪教称1999年12月31日是世界末日.当然该谣言已经不攻自破. 还有人称今后的某个世纪末的12月31日,如果是星期一则会.... 有趣的是,任何一个世纪末的年份的12月 ...

  10. RTB交接

    RTB产品测试进度 元数RTB产品 元数的产品已经测过两个版本,分别是1.1版本和1.2版本,目前线上跑的是1.2版本.程序线上情况目前正常,没有问题. 元数功能账号为:yuanshu  需用root ...