zoukankan      html  css  js  c++  java
  • 如何给wpf的按钮添加背景图片

    1:简单实用

    <Button Height="143" HorizontalAlignment="Left" Margin="30,34,0,0" Name="button1" VerticalAlignment="Top" Width="145">
    <Button.Background>
    <ImageBrush ImageSource="图片路径" Stretch="Fill"/>
    <Button.Background/>
    </Button>

    2:复杂绚丽

    <Window x:Class="WpfApplication4.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="350" Width="525" Loaded="Window_Loaded">
        <Window.Resources>
            <!--定义按钮样式-->
            <Style x:Key="buttonTemplate" TargetType="Button" >
                <!--修改模板属性-->
                <Setter Property="Template">
                    <Setter.Value>
                        <!--控件模板-->
                        <ControlTemplate TargetType="Button">
                            <!--只有Grid才能装下这么多Child-->
                            <Grid>
                                <!--带特效的底层背景-->
                                <Border x:Name="back" Opacity="0.8" CornerRadius="2">
                                    <Border.BitmapEffect>
                                        <OuterGlowBitmapEffect Opacity="0.8" GlowSize="0" GlowColor="Red" />
                                    </Border.BitmapEffect>
                                    <Rectangle Width="49" Height="49">
                                        <Rectangle.Fill>
                                            Red
                                        </Rectangle.Fill>
                                    </Rectangle>
                                    <!--按钮呈矩形-->
                                </Border>
                                <Rectangle x:Name="outerCircle" Width="50" Height="50">
                                    <Rectangle.Fill>
                                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                            <GradientStop Offset="0" Color="DarkOliveGreen"/>
                                            <GradientStop Offset="1" Color="Azure"/>
                                        </LinearGradientBrush>
                                        </Rectangle.Fill>
                                    </Rectangle>
                                <Rectangle Width="40" Height="40">
                                    <Rectangle.Fill>
                                        <ImageBrush  Stretch="Fill" ImageSource="/WpfApplication4;component/Images/png-0095.png" />
                                    </Rectangle.Fill>
                                </Rectangle>
                                <!--按钮内容-->
                                <Border>
                                    <TextBlock x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{TemplateBinding  Content}">
                                    </TextBlock>
                                </Border>
                            </Grid>
                            <!--触发器-->
                            <ControlTemplate.Triggers>
                                <Trigger Property="Button.IsMouseOver" Value="True">
                                    <Trigger.EnterActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation To="10" Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)" />
                                                <ColorAnimation To="#4FFF" BeginTime="0:0:0.2" Duration="0:0:0.2" Storyboard.TargetName="outerCircle" Storyboard.TargetProperty="(Ellipse.Fill).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />
                                                <ColorAnimation To="#3FFF" BeginTime="0:0:0.2" Duration="0:0:0.2" Storyboard.TargetName="outerCircle" Storyboard.TargetProperty="(Ellipse.Fill).(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="outerCircle" Storyboard.TargetProperty="(Ellipse.Fill).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />
                                                <ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="outerCircle" Storyboard.TargetProperty="(Ellipse.Fill).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </Trigger.ExitActions>
                                </Trigger>
                                <Trigger Property="Button.IsPressed" Value="True">
                                    <Setter Property="RenderTransform">
                                        <Setter.Value>
                                            <ScaleTransform ScaleX=".9" ScaleY=".9"/>
                                        </Setter.Value>
                                    </Setter>
                                    <Setter Property="RenderTransformOrigin" Value=".5,.5"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Window.Resources>
        <Grid>
            <Button Content="Button" Style="{StaticResource buttonTemplate}" Height="105" HorizontalAlignment="Left" Margin="153,108,0,0" Name="button1" VerticalAlignment="Top" Width="201">
            </Button>
        </Grid>
    </Window>

  • 相关阅读:
    负数之美
    css重设
    编码问题
    wed的各种前端打印方法(3)CSS
    表单
    学习前端心得
    去除input,a,按键链接时出现的虚线方法
    加载事件js代码
    深入C#数据类型
    查找
  • 原文地址:https://www.cnblogs.com/changbaishan/p/3302432.html
Copyright © 2011-2022 走看看