关闭

WPF之Button控件应用

769人阅读 评论(0) 收藏 举报
分类:

  测试环境: Windows xp + Microsoft Visual Studio 2010 + Microsoft Expression Blend4 + .Net4.0

  具体应用:

  1. 创建透明的Button

  1. <Image Source="back.bmp" Grid.Row="0" Stretch="UniformToFill" />  
  2. <Button x:Name="TranButton" Content="透明Button" Margin="3" Grid.Row="0">  
  3.     <Button.OpacityMask>  
  4.         <LinearGradientBrush StartPoint="0,70" EndPoint="3,0">  
  5.             <GradientStop Offset="0" Color="Black"/>  
  6.                 <GradientStop Offset="1" Color="Transparent"/>  
  7.         </LinearGradientBrush>  
  8.     </Button.OpacityMask>  
  9. </Button>  

  2. 创建带图片的按钮

  1. <Button x:Name="ImageButton" Margin="3" Grid.Row="1" HorizontalAlignment="Left">  
  2.     <StackPanel Margin="1" Orientation="Horizontal" Width="620">  
  3.         <Image Source="back.bmp" Stretch="UniformToFill" Width="160"/>  
  4.         <TextBlock Width="130" />  
  5.         <TextBlock Text="图片按钮" Margin="1,15,1,1"/>  
  6.     </StackPanel>  
  7. </Button>  

  3. 鼠标移动变色的按钮

  1) 首先设置鼠标的样式

  1. <Style x:Key="ButtonFocusVisual">  
  2.     <Setter Property="Control.Template">  
  3.         <Setter.Value>  
  4.             <ControlTemplate>  
  5.                 <Rectangle Margin="3" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"
     StrokeThickness="1" StrokeDashArray="1 2"/>  
  6.             </ControlTemplate>  
  7.         </Setter.Value>  
  8.     </Setter>  
  9. </Style>  
  10. <LinearGradientBrush x:Key="ButtonNormalBackgroundFill" EndPoint="0.5,1" StartPoint="0.5,0">  
  11.     <GradientStop Color="#FFFFFFFF" Offset="0"/>  
  12.     <GradientStop Color="#FFF0F0EA" Offset="0.9"/>  
  13. </LinearGradientBrush>  
  14. <SolidColorBrush x:Key="ButtonBorder" Color="#FF003C74"/>  
  15. <Style x:Key="MouseButtonStyle" TargetType="{x:Type Button}">  
  16.     <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>  
  17.     <Setter Property="Background" Value="{StaticResource ButtonNormalBackgroundFill}"/>  
  18.     <Setter Property="BorderBrush" Value="{StaticResource ButtonBorder}"/>  
  19.     <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>  
  20.     <Setter Property="HorizontalContentAlignment" Value="Center"/>  
  21.     <Setter Property="VerticalContentAlignment" Value="Center"/>  
  22.     <Setter Property="Template">  
  23.         <Setter.Value>  
  24.             <ControlTemplate TargetType="{x:Type Button}">  
  25.                 <Microsoft_Windows_Themes:ButtonChrome x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}"   
  26.                     Fill="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}"   
  27.                     RenderPressed="{TemplateBinding IsPressed}" RenderDefaulted="{TemplateBinding IsDefaulted}"  
  28.                     SnapsToDevicePixels="true" ThemeColor="NormalColor">  
  29.                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"   
  30.                          Margin="{TemplateBinding Padding}" RecognizesAccessKey="True"   
  31.                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"   
  32.                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>  
  33.                 </Microsoft_Windows_Themes:ButtonChrome>  
  34.                           <ControlTemplate.Triggers>  
  35.                         <Trigger Property="IsKeyboardFocused" Value="true">  
  36.                             <Setter Property="RenderDefaulted" TargetName="Chrome" Value="true"/>  
  37.                         </Trigger>  
  38.                         <Trigger Property="ToggleButton.IsChecked" Value="true">  
  39.                             <Setter Property="RenderPressed" TargetName="Chrome" Value="true"/>  
  40.                         </Trigger>  
  41.                         <Trigger Property="IsEnabled" Value="false">  
  42.                             <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>  
  43.                         </Trigger>                                      
  44.                         <Trigger Property="IsMouseOver" Value="true">                       
  45.                             <Setter Property="Background" Value="Blue" />                       
  46.                         </Trigger>              
  47.                     </ControlTemplate.Triggers>  
  48.             </ControlTemplate>  
  49.         </Setter.Value>  
  50.     </Setter>  
  51. </Style>  

  2)设置Button 按钮

  1. <Button x:Name="MouseButton" Margin="3" Grid.Row="2" Content="鼠标移动变色按钮" Style="{DynamicResource MouseButtonStyle}"/>  

  4. 创建有倒影的Button

  1. <StackPanel Orientation="Vertical" Margin="3" Grid.Row="5" >  
  2.     <Button x:Name="ReflectionButton" Content="具有倒影的按钮"  Height="35" Margin="3" />          
  3.     <Rectangle RenderTransformOrigin="1,0.5" Height="40">  
  4.           <Rectangle.Fill>  
  5.                     <VisualBrush Visual="{Binding ElementName=ReflectionButton}"></VisualBrush>  
  6.           </Rectangle.Fill>  
  7.               <Rectangle.OpacityMask>  
  8.                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">  
  9.                         <GradientStop Offset="0.3" Color="Transparent"></GradientStop>  
  10.                         <GradientStop Offset="1" Color="Red"></GradientStop>  
  11.                     </LinearGradientBrush>  
  12.               </Rectangle.OpacityMask>  
  13.               <Rectangle.RenderTransform>  
  14.                     <ScaleTransform ScaleY="-1"></ScaleTransform>  
  15.               </Rectangle.RenderTransform>  
  16.         </Rectangle>  
  17. </StackPanel>  

  5. 改变Button显示的外观

  1. <Button x:Name="TypeButton" Margin="3" Grid.Row="3" Content="改变鼠标形状按钮">  
  2.        <Button.Clip>  
  3.                <EllipseGeometry RadiusX="90" RadiusY="132" Center="310,135"></EllipseGeometry>                                        
  4.        </Button.Clip>  
  5. </Button>   

  6. 创建有下拉按钮的Button

  1. <Button x:Name="TwoButton" Margin="3" Grid.Row="4" HorizontalAlignment="Left">  
  2.     <Button.Content>  
  3.         <StackPanel Orientation="Horizontal" Margin="1">  
  4.             <TextBlock Width="250"/>  
  5.             <TextBlock Text="可以点击下拉框的按钮"/>  
  6.             <TextBlock Width="218"/>  
  7.             <Polygon Stroke="Black" StrokeThickness="1" Points="0,0,15,20,30,0,0,0" Fill="Black"/>  
  8.         </StackPanel>  
  9.     </Button.Content>  
  10. </Button>  

  本文来自wangyong0921的博客,原文地址:http://blog.csdn.net/wangyong0921/article/details/6948026

 

 

 

Button 透明效果

<Window x:Class="ControlTest2.ButtonGlassTest"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="ButtonGlassTest" Height="480" Width="640">
    <Window.Resources>
        <ControlTemplate x:Key="GlassButton" TargetType="{x:Type Button}">
            <ControlTemplate.Resources>
                <Storyboard x:Key="Timeline1">
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="glow" Storyboard.TargetProperty="(UIElement.Opacity)">
                        <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1"/>
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
                <Storyboard x:Key="Timeline2">
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="glow" Storyboard.TargetProperty="(UIElement.Opacity)">
                        <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0"/>
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </ControlTemplate.Resources>
            <Border BorderBrush="#FFFFFFFF" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4">
                <Border x:Name="border" Background="#7F000000" BorderBrush="#FF000000" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="0.507*"/>
                            <RowDefinition Height="0.493*"/>
                        </Grid.RowDefinitions>
                        <Border Opacity="0" HorizontalAlignment="Stretch" x:Name="glow" Width="Auto" Grid.RowSpan="2" CornerRadius="4,4,4,4">
                            <Border.Background>
                                <RadialGradientBrush>
                                    <RadialGradientBrush.RelativeTransform>
                                        <TransformGroup>
                                            <ScaleTransform ScaleX="1.702" ScaleY="2.243"/>
                                            <SkewTransform AngleX="0" AngleY="0"/>
                                            <RotateTransform Angle="0"/>
                                            <TranslateTransform X="-0.368" Y="-0.152"/>
                                        </TransformGroup>
                                    </RadialGradientBrush.RelativeTransform>
                                    <GradientStop Color="#B28DBDFF" Offset="0"/>
                                    <GradientStop Color="#008DBDFF" Offset="1"/>
                                </RadialGradientBrush>
                            </Border.Background>
                        </Border>
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Grid.RowSpan="2"/>
                        <Border HorizontalAlignment="Stretch" Margin="0,0,0,0" x:Name="shine" Width="Auto" CornerRadius="4,4,0,0">
                            <Border.Background>
                                <LinearGradientBrush EndPoint="0.494,0.889" StartPoint="0.494,0.028">
                                    <GradientStop Color="#99FFFFFF" Offset="0"/>
                                    <GradientStop Color="#33FFFFFF" Offset="1"/>
                                </LinearGradientBrush>
                            </Border.Background>
                        </Border>
                    </Grid>
                </Border>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsPressed" Value="True">
                    <Setter Property="Opacity" TargetName="shine" Value="0.4"/>
                    <Setter Property="Background" TargetName="border" Value="#CC000000"/>
                    <Setter Property="Visibility" TargetName="glow" Value="Hidden"/>
                </Trigger>
                <Trigger Property="IsMouseOver" Value="True">
                    <Trigger.EnterActions>
                        <BeginStoryboard Storyboard="{StaticResource Timeline1}"/>
                    </Trigger.EnterActions>
                    <Trigger.ExitActions>
                        <BeginStoryboard x:Name="Timeline2_BeginStoryboard" Storyboard="{StaticResource Timeline2}"/>
                    </Trigger.ExitActions>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Window.Resources>
    <Grid>
        <Grid.Background>
            <LinearGradientBrush EndPoint="0.486,0.986" StartPoint="0.486,0">
                <GradientStop Color="#FF000000" Offset="0"/>
                <GradientStop Color="#FFD0D0D0" Offset="1"/>
                <GradientStop Color="#FF8D8D8D" Offset="0.558"/>
                <GradientStop Color="#FF8D8D8D" Offset="0.76"/>
                <GradientStop Color="#FF747474" Offset="0.615"/>
            </LinearGradientBrush>
        </Grid.Background>
        <Button HorizontalAlignment="Left" Margin="31,0,0,182" VerticalAlignment="Bottom" Width="176" Height="34" Content="Button" Foreground="#FFFFFFFF" 
                Template="{DynamicResource GlassButton}"/>
        <Image  Margin="221,89,27.001,73" Source="Aero_Grass.jpg" Stretch="Fill">
            <Image.OpacityMask>
                <RadialGradientBrush>
                    <GradientStop Color="#FF000000" Offset="0"/>
                    <GradientStop Color="#00FFFFFF" Offset="1"/>
                </RadialGradientBrush>
            </Image.OpacityMask>
        </Image>
        <Button HorizontalAlignment="Right" Margin="0,0,120,158" VerticalAlignment="Bottom" Width="179" Height="34" Content="My New Glass Button" 
                Foreground="#FFFFFFFF" Template="{DynamicResource GlassButton}"/>
        <Button Width="179" Foreground="#FFFFFFFF" Template="{DynamicResource GlassButton}" HorizontalAlignment="Right" Margin="0,192,120,218">
            <StackPanel HorizontalAlignment="Left" Width="Auto" Height="Auto" Orientation="Horizontal">
                <Image Width="20" Height="20" Source="Aero_Grass.jpg" Stretch="Fill"/>
                <TextBlock Margin="5,0,50,0" VerticalAlignment="Center" FontSize="12" Text="Internet Explorer" TextWrapping="Wrap"/>
            </StackPanel>
        </Button>
    </Grid>
</Window>

  本文来自work hard work smart的博客,原文地址:http://www.cnblogs.com/linlf03/archive/2011/11/08/2241135.html

 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:487798次
    • 积分:6080
    • 等级:
    • 排名:第4264名
    • 原创:16篇
    • 转载:634篇
    • 译文:0篇
    • 评论:22条
    最新评论