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.通常附加属性有三个使用场景:插入属性.触发行 ...
随机推荐
- UnityShader之Shader格式篇【Shader资料1】
关于Shader,在Unity里面我们一般叫做ShaderLab,只要你的职业是与渲染搭边,Unity就与ShaderLab有着直接的关联,你都应该试着去学会它,其实我们在新手未有入门的时候,我们总是 ...
- UVa 105 - The Skyline Problem(利用判断,在于想法)
题目来源:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=3&pa ...
- 利用 cos 组件实现jsp中上传附件
需求:在web功能中附件上传功能为最基本的功能之一,所以用cos组件做了一个附件上传的demo.附件上传功能的实现可以利用其它的java组件实现,相关资料网上比较多. 说明步骤:下载组件并安装 --& ...
- CI框架SESSION重写
这个是我平时用的是 PHP 自己的 Session 机制,是真正的 PHP Session,存储在服务器端,而不是用的 cookie 接口完全兼容于 CI 2.0.x 的 Session 类库,也就是 ...
- ArcGIS API for JavaScript Beta初步试探(一)
这段时间一直在看https://developers.arcgis.com/javascript/beta/sample-code/index.html, 下面直接看图片: 叠加了二维arcgis s ...
- PHP模拟发送POST请求之五curl基本使用和多线程优化
今天来介绍PHP模拟发送POST请求的重型武器——cURL函数库的使用和其多线程的优化方法. 说起cURL函数,可谓是老生常谈,但网上许多资料都在关键部分语焉不详,列出一大堆手册上的东西,搞得我入门时 ...
- 问题解决——XP线程池找不到QueueUserWorkItem
2013年7月11号 主管让同事写一个并发100的小工具进行什么压力测试,据说是创建100个线程. 我表示这真真的是在坑人! 线程创建消耗资源,以自己的笔记本来跑这个东西,时间片都消耗在了线程切换上了 ...
- cocos2d-x之Vector与map
bool HelloWorld::init() { if ( !Layer::init() ) { return false; } Size visibleSize = Director::getIn ...
- 2013年 蓝桥杯预赛 java 本科A 题目
1.标题: 世纪末的星期 曾有邪教称1999年12月31日是世界末日.当然该谣言已经不攻自破. 还有人称今后的某个世纪末的12月31日,如果是星期一则会.... 有趣的是,任何一个世纪末的年份的12月 ...
- RTB交接
RTB产品测试进度 元数RTB产品 元数的产品已经测过两个版本,分别是1.1版本和1.2版本,目前线上跑的是1.2版本.程序线上情况目前正常,没有问题. 元数功能账号为:yuanshu 需用root ...