wpf之blend之自定义最小化按钮

每次看到别人写的sytle，都非常的羡慕。我一直在想，就看着xaml，就能写出漂亮的控件吗？

我觉得不太现实啊。

后来，经过这几天的学习，我了解到了blend这个工具，可以编写可视化的sytle，而且居然能自动生成xaml。

今天的任务是做一个按钮控件，如下图：最小化控件

 代码如下：

<Window x:Class="BlendOne.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:BlendOne"
        mc:Ignorable="d"
        Title="Window1" Height="450" Width="800" WindowStyle="None" AllowsTransparency="True">
    <Window.Resources>
        <Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid>
                            <Rectangle Name="rec" Fill="#FF01010E"/>
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition></RowDefinition>
                                    <RowDefinition></RowDefinition>
                                    <RowDefinition></RowDefinition>
                                    <RowDefinition></RowDefinition>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition></ColumnDefinition>
                                    <ColumnDefinition></ColumnDefinition>
                                    <ColumnDefinition></ColumnDefinition>
                                    <ColumnDefinition></ColumnDefinition>
                                </Grid.ColumnDefinitions>
                                <Grid Grid.Column="1" Grid.Row="2" Grid.ColumnSpan="2">
                                    <Rectangle Fill="#FFF9F9FC"/>
                                </Grid>

                            </Grid>

                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsFocused" Value="True"/>
                            <Trigger Property="IsDefaulted" Value="True"/>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Fill" TargetName="rec" Value="#5501010E"></Setter>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True"/>
                            <Trigger Property="IsEnabled" Value="False"/>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <Button Content="" HorizontalAlignment="Left" Height="147.962" Margin="180,80,0,0" Style="{DynamicResource ButtonStyle1}" VerticalAlignment="Top" Width="162.636"/>
        <Rectangle HorizontalAlignment="Left" Height="28.125" Margin="600,225,0,0" VerticalAlignment="Top" Width="74.593" Fill="#FFF6F6FA"/>
        <Button Content="" HorizontalAlignment="Left" Height="45" Margin="475,160,0,0" Style="{DynamicResource ButtonStyle1}" VerticalAlignment="Top" Width="50"/>

    </Grid>
</Window>

效果如下图：

 是不是好厉害，直接写了一个样式，就把最小化按钮实现了。