您的位置:首页 > Web前端 > CSS

WPF 按钮样式(2)

2013-01-29 13:54 429 查看
大家好 我又更新我的微薄了

上次 写到按钮样式 转变的问题 看过我第一章内容的都知道 在WPF中按钮的样子是一个白色按钮 没有什么特别的地方

如果有微软DESGIN 设计图形 改变按钮的样式 是个不错的方法 但是我们在设计按钮图形的时候 往往会设计不出好的图标 对吗??

不如直接贴一个图 好看 是不是有这个想法 但是普通的贴图 按钮的边框是黑色的 很难看 那么我们有没有什么方法可以在贴图时候 把边框去掉 直接贴一个PNG的贴图呢

答案是可以的 那么现在我就教大家怎么去实现这个方法



3个图标全是按钮样式 我用了3种方法制作的按钮 左一就是今天要讲的的方法 去边框直接贴图法 右一是上次讲的方法 通过DESGIN 画图 然后改变按钮样式 下图就是直接的按钮图标

那么我就写一下 左一的方法吧

首先我们还是去APP下 定义按钮的样式

代码是这样的

<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid x:Name="LayoutRoot" RenderTransformOrigin="0.5,0.5">
<Rectangle x:Name="Background"
Fill="{TemplateBinding Background}" />
<Rectangle x:Name="BackgroundGradient"

StrokeThickness="0" Margin="0" RadiusX="15" RadiusY="15">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="1,1">

<GradientStop Color="Transparent" Offset="0.7" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Grid.RowSpan="2"
RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
这个是按钮去边框的方法

然后在MAINWINDOW的窗口下 设置一个按钮 然后加载STYLE的属性就好了

<Button Height="32" HorizontalAlignment="Left" Margin="24,32,0,0" Name="button1" VerticalAlignment="Top" Width="31" Style="{StaticResource ButtonStyle1}">            <Button.Background>                <ImageBrush ImageSource="/样式研究1;component/Images/play2.png" />            </Button.Background>        </Button>


红色地方是你贴图的路径 是在按钮属性里面设置的 如果这个地方不会的话 可以给我留言
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: