WPF 自定义标题栏

在做客户端应用程序时，往往觉得Windows自带的标题栏没有样式，不太好看，下面分享自自定义的一个Windows工具

效果图：

<Style x:Key="Buttonclock" TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid Width="11">
                            <Border BorderThickness="1"/>
                            <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Opacity="0.7"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsFocused" Value="True"/>
                            <Trigger Property="IsDefaulted" Value="True"/>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Opacity" TargetName="contentPresenter" Value="1"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="False">
                                <Setter Property="Opacity" TargetName="contentPresenter" Value="0.7"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Opacity" TargetName="contentPresenter" Value="1"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False"/>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

View Code

<Style x:Key="Buttonmini_minwindow" TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <ControlTemplate.Resources>
                            <Storyboard x:Key="Sbmini1">
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="rectangle">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
                                </ObjectAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="rectangle">
                                    <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="contentPresenter">
                                    <EasingDoubleKeyFrame KeyTime="0" Value="0.6"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                            <Storyboard x:Key="Sbmini2">
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="rectangle">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="{x:Static Visibility.Visible}"/>
                                </ObjectAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="rectangle">
                                    <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                                    <SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="contentPresenter">
                                    <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                                    <SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0.6"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </ControlTemplate.Resources>
                        <Grid>
                            <Rectangle x:Name="rectangle" RadiusX="0" Stroke="{x:Null}" Height="19" Width="26" Visibility="Hidden">
                                <Rectangle.Fill>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#003099E2" Offset="1"/>
                                        <GradientStop Color="#67FDFDFD" Offset="0.072"/>
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Opacity="0.6"/>
                            <Border BorderBrush="Black" BorderThickness="1" Opacity="0">
                                <Border.Background>
                                    <RadialGradientBrush>
                                        <GradientStop Color="#00000000" Offset="0"/>
                                        <GradientStop Color="White" Offset="1"/>
                                    </RadialGradientBrush>
                                </Border.Background>
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsDefaulted" Value="True"/>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Trigger.ExitActions>
                                    <BeginStoryboard x:Name="Sbmini2_BeginStoryboard" Storyboard="{StaticResource Sbmini2}"/>
                                </Trigger.ExitActions>
                                <Trigger.EnterActions>
                                    <BeginStoryboard Storyboard="{StaticResource Sbmini1}"/>
                                </Trigger.EnterActions>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="False"/>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Margin" TargetName="contentPresenter" Value="0"/>
                                <Setter Property="Visibility" TargetName="rectangle" Value="Visible"/>
                                <Setter Property="Fill" TargetName="rectangle">
                                    <Setter.Value>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="#003099E2" Offset="1"/>
                                            <GradientStop Color="#671F1F1F" Offset="0.072"/>
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False"/>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

View Code

<Style x:Key="Buttonclose_mainwidow" TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <ControlTemplate.Resources>
                            <Storyboard x:Key="sbstory1">
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="rectangle">
                                    <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="image">
                                    <EasingDoubleKeyFrame KeyTime="0" Value="0.6"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                            <Storyboard x:Key="sbstory2">
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="image">
                                    <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.6"/>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="rectangle">
                                    <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </ControlTemplate.Resources>
                        <Grid>
                            <Rectangle x:Name="rectangle" Margin="-12.167,0,0,-9.167" RadiusY="5.5" RadiusX="5" Stroke="#FF379FE6" StrokeThickness="0" Width="Auto" Clip="M12.167,0 L54.167,0 L54.167,20 L12.167,20 z" Opacity="0">
                                <Rectangle.Fill>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#99D91A1D" Offset="0.396"/>
                                        <GradientStop Color="#00D91A1D" Offset="0.726"/>
                                        <GradientStop Color="#7FFE5B5E"/>
                                        <GradientStop Color="#BFD6070B" Offset="0.104"/>
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <Image Source="/PermissionsDemo;component/image/csmmainwidow_Images/icons92.png" Stretch="None" Height="10" Width="12" Margin="0,0,0,-3" Opacity="1" Visibility="Hidden"/>
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"  Content="" />
                            <Image x:Name="image" Margin="0,0,0,-3" Source="/PermissionsDemo;component/image/csmmainwidow_Images/icons85.png" Stretch="None" Width="12" Height="10" Visibility="Visible" Opacity="0.6"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsFocused" Value="True"/>
                            <Trigger Property="IsDefaulted" Value="True"/>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Trigger.ExitActions>
                                    <BeginStoryboard x:Name="sbstory2_BeginStoryboard" Storyboard="{StaticResource sbstory2}"/>
                                </Trigger.ExitActions>
                                <Trigger.EnterActions>
                                    <BeginStoryboard Storyboard="{StaticResource sbstory1}"/>
                                </Trigger.EnterActions>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="False"/>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Opacity" TargetName="rectangle" Value="0.8"/>
                                <Setter Property="Margin" TargetName="image" Value="1,0,0,-4"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False"/>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

View Code

<Grid x:Name="LayoutRoot" Width="180" Height="22">
        <DockPanel LastChildFill="False" HorizontalAlignment="Right" Height="22">
            <Button Style="{StaticResource Buttonclock}">
                <Image Source="/PermissionsDemo;component/image/csmmainwidow_Images/icons96.png" Stretch="Fill" Width="11" Height="13" RenderOptions.BitmapScalingMode="NearestNeighbor"  />
            </Button>
            <Button Style="{StaticResource Buttonclock}" Margin="12,0,0,0">
                <Image Source="/PermissionsDemo;component/image/csmmainwidow_Images/icons95.png" Stretch="Fill" Width="11" Height="13" RenderOptions.BitmapScalingMode="NearestNeighbor"  />
            </Button>
            <Button Style="{StaticResource Buttonclock}" Margin="12,0">
                <Image Height="13" Source="/PermissionsDemo;component/image/csmmainwidow_Images/question.png" Stretch="Fill" Width="11" RenderOptions.BitmapScalingMode="NearestNeighbor" />
            </Button>
            <Border BorderBrush="#66FFFFFF" BorderThickness="1,0" Width="3">
                <Border.OpacityMask>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#99000000" Offset="0.323"/>
                        <GradientStop Offset="1"/>
                    </LinearGradientBrush>
                </Border.OpacityMask>
                <Border.Background>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FF25679B" Offset="0"/>
                        <GradientStop Color="#002B72A9" Offset="1"/>
                        <GradientStop Color="#FF2975AF" Offset="0.6"/>
                    </LinearGradientBrush>
                </Border.Background>
            </Border>
            <Button  Margin="0" Style="{StaticResource Buttonmini_minwindow}" Width="26" VerticalAlignment="Center">
                <Rectangle Fill="#FFF4F4F5" Height="3" VerticalAlignment="Bottom" Stroke="#C021698F" Width="11" Margin="0,10,0,0"/>
            </Button>
            <Border BorderBrush="#66FFFFFF" BorderThickness="1,0" Width="3">
                <Border.OpacityMask>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#99000000" Offset="0.323"/>
                        <GradientStop Offset="1"/>
                    </LinearGradientBrush>
                </Border.OpacityMask>
                <Border.Background>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FF25679B" Offset="0"/>
                        <GradientStop Color="#002B72A9" Offset="1"/>
                        <GradientStop Color="#FF2975AF" Offset="0.6"/>
                    </LinearGradientBrush>
                </Border.Background>
            </Border>
            <Button  Margin="0" Style="{StaticResource Buttonmini_minwindow}" Width="26" VerticalAlignment="Center">
                <Path Data="M2.5,2.5 L2.5,6.5 7.5,6.5 7.5,2.5 z M0.5,0.5 L9.5,0.5 9.5,8.5 0.5,8.5 z" HorizontalAlignment="Center" Height="9" Stretch="Fill" VerticalAlignment="Center" Width="10" Stroke="#C021698F" Margin="0,4,0,0">
                    <Path.Fill>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#FFE7E7E7" Offset="1"/>
                            <GradientStop Color="WhiteSmoke"/>
                        </LinearGradientBrush>
                    </Path.Fill>
                </Path>
            </Button>
            <Border BorderBrush="#66FFFFFF" BorderThickness="1,0" Width="3">
                <Border.OpacityMask>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#99000000" Offset="0.323"/>
                        <GradientStop Offset="1"/>
                    </LinearGradientBrush>
                </Border.OpacityMask>
                <Border.Background>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FF25679B" Offset="0"/>
                        <GradientStop Color="#002B72A9" Offset="1"/>
                        <GradientStop Color="#FF2975AF" Offset="0.6"/>
                    </LinearGradientBrush>
                </Border.Background>
            </Border>
            <Button RenderOptions.BitmapScalingMode="NearestNeighbor" Content="Button" HorizontalAlignment="Center" Margin="0,-1,0,0" Style="{StaticResource Buttonclose_mainwidow}" Width="42"/>
        </DockPanel>
    </Grid>

View Code

由于自己初学WPF，代码中可能有点冗余。

下面是工具栏中图片资源： mainwidow_Images.7z

页面资源文件源码：Titel.7z

猜你喜欢