wpf,如何设计win8风格的按钮

影游 2013-10-09 07:12:27
我说的是普通按钮,略带扁平化即可,如何设计??
如图:
...全文
216 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
化境编程 2014-03-03
  • 打赏
  • 举报
 回复
引用 4 楼 lhx527099095 的回复:
参考下这个吧


<Style TargetType="Button">

            <Setter Property="Foreground" Value="Black"/>

            <!--修改模板属性-->

            <Setter Property="Template">

                <Setter.Value>

                    <!--控件模板-->

                    <ControlTemplate TargetType="Button">

                        <!--背景色-->

                        <Border x:Name="back" Opacity="0.8" CornerRadius="3">

                            <Border.BitmapEffect>

                                <OuterGlowBitmapEffect Opacity="0.7" GlowSize="0" GlowColor="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Button.Background).(SolidColorBrush.Color)}" />

                            </Border.BitmapEffect>

                            <Border.Background>

                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1.5">

                                    <GradientBrush.GradientStops>

                                        <GradientStopCollection>

                                            <GradientStop Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Button.Background).(SolidColorBrush.Color)}" Offset="0"/>

                                            <GradientStop Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Button.Background).(SolidColorBrush.Color)}" Offset="0.4"/>

                                            <GradientStop Color="#FFF" Offset="1"/>

                                        </GradientStopCollection>

                                    </GradientBrush.GradientStops>

                                </LinearGradientBrush>

                            </Border.Background>

                            <!--前景色及边框-->

                            <Border x:Name="fore" BorderThickness="1" CornerRadius="3" BorderBrush="#5555">

                                <Border.Background>

                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

                                        <GradientBrush.GradientStops>

                                            <GradientStopCollection>

                                                <GradientStop Color="#6FFF" Offset="0.5"/>

                                                <GradientStop Color="#1111" Offset="0.51"/>

                                            </GradientStopCollection>

                                        </GradientBrush.GradientStops>

                                    </LinearGradientBrush>

                                </Border.Background>

                                <!--按钮内容-->

                                <ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center" Content="{TemplateBinding  Content}">

                                    <ContentPresenter.BitmapEffect>

                                        <DropShadowBitmapEffect Color="#000" Direction="-90" ShadowDepth="2" Softness="0.1" Opacity="0.3" />

                                    </ContentPresenter.BitmapEffect>

                                </ContentPresenter>

                            </Border>

                        </Border>

                        <!--触发器-->

                        <ControlTemplate.Triggers>

                            <!--鼠标移入移出-->

                            <Trigger Property="IsMouseOver" Value="True">

                                <Trigger.EnterActions>

                                    <BeginStoryboard>

                                        <Storyboard>

                                            <DoubleAnimation To="6" Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)" />

                                            <ColorAnimation To="#AFFF" BeginTime="0:0:0.2" Duration="0:0:0.2" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />

                                            <ColorAnimation To="#3FFF" BeginTime="0:0:0.2" Duration="0:0:0.2" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />

                                        </Storyboard>

                                    </BeginStoryboard>

                                </Trigger.EnterActions>

                                <Trigger.ExitActions>

                                    <BeginStoryboard>

                                        <Storyboard>

                                            <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)" />

                                            <ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />

                                            <ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />

                                        </Storyboard>

                                    </BeginStoryboard>

                                </Trigger.ExitActions>

                            </Trigger>

                            

                        </ControlTemplate.Triggers>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>


就这效果 ？ 这也叫win8风格 ？感觉像厕所瓷砖风格
lhx527099095 2013-10-09
  • 打赏
  • 举报
 回复
参考下这个吧 

<Style TargetType="Button">
            <Setter Property="Foreground" Value="Black"/>
            <!--修改模板属性-->
            <Setter Property="Template">
                <Setter.Value>
                    <!--控件模板-->
                    <ControlTemplate TargetType="Button">
                        <!--背景色-->
                        <Border x:Name="back" Opacity="0.8" CornerRadius="3">
                            <Border.BitmapEffect>
                                <OuterGlowBitmapEffect Opacity="0.7" GlowSize="0" GlowColor="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Button.Background).(SolidColorBrush.Color)}" />
                            </Border.BitmapEffect>
                            <Border.Background>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1.5">
                                    <GradientBrush.GradientStops>
                                        <GradientStopCollection>
                                            <GradientStop Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Button.Background).(SolidColorBrush.Color)}" Offset="0"/>
                                            <GradientStop Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Button.Background).(SolidColorBrush.Color)}" Offset="0.4"/>
                                            <GradientStop Color="#FFF" Offset="1"/>
                                        </GradientStopCollection>
                                    </GradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </Border.Background>
                            <!--前景色及边框-->
                            <Border x:Name="fore" BorderThickness="1" CornerRadius="3" BorderBrush="#5555">
                                <Border.Background>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                        <GradientBrush.GradientStops>
                                            <GradientStopCollection>
                                                <GradientStop Color="#6FFF" Offset="0.5"/>
                                                <GradientStop Color="#1111" Offset="0.51"/>
                                            </GradientStopCollection>
                                        </GradientBrush.GradientStops>
                                    </LinearGradientBrush>
                                </Border.Background>
                                <!--按钮内容-->
                                <ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center" Content="{TemplateBinding  Content}">
                                    <ContentPresenter.BitmapEffect>
                                        <DropShadowBitmapEffect Color="#000" Direction="-90" ShadowDepth="2" Softness="0.1" Opacity="0.3" />
                                    </ContentPresenter.BitmapEffect>
                                </ContentPresenter>
                            </Border>
                        </Border>
                        <!--触发器-->
                        <ControlTemplate.Triggers>
                            <!--鼠标移入移出-->
                            <Trigger Property="IsMouseOver" Value="True">
                                <Trigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation To="6" Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)" />
                                            <ColorAnimation To="#AFFF" BeginTime="0:0:0.2" Duration="0:0:0.2" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />
                                            <ColorAnimation To="#3FFF" BeginTime="0:0:0.2" Duration="0:0:0.2" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.EnterActions>
                                <Trigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)" />
                                            <ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />
                                            <ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.ExitActions>
                            </Trigger>
                            
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
影游 2013-10-09
  • 打赏
  • 举报
 回复
引用 1 楼 lhx527099095 的回复:
重写button的style然后里面 


<Style TargetType="{x:Type Button}">
                    <Setter Property="Template" >
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type Button}">
                                <Border BorderBrush="Gray" BorderThickness="1" Margin="5" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                                    <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" />
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
还有其他两个效果比较困难, 1.当鼠标移上去,边框颜色渐渐变蓝 [需要渐变效果] 谢谢回答
影游 2013-10-09
  • 打赏
  • 举报
 回复
引用 1 楼 lhx527099095 的回复:
重写button的style然后里面




<Style TargetType="{x:Type Button}">

                    <Setter Property="Template" >

                        <Setter.Value>

                            <ControlTemplate TargetType="{x:Type Button}">

                                <Border BorderBrush="Gray" BorderThickness="1" Margin="5" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">

                                    <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" />

                                </Border>

                            </ControlTemplate>

                        </Setter.Value>

                    </Setter>

                </Style>


我刚按照你的方法做法,感觉还差点啥,没人家的有气质
lhx527099095 2013-10-09
  • 打赏
  • 举报
 回复
重写button的style然后里面 


<Style TargetType="{x:Type Button}">
                    <Setter Property="Template" >
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type Button}">
                                <Border BorderBrush="Gray" BorderThickness="1" Margin="5" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                                    <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" />
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
C# Metro(Win8风格)按钮实现源码
个人写的一个仿win8开始菜单磁铁按钮Demo，有两种点击效果参考。 想了解更多关于C#WPF的知识，可以登录我的个人博客www.7fenx.com。 欢迎交流讨论。
豆瓣电台 v1.7.6源码
界面运用了较多动画，界面风格仿造Metro风格，功能不强大，但界面很友好。 打开豆瓣电台客户端，聆听动人的音乐，无需打开网页就能收听豆瓣电台。清新的界面，平 滑的动画，快捷的操作，体验如此美妙。 功能说明： ...
WPF应用系统开发实战
WPF框架MVVM模式下基础应用实践，实现客户端的View、ViewModel、...从数据库设计到界面交互；完整应用开发实操。 WPF多个技术功能点应用实战：依赖属性与绑定、资源样式模板、动画、控件自定义、属性与命令绑定....
wpf button 之win8风格按钮
网上下来来的代码片段，win 8风格按钮模板 Opacity="0.8" CornerRadius="3"> <OuterGlowB
Win8风格的WPF按钮
Win8将Windows的风格又进行了一次变革，我还挺喜欢的，有简洁大气的感觉，华丽绚丽的东西看多了之后总会返璞归真寻找简洁大气的感觉才能心情舒畅。 下面就给个WPF下Button的自定义写法。 1 2 3 4...
C#

110,533

社区成员

642,574

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术 C#
社区管理员
  • C#
  • Web++
  • by_封爱
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

让您成为最强悍的C#开发者

试试用AI创作助手写篇文章吧

+ 用AI写文章