WPF学习之创建非传统窗口和按钮

WPF的神奇功能注意就是可以很容易的创建非正方形的窗口，和按钮等。（也就是创建Gadget风格的应用程序）

 

按以下步骤：

 

1、在Window上把属性 AllowsTransparency="True" （这样就允许透明）

 

2、把Window的属性WindowStyle="None"移出所有的非客户区域，（由于第一步的原因，这一不是必须的，否则报错）

 

3、把Window的属性Background="Transparent"，这样就避免了背景是不透明的矩形围绕。

 

4、调用window的移动方法，是窗口可以移动，（如MouseLeftButtonDown去掉用该事件方法 this.DragMove();）（此不可以去掉）

 

5、添加一个关闭程序的按钮，否则程序只有在任务栏关闭。

 

6、这样就可以随心所欲的画出自己喜欢的页面。

 

如在XAML中写下代码：

 

 <Grid>
        <Ellipse Fill="Red" Opacity="0.5" Margin="20">
            <Ellipse.BitmapEffect>
                <DropShadowBitmapEffect/>
            </Ellipse.BitmapEffect>
        </Ellipse>
        <Button Margin="100" Click="Button_Click" >Close</Button>
    </Grid>

在后台写下：

 

  void Window_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            this.DragMove();
        }
        void Button_Click(object sender, RoutedEventArgs e)
        {
            this.Close();
        }

 

就实现了一个圆形窗口。

 

同样在完成以上的同时，还可以实现按钮也变成圆形：

 

在App.xaml文件中协商一下style文件

 

 <!--定义按钮样式-->

        <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>

                                <Ellipse Width="49" Height="49">

                                    <Ellipse.Fill>

                                        Red

                                    </Ellipse.Fill>

                                </Ellipse>

                                <!--按钮呈圆形-->

                            </Border>

                            <Ellipse x:Name="outerCircle" Width="50" Height="50">

                                <Ellipse.Fill>

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

                                        <GradientStop Offset="0" Color="DarkOliveGreen"/>

                                        <GradientStop Offset="1" Color="Azure"/>

                                    </LinearGradientBrush>

                                </Ellipse.Fill>

                            </Ellipse>

                            <Ellipse Width="40" Height="40">

                                <Ellipse.Fill>

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

                                        <GradientStop Offset="0" Color="White"/>

                                        <GradientStop Offset="1" Color="Transparent"/>

                                    </LinearGradientBrush>

                                </Ellipse.Fill>

                            </Ellipse>

                            <!--按钮内容-->

                            <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>

 

在将原来的button改为：        <Button Margin="100" Click="Button_Click" Style="{StaticResource buttonTemplate}">Close</Button>
引入对Style的调用，即可。