WPF 自适应窗体 UI
1、MainWindow 的样式设定
<Window Title="MainWindow" Height="576" Width="1024" ResizeMode="CanResize" WindowStartupLocation="CenterScreen" Background="{x:Null}">
定义一个 16：9 的窗体页面。设置窗体大小可变模式 ResizeMode=“CanResize” ，设置窗体无背景样式空。
2、WindowChrome.WindowChrome
自定义窗体 WindowChrome使用，使得原来的窗口被遮盖，不再显示window的标题栏，最大化、最小化和关闭按钮等，直接显示了一个无边框的窗体。
<WindowChrome.WindowChrome>
<WindowChrome/>
</WindowChrome.WindowChrome>
3、ViewBox
官方释义：定义一个内容修饰器，以便拉伸或缩放单一子项使其填满可用的控件。
ViewBox组件的作用是拉伸或延展位于其中的组件，以填满可用空间，使之有更好的布局及视觉效果。但是一个ViewBox控件中只能添加一个子项，多写就会报错。但是可使用 Grid 控件包裹，实现多控件填充，从而实现一个精美的UI界面。
2、常用属性介绍
Child：获取或设置一个ViewBox元素的单一子元素。
Stretch：获取或设置拉伸模式以决定该组件中的内容以怎样的形式填充该组件的已有空间。具体值如下
None：内容保持其原始大小。
Fill：调整内容的大小以填充目标尺寸。 不保留纵横比。
Uniform：在保留内容原有纵横比的同时调整内容的大小，以适合目标尺寸。
UniformToFill：在保留内容原有纵横比的同时调整内容的大小，以填充目标尺寸。 如果目标矩形的纵横比不同于源矩形的纵横比，则对源内容进行剪裁以适合目标尺寸。
StretchDirection：获取或设置该组件的拉伸方向以决定该组件中的内容将以何种形式被延展。描述缩放如何应用于内容，以及如何将缩放限制到指定的轴类型。具体值如下：
UpOnly：仅当内容小于父项时，它才会放大。 如果内容大于父项，不会执行任何缩小操作。
DownOnly：仅当内容大于父项时，它才会缩小。 如果内容小于父项，不会执行任何放大操作。
Both：内容根据 System.Windows.Media.Stretch 模式进行拉伸以适合父项的大小
4、WindowChrome+ViewBox 自适应的窗体案例
效果演示
4-1 创建WPF项目
创建一个 WPF 项目,名称为 WPFAutoSizeUI，框架版本 .Net Framework 4.6.1。
4.2 UI页面样式编写
如上图所示整个页面分成左侧菜单栏和右侧信息页面，使用 Grid布局实现左右分区。先修改窗体样式
<Window x:Class="WPFAutoSizeUI.MainWindow"
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"
mc:Ignorable="d"
Title="MainWindow" Height="576" Width="1024" ResizeMode="CanResize" WindowStartupLocation="CenterScreen" Background="{x:Null}">
<Grid>
</Grid>
</Window>
安装字体图标库引用，使用 NuGet 管理器下载，下载操作页面如下所示，下载完成后一定注意先运行一遍程序，然后在窗体中应用图标资源文件。
资源文件引用完成就如下所示： xmlns:fa=“http://schemas.fontawesome.io/icons/”
<Window x:Class="WPFAutoSizeUI.MainWindow"
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:WPFAutoSizeUI"
xmlns:fa="http://schemas.fontawesome.io/icons/"
mc:Ignorable="d"
Title="MainWindow" Height="576" Width="1024" ResizeMode="CanResize" WindowStartupLocation="CenterScreen" Background="{x:Null}">
<Grid>
</Grid>
</Window>
4.3 如何实现漂亮的UI
直接上代码：
<Window x:Class="WPFAutoSizeUI.MainWindow"
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:WPFAutoSizeUI"
xmlns:fa="http://schemas.fontawesome.io/icons/"
mc:Ignorable="d"
Title="MainWindow" Height="576" Width="1024" ResizeMode="CanResize" WindowStartupLocation="CenterScreen" Background="{x:Null}">
<Grid>
<!--背景-->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Width="220" CornerRadius="25 0 0 25">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#343155" Offset="0"/>
<GradientStop Color="#3B2E58" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<Border CornerRadius="0 25 25 0" Grid.Column="1" MouseDown="Border_MouseDown">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#3E3A65" Offset="0"/>
<GradientStop Color="#473765" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
</Grid>
<!--按钮控件-->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--菜单-->
<StackPanel Width="240">
<StackPanel Orientation="Horizontal" Margin="0 50 20 40" HorizontalAlignment="Center">
<fa:ImageAwesome Icon="CheckCircle" Foreground="White" Width="30"/>
<TextBlock Text="Wally" FontSize="20" FontWeight="Bold" VerticalAlignment="Center" Foreground="White" Margin="10,0,0,0"/>
</StackPanel>
<Button Style="{StaticResource activeMenuButton}">
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<fa:ImageAwesome Icon="FolderOutline" Style="{StaticResource buttonIcon}"/>
<TextBlock Text="Wallet" Style="{StaticResource buttonText}"/>
</StackPanel>
<fa:ImageAwesome Icon="AngleRight" HorizontalAlignment="Right" Visibility="Visible" Style="{StaticResource buttonIconExpended}"/>
</Grid>
</Button>
<Button Style="{StaticResource menuButton}">
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<fa:ImageAwesome Icon="BellOutline" Style="{StaticResource buttonIcon}"/>
<TextBlock Text="Notifocations" Style="{StaticResource buttonText}"/>
</StackPanel>
<fa:ImageAwesome Icon="AngleRight" HorizontalAlignment="Right" Style="{StaticResource buttonIconExpended}"/>
</Grid>
</Button>
<Button Style="{StaticResource menuButton}">
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<fa:ImageAwesome Icon="Money" Style="{StaticResource buttonIcon}"/>
<TextBlock Text="Deposit" Style="{StaticResource buttonText}"/>
</StackPanel>
<fa:ImageAwesome Icon="AngleRight" HorizontalAlignment="Right" Style="{StaticResource buttonIconExpended}"/>
</Grid>
</Button>
<Button Style="{StaticResource menuButton}">
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<fa:ImageAwesome Icon="Clone" Style="{StaticResource buttonIcon}"/>
<TextBlock Text="Records" Style="{StaticResource buttonText}"/>
</StackPanel>
<fa:ImageAwesome Icon="AngleRight" HorizontalAlignment="Right" Style="{StaticResource buttonIconExpended}"/>
</Grid>
</Button>
<Button Style="{StaticResource menuButton}">
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<fa:ImageAwesome Icon="CommentingOutline" Style="{StaticResource buttonIcon}"/>
<TextBlock Text="Message" Style="{StaticResource buttonText}"/>
</StackPanel>
<fa:ImageAwesome Icon="AngleRight" HorizontalAlignment="Right" Style="{StaticResource buttonIconExpended}"/>
</Grid>
</Button>
<Button Style="{StaticResource menuButton}">
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<fa:ImageAwesome Icon="Television" Style="{StaticResource buttonIcon}"/>
<TextBlock Text="Monitoring" Style="{StaticResource buttonText}"/>
</StackPanel>
<fa:ImageAwesome Icon="AngleRight" HorizontalAlignment="Right" Style="{StaticResource buttonIconExpended}"/>
</Grid>
</Button>
<Button Style="{StaticResource menuButton}">
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<fa:ImageAwesome Icon="CreditCard" Style="{StaticResource buttonIcon}"/>
<TextBlock Text="My Cards" Style="{StaticResource buttonText}"/>
</StackPanel>
<fa:ImageAwesome Icon="AngleRight" HorizontalAlignment="Right" Style="{StaticResource buttonIconExpended}"/>
</Grid>
</Button>
<Separator Background="#e0e0e0" Opacity="0.5" Margin="50 15 60 15"/>
<Button Style="{StaticResource menuButton}">
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<fa:ImageAwesome Icon="FloppyOutline" Style="{StaticResource buttonIcon}"/>
<TextBlock Text="Accounts" Style="{StaticResource buttonText}"/>
</StackPanel>
<fa:ImageAwesome Icon="AngleRight" HorizontalAlignment="Right" Style="{StaticResource buttonIconExpended}"/>
</Grid>
</Button>
<Button Style="{StaticResource menuButton}">
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<fa:ImageAwesome Icon="CircleOutline" Style="{StaticResource buttonIcon}"/>
<TextBlock Text="Logout" Style="{StaticResource buttonText}"/>
</StackPanel>
<fa:ImageAwesome Icon="AngleRight" HorizontalAlignment="Right" Style="{StaticResource buttonIconExpended}"/>
</Grid>
</Button>
</StackPanel>
<!--中间面板-->
<Grid Grid.Column="1">
<Border Margin="20 120 20 20" Style="{StaticResource border}">
<StackPanel Margin="10 88 10 10">
<TextBlock Text="Transfer" Foreground="#fcfcfc" TextAlignment="Center" FontSize="34" FontWeight="SemiBold"/>
<Grid Margin="0 12 0 22">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Content="Send" Style="{StaticResource activeTabButton}"/>
<Button Content="Apply For" Grid.Column="1" Style="{StaticResource tabButton}"/>
</Grid>
<TextBlock Text="Pay To" Style="{StaticResource textLabel}"/>
<TextBox Margin="0 10 0 5" TextAlignment="Center" Text="dsdsdeeeee"/>
<TextBlock FontSize="9" Foreground="#e0e0e0" TextAlignment="Center" Opacity="0.5" Margin="0 0 0 20" Text="Please enter the wallet if or destination email"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="Amount" Style="{StaticResource textLabel}"/>
<TextBox Margin="0 10 5 20" Grid.Row="1" Text="$ 3000.00"/>
<TextBlock Grid.Column="1" Margin="0 10 5 20" Text="Reason" Style="{StaticResource textLabel}"/>
<TextBox Margin="0 10 5 20" Grid.Row="1" Grid.Column="1" Text="$ 3000.00"/>
<TextBlock Grid.Row="2" Margin="0 4 3 0" Text="Commision" Style="{StaticResource textLabel}"/>
<TextBlock Grid.Column="1" Grid.Row="2" Margin="0 4 3 0" Text="Total : 3000.00" Style="{StaticResource textLabel}"/>
</Grid>
<Button Style="{StaticResource sendButton}">
<StackPanel Orientation="Horizontal">
<fa:ImageAwesome Icon="SendOutline" VerticalAlignment="Center" Style="{StaticResource whiteIcon}"/>
<TextBlock Text="Send" Margin="10 0 0 0" FontWeight="SemiBold"/>
</StackPanel>
</Button>
</StackPanel>
</Border>
<!--银行卡-->
<Border Margin="40 40 40 0" Style="{StaticResource cardBorder}">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="#d489ff" Offset="-0.2"/>
<GradientStop Color="#7985ff" Offset="0.5"/>
<GradientStop Color="#6ad8fd" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Grid>
<fa:FontAwesome Icon="Exchange" HorizontalAlignment="Left" VerticalAlignment="Top" Foreground="White" Opacity="0.9" Width="25" Margin="15 8 0 0"/>
<fa:FontAwesome Icon="CheckCircle" FontSize="20" HorizontalAlignment="Right" VerticalAlignment="Top" Foreground="White" Width="25" Margin="0 3 50 0"/>
<TextBlock Text="Wally" FontWeight="Bold" FontSize="12" HorizontalAlignment="Right" VerticalAlignment="Top" Foreground="White" Margin="0 5 15 0"/>
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
<TextBlock Text="56894" Style="{StaticResource bankCardNumber}"/>
<TextBlock Text="2500" Style="{StaticResource bankCardNumber}"/>
<TextBlock Text="1520" Style="{StaticResource bankCardNumber}"/>
<TextBlock Text="2400" Style="{StaticResource bankCardNumber}"/>
</StackPanel>
<TextBlock Text="$ 856231.00" Style="{StaticResource textLabel}" FontSize="20" FontWeight="SemiBold" VerticalAlignment="Bottom" Margin="13 0 0 5"/>
</Grid>
</Border>
</Grid>
<!--信息面板-->
<StackPanel Grid.Column="2" Margin="0 5 20 0">
<!--顶部菜单-->
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Margin="20 5 20 0">
<Button Style="{StaticResource topMenuButton}" Margin="10 0 0 0" Width="220" Height="50">
<StackPanel Orientation="Horizontal">
<fa:ImageAwesome Icon="Sliders" Style="{StaticResource topMenuIcon}"/>
<TextBlock Text="Add Filters" VerticalAlignment="Center" FontSize="14" Margin="8 0 0 0" />
</StackPanel>
</Button>
<Button Style="{StaticResource topMenuButton}" Margin="10 0 0 0" Height="50">
<fa:ImageAwesome Icon="BellOutline" Style="{StaticResource topMenuIcon}"/>
</Button>
<Button Style="{StaticResource topMenuButton}" Margin="10 0 0 0" Height="50">
<fa:ImageAwesome Icon="Search" Style="{StaticResource topMenuIcon}"/>
</Button>
</StackPanel>
<!--卡片信息-->
<Border Style="{StaticResource cardBorder}" Margin="20 10 0 0">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="#9085fa" Offset="0"/>
<GradientStop Color="#c77aff" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Grid>
<TextBlock Text="Blance" Style="{StaticResource textLabel}" VerticalAlignment="Top" Margin="15 8 0 0" FontSize="14" FontWeight="SemiBold"/>
<TextBlock Text="$ 80004.00" Style="{StaticResource textLabel}" VerticalAlignment="Center" Margin="15 0 0 10" FontSize="24" FontWeight="SemiBold"/>
<StackPanel VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0 8 10 0">
<Button Style="{StaticResource fillButton}">
<fa:ImageAwesome Icon="Dollar" Style="{StaticResource whiteIcon}" Width="10" Height="10"/>
</Button>
<Button Style="{StaticResource fillButton}" Margin="0 5 0 0">
<fa:ImageAwesome Icon="Percent" Style="{StaticResource whiteIcon}" Width="10" Height="10"/>
</Button>
</StackPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" Margin="15 0 0 5">
<Button Style="{StaticResource fillButton}">
<fa:ImageAwesome Icon="ArrowUp" Style="{StaticResource whiteIcon}" Width="10" Height="10"/>
</Button>
<TextBlock Text="+ $ 520.10" Style="{StaticResource textLabel}" Margin="10 0 20 0" FontWeight="SemiBold" VerticalAlignment="Center"/>
<Button Style="{StaticResource fillButton}">
<fa:ImageAwesome Icon="ArrowDown" Style="{StaticResource whiteIcon}" Width="10" Height="10"/>
</Button>
<TextBlock Text="+ $ 140.10" Style="{StaticResource textLabel}" Margin="10 0 20 0" FontWeight="SemiBold" VerticalAlignment="Center"/>
</StackPanel>
</Grid>
</Border>
<!--右侧卡面信息-->
<Border Style="{StaticResource border}" Margin="20 10 0 0">
<Grid Margin="15 13">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="Information" Foreground="#fcfcfc" FontSize="16" FontWeight="SemiBold" Margin="0 0 0 18" Grid.ColumnSpan="3"/>
<Button Style="{StaticResource button}" HorizontalAlignment="Right" VerticalAlignment="Top" Grid.ColumnSpan="3">
<fa:ImageAwesome Icon="Edit" Style="{StaticResource whiteIcon}" Width="14" Height="12"/>
</Button>
<fa:ImageAwesome Icon="MapMarker" Style="{StaticResource whiteIcon}" Grid.Row="1" VerticalAlignment="Top"/>
<fa:ImageAwesome Icon="Folder" Style="{StaticResource whiteIcon}" Grid.Row="2" VerticalAlignment="Top"/>
<TextBlock Text="Address ：" Style="{StaticResource textLabel}" Grid.Row="1" Grid.Column="1" Margin="10 0 10 18"/>
<TextBlock Text="Address ：" Style="{StaticResource textLabel}" Grid.Row="2" Grid.Column="1" Margin="10 0 10 0"/>
<TextBlock Text="Peru" Style="{StaticResource textLabel}" Grid.Row="1" Grid.Column="2"/>
<TextBlock Text="13355153854688654845468dad" Style="{StaticResource textLabel}" Grid.Row="2" Grid.Column="2"/>
</Grid>
</Border>
<!--安全信息-->
<Border Style="{StaticResource border}" Margin="20 10 0 0">
<Grid Margin="15 0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="Security" Foreground="#fcfcfc" FontSize="16" FontWeight="SemiBold" Margin="0 0 0 15" Grid.ColumnSpan="3"/>
<Button Style="{StaticResource button}" HorizontalAlignment="Right" VerticalAlignment="Top" Grid.ColumnSpan="3">
<fa:ImageAwesome Icon="EllipsisH" Style="{StaticResource whiteIcon}" Width="14" Height="12"/>
</Button>
<fa:ImageAwesome Icon="Shield" Style="{StaticResource whiteIcon}" Grid.Row="1" VerticalAlignment="Center"/>
<fa:ImageAwesome Icon="Key" Style="{StaticResource whiteIcon}" Grid.Row="2" VerticalAlignment="Center"/>
<fa:ImageAwesome Icon="Lock" Style="{StaticResource whiteIcon}" Grid.Row="3" VerticalAlignment="Center"/>
<TextBlock Text="2FA Enable" Style="{StaticResource textLabel}" Grid.Row="1" Grid.Column="1" Margin="10 0 0 0" VerticalAlignment="Center"/>
<TextBlock Text="Key" Style="{StaticResource textLabel}" Grid.Row="2" Grid.Column="1" Margin="10 0 0 0" VerticalAlignment="Center"/>
<TextBlock Text="Password" Style="{StaticResource textLabel}" Grid.Row="3" Grid.Column="1" Margin="10 0 0 0" VerticalAlignment="Center"/>
<Button Style="{StaticResource button}" HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Column="2" Grid.Row="1" Content="Change" Margin="0 5"/>
<Button Style="{StaticResource button}" HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Column="2" Grid.Row="2" Content="Change" Margin="0 5"/>
<Button Style="{StaticResource button}" HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Column="2" Grid.Row="3" Content="Change" Margin="0 5"/>
</Grid>
</Border>
</StackPanel>
</Grid>
</Grid>
</Window>
代码生城后效果如下：
我们发现界面存在令人讨厌的标题栏和最大化，最下化以及关闭按钮，并不是一个和无边框的窗体。接下来实现无边框操作。
这里注意有个样式资源需要手写出来，下面是样式资源文件代码：
<Application x:Class="WPFAutoSizeUI.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WalletPayment"
xmlns:fa="http://schemas.fontawesome.io/icons/"
StartupUri="MainWindow.xaml">
<Application.Resources>
<Style x:Key="menuButton" TargetType="Button">
<Setter Property="Height" Value="47"/>
<Setter Property="Width" Value="217"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="#f0f0f0"/>
<Setter Property="Margin" Value="0"/>
<Setter Property="HorizontalAlignment" Value="Right"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}" CornerRadius="20" Padding="20 0" BorderThickness="3 0 0 0" BorderBrush="Transparent">
<ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#21203b"/>
<Setter Property="Foreground" Value="#e9e9e9"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}" CornerRadius="20" Padding="20 0" BorderThickness="3 0 0 0">
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#d489ff" Offset="0"/>
<GradientStop Color="#7985ff" Offset="0.5"/>
<GradientStop Color="#6ad8fd" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsMouseCaptured" Value="True">
<Setter Property="Background" Value="#1a192e"/>
<Setter Property="Foreground" Value="#ffffff"/>
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="buttonIcon" TargetType="fa:ImageAwesome">
<Setter Property="Height" Value="18"/>
<Setter Property="Width" Value="18"/>
<Setter Property="Foreground" Value="{Binding Path=Foreground,RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}"/>
</Style>
<Style x:Key="buttonIconExpended" TargetType="fa:ImageAwesome">
<Setter Property="Height" Value="10"/>
<Setter Property="Width" Value="10"/>
<Setter Property="HorizontalAlignment" Value="Right"/>
<Setter Property="Visibility" Value="Hidden"/>
<Setter Property="Foreground" Value="{Binding Path=Foreground,RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=IsMouseOver,RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}" Value="True">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
<Style x:Key="buttonText" TargetType="TextBlock">
<Setter Property="Margin" Value="13 0 0 0"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
</Style>
<Style x:Key="activeMenuButton" TargetType="Button" BasedOn="{StaticResource menuButton}">
<Setter Property="Background" Value="#21203b"/>
<Setter Property="Foreground" Value="#e9e9e9"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#21203b"/>
<Setter Property="Foreground" Value="#e9e9e9"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}" CornerRadius="20" Padding="20 0" BorderThickness="3 0 0 0">
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#d489ff" Offset="0"/>
<GradientStop Color="#7985ff" Offset="0.5"/>
<GradientStop Color="#6ad8fd" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsMouseCaptured" Value="True">
<Setter Property="Background" Value="#21203b"/>
<Setter Property="Foreground" Value="#ffffff"/>
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="border" TargetType="Border">
<Setter Property="Background" Value="#362f54"/>
<Setter Property="Padding" Value="10"/>
<Setter Property="CornerRadius" Value="25"/>
<Setter Property="VerticalAlignment" Value="top"/>
</Style>
<Style x:Key="tabButton" TargetType="Button">
<Setter Property="Height" Value="50"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="#fcfcfc"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}" Padding="20 0" BorderThickness="0 0 0 2" BorderBrush="#3f375f">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="#e9e9e9"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}" Padding="20 0" BorderThickness="0 0 0 2">
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="#d489ff" Offset="0"/>
<GradientStop Color="#7985ff" Offset="0.5"/>
<GradientStop Color="#6ad8fd" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsMouseCaptured" Value="True">
<Setter Property="Foreground" Value="#ffffff"/>
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="activeTabButton" TargetType="Button" BasedOn="{StaticResource tabButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}" Padding="20 10" BorderThickness="0 0 0 2">
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="#d489ff" Offset="0"/>
<GradientStop Color="#7985ff" Offset="0.5"/>
<GradientStop Color="#6ad8fd" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="textLabel" TargetType="TextBlock">
<Setter Property="Foreground" Value="#fcfcfc"/>
</Style>
<Style TargetType="TextBox">
<Setter Property="Background" Value="#3f375f"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Padding" Value="15 12"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="Foreground" Value="#fcfcfc"/>
<Style.Resources>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="15"/>
</Style>
</Style.Resources>
</Style>
<Style x:Key="sendButton" TargetType="Button">
<Setter Property="Height" Value="50"/>
<Setter Property="Foreground" Value="#f0f0f0"/>
<Setter Property="Margin" Value="0 15 0 0"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Padding="20 0" BorderThickness="0" CornerRadius="20">
<Border.Background>
<LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
<GradientStop Color="#7985ff" Offset="0"/>
<GradientStop Color="#6ad8fd" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="White"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Padding="20 0" CornerRadius="20" BorderThickness="0">
<Border.Background>
<LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
<GradientStop Color="#7985ff" Offset="0.5"/>
<GradientStop Color="#6ad8fd" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="whiteIcon" TargetType="fa:ImageAwesome">
<Setter Property="Height" Value="15"/>
<Setter Property="Width" Value="15"/>
<Setter Property="Foreground" Value="#f0f0f0"/>
</Style>
<Style x:Key="cardBorder" TargetType="Border">
<Setter Property="Height" Value="150"/>
<Setter Property="Padding" Value="10"/>
<Setter Property="CornerRadius" Value="25"/>
<Setter Property="VerticalAlignment" Value="Top"/>
</Style>
<Style x:Key="bankCardNumber" TargetType="TextBlock">
<Setter Property="Margin" Value="17 0"/>
<Setter Property="FontSize" Value="16"/>
<Setter Property="Foreground" Value="#fcfcfc"/>
</Style>
<!--信息面板-->
<Style x:Key="topMenuIcon" TargetType="fa:ImageAwesome">
<Setter Property="Margin" Value="4"/>
<Setter Property="Height" Value="14"/>
<Setter Property="Width" Value="16"/>
<Setter Property="Foreground" Value="#f0f0f0"/>
</Style>
<Style x:Key="button" TargetType="Button">
<Setter Property="Foreground" Value="#f0f0f0"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}" Padding="10 8" BorderThickness="1" CornerRadius="10" BorderBrush="#504373">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#504373"/>
<Setter Property="Foreground" Value="#f0f0f0"/>
</Trigger>
<Trigger Property="IsMouseCaptured" Value="True">
<Setter Property="Background" Value="#2f2745"/>
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="topMenuButton" TargetType="Button" BasedOn="{StaticResource button}">
<Setter Property="Background" Value="#3c315b"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}" Padding="10 8" BorderThickness="1" CornerRadius="15" BorderBrush="#504373">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="fillButton" TargetType="Button" BasedOn="{StaticResource button}">
<Setter Property="Background" Value="#6b5a96"/>
</Style>
</Application.Resources>
</Application>
4.4 去边框操作
增加自定义窗体
<WindowChrome.WindowChrome>
<WindowChrome/>
</WindowChrome.WindowChrome>
重新运行后页面效果如下：我们发现原来的标题栏不见了，窗体可以自由拖拽大小，但是又引来新的问题，窗体内的空间不能自适应窗体大小的改变。
4.5 控件自适应操作
增加 Viewbox ，使得控件能够自动填充变化后的界面大小。代码如下：
<Viewbox x:Name="RootViewbox" Stretch="Fill">
<Grid x:Name="RootGrid" MinWidth="1024" MinHeight="576" ClipToBounds="True" Background="DarkOrchid">
</Grid>
</Viewbox>
我们将整个UI的代码放进Viewbox ，新增最小化、最大化和窗体关闭按钮。 如下所示：
<Viewbox x:Name="RootViewbox" Stretch="Fill">
<Grid x:Name="RootGrid" MinWidth="1024" MinHeight="576" ClipToBounds="True" Background="DarkOrchid">
<!--背景-->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--<Border Width="220" CornerRadius="25 0 0 25">-->
<Border Width="220">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#343155" Offset="0"/>
<GradientStop Color="#3B2E58" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<Border Grid.Column="1" MouseDown="Border_MouseDown">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#3E3A65" Offset="0"/>
<GradientStop Color="#473765" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
</Grid>
<!--按钮控件-->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--菜单-->
<StackPanel Width="240">
<StackPanel Orientation="Horizontal" Margin="0 50 20 40" HorizontalAlignment="Center">
<fa:ImageAwesome Icon="CheckCircle" Foreground="White" Width="30"/>
<TextBlock Text="Wally" FontSize="20" FontWeight="Bold" VerticalAlignment="Center" Foreground="White" Margin="10,0,0,0"/>
</StackPanel>
<Button Style="{StaticResource activeMenuButton}">
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<fa:ImageAwesome Icon="FolderOutline" Style="{StaticResource buttonIcon}"/>
<TextBlock Text="Wallet" Style="{StaticResource buttonText}"/>
</StackPanel>
<fa:ImageAwesome Icon="AngleRight" HorizontalAlignment="Right" Visibility="Visible" Style="{StaticResource buttonIconExpended}"/>
</Grid>
</Button>
<Button Style="{StaticResource menuButton}">
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<fa:ImageAwesome Icon="BellOutline" Style="{StaticResource buttonIcon}"/>
<TextBlock Text="Notifocations" Style="{StaticResource buttonText}"/>
</StackPanel>
<fa:ImageAwesome Icon="AngleRight" HorizontalAlignment="Right" Style="{StaticResource buttonIconExpended}"/>
</Grid>
</Button>
<Button Style="{StaticResource menuButton}">
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<fa:ImageAwesome Icon="Money" Style="{StaticResource buttonIcon}"/>
<TextBlock Text="Deposit" Style="{StaticResource buttonText}"/>
</StackPanel>
<fa:ImageAwesome Icon="AngleRight" HorizontalAlignment="Right" Style="{StaticResource buttonIconExpended}"/>
</Grid>
</Button>
<Button Style="{StaticResource menuButton}">
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<fa:ImageAwesome Icon="Clone" Style="{StaticResource buttonIcon}"/>
<TextBlock Text="Records" Style="{StaticResource buttonText}"/>
</StackPanel>
<fa:ImageAwesome Icon="AngleRight" HorizontalAlignment="Right" Style="{StaticResource buttonIconExpended}"/>
</Grid>
</Button>
<Button Style="{StaticResource menuButton}">
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<fa:ImageAwesome Icon="CommentingOutline" Style="{StaticResource buttonIcon}"/>
<TextBlock Text="Message" Style="{StaticResource buttonText}"/>
</StackPanel>
<fa:ImageAwesome Icon="AngleRight" HorizontalAlignment="Right" Style="{StaticResource buttonIconExpended}"/>
</Grid>
</Button>
<Button Style="{StaticResource menuButton}">
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<fa:ImageAwesome Icon="Television" Style="{StaticResource buttonIcon}"/>
<TextBlock Text="Monitoring" Style="{StaticResource buttonText}"/>
</StackPanel>
<fa:ImageAwesome Icon="AngleRight" HorizontalAlignment="Right" Style="{StaticResource buttonIconExpended}"/>
</Grid>
</Button>
<Button Style="{StaticResource menuButton}">
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<fa:ImageAwesome Icon="CreditCard" Style="{StaticResource buttonIcon}"/>
<TextBlock Text="My Cards" Style="{StaticResource buttonText}"/>
</StackPanel>
<fa:ImageAwesome Icon="AngleRight" HorizontalAlignment="Right" Style="{StaticResource buttonIconExpended}"/>
</Grid>
</Button>
<Separator Background="#e0e0e0" Opacity="0.5" Margin="50 15 60 15"/>
<Button Style="{StaticResource menuButton}">
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<fa:ImageAwesome Icon="FloppyOutline" Style="{StaticResource buttonIcon}"/>
<TextBlock Text="Accounts" Style="{StaticResource buttonText}"/>
</StackPanel>
<fa:ImageAwesome Icon="AngleRight" HorizontalAlignment="Right" Style="{StaticResource buttonIconExpended}"/>
</Grid>
</Button>
<Button Style="{StaticResource menuButton}">
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<fa:ImageAwesome Icon="CircleOutline" Style="{StaticResource buttonIcon}"/>
<TextBlock Text="Logout" Style="{StaticResource buttonText}"/>
</StackPanel>
<fa:ImageAwesome Icon="AngleRight" HorizontalAlignment="Right" Style="{StaticResource buttonIconExpended}"/>
</Grid>
</Button>
</StackPanel>
<!--中间面板-->
<Grid Grid.Column="1">
<Border Margin="20 120 20 20" Style="{StaticResource border}">
<StackPanel Margin="10 88 10 10">
<TextBlock Text="Transfer" Foreground="#fcfcfc" TextAlignment="Center" FontSize="34" FontWeight="SemiBold"/>
<Grid Margin="0 12 0 22">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Content="Send" Style="{StaticResource activeTabButton}"/>
<Button Content="Apply For" Grid.Column="1" Style="{StaticResource tabButton}"/>
</Grid>
<TextBlock Text="Pay To" Style="{StaticResource textLabel}"/>
<TextBox Margin="0 10 0 5" TextAlignment="Center" Text="dsdsdeeeee"/>
<TextBlock FontSize="9" Foreground="#e0e0e0" TextAlignment="Center" Opacity="0.5" Margin="0 0 0 20" Text="Please enter the wallet if or destination email"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="Amount" Style="{StaticResource textLabel}"/>
<TextBox Margin="0 10 5 20" Grid.Row="1" Text="$ 3000.00"/>
<TextBlock Grid.Column="1" Margin="0 10 5 20" Text="Reason" Style="{StaticResource textLabel}"/>
<TextBox Margin="0 10 5 20" Grid.Row="1" Grid.Column="1" Text="$ 3000.00"/>
<TextBlock Grid.Row="2" Margin="0 4 3 0" Text="Commision" Style="{StaticResource textLabel}"/>
<TextBlock Grid.Column="1" Grid.Row="2" Margin="0 4 3 0" Text="Total : 3000.00" Style="{StaticResource textLabel}"/>
</Grid>
<Button Style="{StaticResource sendButton}">
<StackPanel Orientation="Horizontal">
<fa:ImageAwesome Icon="SendOutline" VerticalAlignment="Center" Style="{StaticResource whiteIcon}"/>
<TextBlock Text="Send" Margin="10 0 0 0" FontWeight="SemiBold"/>
</StackPanel>
</Button>
</StackPanel>
</Border>
<!--银行卡-->
<Border Margin="40 40 40 0" Style="{StaticResource cardBorder}">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="#d489ff" Offset="-0.2"/>
<GradientStop Color="#7985ff" Offset="0.5"/>
<GradientStop Color="#6ad8fd" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Grid>
<fa:FontAwesome Icon="Exchange" HorizontalAlignment="Left" VerticalAlignment="Top" Foreground="White" Opacity="0.9" Width="25" Margin="15 8 0 0"/>
<fa:FontAwesome Icon="CheckCircle" FontSize="20" HorizontalAlignment="Right" VerticalAlignment="Top" Foreground="White" Width="25" Margin="0 3 50 0"/>
<TextBlock Text="Wally" FontWeight="Bold" FontSize="12" HorizontalAlignment="Right" VerticalAlignment="Top" Foreground="White" Margin="0 5 15 0"/>
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
<TextBlock Text="56894" Style="{StaticResource bankCardNumber}"/>
<TextBlock Text="2500" Style="{StaticResource bankCardNumber}"/>
<TextBlock Text="1520" Style="{StaticResource bankCardNumber}"/>
<TextBlock Text="2400" Style="{StaticResource bankCardNumber}"/>
</StackPanel>
<TextBlock Text="$ 856231.00" Style="{StaticResource textLabel}" FontSize="20" FontWeight="SemiBold" VerticalAlignment="Bottom" Margin="13 0 0 5"/>
</Grid>
</Border>
</Grid>
<!--信息面板-->
<StackPanel Grid.Column="2" Margin="0 5 20 0">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Margin="35 0 -15 0">
<Button Style="{StaticResource sysButton}" Margin="0" Click="Min_Click">
<fa:ImageAwesome Icon="Minus" Style="{StaticResource purpleIcon}" HorizontalAlignment="Right"/>
</Button>
<Button Style="{StaticResource sysButton}" Margin="0" Click="Max_Click">
<fa:ImageAwesome Icon="Clone" Style="{StaticResource purpleIcon}" HorizontalAlignment="Right"/>
</Button>
<Button Style="{StaticResource sysButton}" Margin="0" Click="Close_Click">
<fa:ImageAwesome Icon="Close" Style="{StaticResource purpleIcon}" HorizontalAlignment="Right"/>
</Button>
</StackPanel>
<!--功能按钮-->
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Margin="20 5 20 0">
<Button Style="{StaticResource topMenuButton}" Margin="10 20 0 0" Width="220" Height="50">
<StackPanel Orientation="Horizontal">
<fa:ImageAwesome Icon="Sliders" Style="{StaticResource topMenuIcon}"/>
<TextBlock Text="Add Filters" VerticalAlignment="Center" FontSize="14" Margin="8 0 0 0" />
</StackPanel>
</Button>
<Button Style="{StaticResource topMenuButton}" Margin="10 20 0 0" Height="50">
<fa:ImageAwesome Icon="BellOutline" Style="{StaticResource topMenuIcon}"/>
</Button>
<Button Style="{StaticResource topMenuButton}" Margin="10 20 0 0" Height="50">
<fa:ImageAwesome Icon="Search" Style="{StaticResource topMenuIcon}"/>
</Button>
</StackPanel>
<!--卡片信息-->
<Border Style="{StaticResource cardBorder}" Margin="20 25 0 0">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="#9085fa" Offset="0"/>
<GradientStop Color="#c77aff" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Grid>
<TextBlock Text="Blance" Style="{StaticResource textLabel}" VerticalAlignment="Top" Margin="15 8 0 0" FontSize="14" FontWeight="SemiBold"/>
<TextBlock Text="$ 80004.00" Style="{StaticResource textLabel}" VerticalAlignment="Center" Margin="15 0 0 10" FontSize="24" FontWeight="SemiBold"/>
<StackPanel VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0 8 10 0">
<Button Style="{StaticResource fillButton}">
<fa:ImageAwesome Icon="Dollar" Style="{StaticResource whiteIcon}" Width="10" Height="10"/>
</Button>
<Button Style="{StaticResource fillButton}" Margin="0 5 0 0">
<fa:ImageAwesome Icon="Percent" Style="{StaticResource whiteIcon}" Width="10" Height="10"/>
</Button>
</StackPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" Margin="15 0 0 5">
<Button Style="{StaticResource fillButton}">
<fa:ImageAwesome Icon="ArrowUp" Style="{StaticResource whiteIcon}" Width="10" Height="10"/>
</Button>
<TextBlock Text="+ $ 520.10" Style="{StaticResource textLabel}" Margin="10 0 20 0" FontWeight="SemiBold" VerticalAlignment="Center"/>
<Button Style="{StaticResource fillButton}">
<fa:ImageAwesome Icon="ArrowDown" Style="{StaticResource whiteIcon}" Width="10" Height="10"/>
</Button>
<TextBlock Text="+ $ 140.10" Style="{StaticResource textLabel}" Margin="10 0 20 0" FontWeight="SemiBold" VerticalAlignment="Center"/>
</StackPanel>
</Grid>
</Border>
<!--右侧卡面信息-->
<Border Style="{StaticResource border}" Margin="20 25 0 0">
<Grid Margin="15 13">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="Information" Foreground="#fcfcfc" FontSize="16" FontWeight="SemiBold" Margin="0 0 0 18" Grid.ColumnSpan="3"/>
<Button Style="{StaticResource button}" HorizontalAlignment="Right" VerticalAlignment="Top" Grid.ColumnSpan="3">
<fa:ImageAwesome Icon="Edit" Style="{StaticResource whiteIcon}" Width="14" Height="12"/>
</Button>
<fa:ImageAwesome Icon="MapMarker" Style="{StaticResource whiteIcon}" Grid.Row="1" VerticalAlignment="Top"/>
<fa:ImageAwesome Icon="Folder" Style="{StaticResource whiteIcon}" Grid.Row="2" VerticalAlignment="Top"/>
<TextBlock Text="Address ：" Style="{StaticResource textLabel}" Grid.Row="1" Grid.Column="1" Margin="10 0 10 18"/>
<TextBlock Text="Address ：" Style="{StaticResource textLabel}" Grid.Row="2" Grid.Column="1" Margin="10 0 10 0"/>
<TextBlock Text="Peru" Style="{StaticResource textLabel}" Grid.Row="1" Grid.Column="2"/>
<TextBlock Text="13355153854688654845468dad" Style="{StaticResource textLabel}" Grid.Row="2" Grid.Column="2"/>
</Grid>
</Border>
<!--安全信息-->
<Border Style="{StaticResource border}" Margin="20 25 0 0">
<Grid Margin="15 0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="Security" Foreground="#fcfcfc" FontSize="16" FontWeight="SemiBold" Margin="0 0 0 15" Grid.ColumnSpan="3"/>
<Button Style="{StaticResource button}" HorizontalAlignment="Right" VerticalAlignment="Top" Grid.ColumnSpan="3">
<fa:ImageAwesome Icon="EllipsisH" Style="{StaticResource whiteIcon}" Width="14" Height="12"/>
</Button>
<fa:ImageAwesome Icon="Shield" Style="{StaticResource whiteIcon}" Grid.Row="1" VerticalAlignment="Center"/>
<fa:ImageAwesome Icon="Key" Style="{StaticResource whiteIcon}" Grid.Row="2" VerticalAlignment="Center"/>
<fa:ImageAwesome Icon="Lock" Style="{StaticResource whiteIcon}" Grid.Row="3" VerticalAlignment="Center"/>
<TextBlock Text="2FA Enable" Style="{StaticResource textLabel}" Grid.Row="1" Grid.Column="1" Margin="10 0 0 0" VerticalAlignment="Center"/>
<TextBlock Text="Key" Style="{StaticResource textLabel}" Grid.Row="2" Grid.Column="1" Margin="10 0 0 0" VerticalAlignment="Center"/>
<TextBlock Text="Password" Style="{StaticResource textLabel}" Grid.Row="3" Grid.Column="1" Margin="10 0 0 0" VerticalAlignment="Center"/>
<Button Style="{StaticResource button}" HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Column="2" Grid.Row="1" Content="Change" Margin="0 5"/>
<Button Style="{StaticResource button}" HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Column="2" Grid.Row="2" Content="Change" Margin="0 5"/>
<Button Style="{StaticResource button}" HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Column="2" Grid.Row="3" Content="Change" Margin="0 5"/>
</Grid>
</Border>
</StackPanel>
</Grid>
</Grid>
</Viewbox>
这时候，我们能看到页面的样式如下：
当然，要看到这个页面前提是实现了最大化、最小化、关闭和可拖拽按钮方法，在 MainWindow 中实现按钮方法如下所示：
private void Border_MouseDown(object sender, MouseButtonEventArgs e)
{
if (e.ChangedButton == MouseButton.Left)
{
this.DragMove();
}
}
private void Min_Click(object sender, RoutedEventArgs e)
{
this.WindowState = WindowState.Minimized;
}
private void Max_Click(object sender, RoutedEventArgs e)
{
if (WindowState == WindowState.Normal)
{
WindowState = WindowState.Maximized;
}
else
{
WindowState = WindowState.Normal;
}
}
private void Close_Click(object sender, RoutedEventArgs e)
{
Environment.Exit(0);
}
其次样式文件需要做最终的修改，修改后的央视资源文件代码如下：
<Application x:Class="WPFAutoSizeUI.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:fa="http://schemas.fontawesome.io/icons/"
xmlns:local="clr-namespace:WPFAutoSizeUI"
StartupUri="MainWindow.xaml">
<Application.Resources>
<Style x:Key="menuButton" TargetType="Button">
<Setter Property="Height" Value="47"/>
<Setter Property="Width" Value="217"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="#f0f0f0"/>
<Setter Property="Margin" Value="0"/>
<Setter Property="HorizontalAlignment" Value="Right"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}" CornerRadius="20" Padding="20 0" BorderThickness="3 0 0 0" BorderBrush="Transparent">
<ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#21203b"/>
<Setter Property="Foreground" Value="#e9e9e9"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}" CornerRadius="20" Padding="20 0" BorderThickness="3 0 0 0">
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#d489ff" Offset="0"/>
<GradientStop Color="#7985ff" Offset="0.5"/>
<GradientStop Color="#6ad8fd" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsMouseCaptured" Value="True">
<Setter Property="Background" Value="#1a192e"/>
<Setter Property="Foreground" Value="#ffffff"/>
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="buttonIcon" TargetType="fa:ImageAwesome">
<Setter Property="Height" Value="18"/>
<Setter Property="Width" Value="18"/>
<Setter Property="Foreground" Value="{Binding Path=Foreground,RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}"/>
</Style>
<Style x:Key="buttonIconExpended" TargetType="fa:ImageAwesome">
<Setter Property="Height" Value="10"/>
<Setter Property="Width" Value="10"/>
<Setter Property="HorizontalAlignment" Value="Right"/>
<Setter Property="Visibility" Value="Hidden"/>
<Setter Property="Foreground" Value="{Binding Path=Foreground,RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=IsMouseOver,RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}" Value="True">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
<Style x:Key="buttonText" TargetType="TextBlock">
<Setter Property="Margin" Value="13 0 0 0"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
</Style>
<Style x:Key="activeMenuButton" TargetType="Button" BasedOn="{StaticResource menuButton}">
<Setter Property="Background" Value="#21203b"/>
<Setter Property="Foreground" Value="#e9e9e9"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#21203b"/>
<Setter Property="Foreground" Value="#e9e9e9"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}" CornerRadius="20" Padding="20 0" BorderThickness="3 0 0 0">
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#d489ff" Offset="0"/>
<GradientStop Color="#7985ff" Offset="0.5"/>
<GradientStop Color="#6ad8fd" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsMouseCaptured" Value="True">
<Setter Property="Background" Value="#21203b"/>
<Setter Property="Foreground" Value="#ffffff"/>
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="border" TargetType="Border">
<Setter Property="Background" Value="#362f54"/>
<Setter Property="Padding" Value="10"/>
<Setter Property="CornerRadius" Value="25"/>
<Setter Property="VerticalAlignment" Value="top"/>
</Style>
<Style x:Key="tabButton" TargetType="Button">
<Setter Property="Height" Value="50"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="#fcfcfc"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}" Padding="20 0" BorderThickness="0 0 0 2" BorderBrush="#3f375f">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="#e9e9e9"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}" Padding="20 0" BorderThickness="0 0 0 2">
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="#d489ff" Offset="0"/>
<GradientStop Color="#7985ff" Offset="0.5"/>
<GradientStop Color="#6ad8fd" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsMouseCaptured" Value="True">
<Setter Property="Foreground" Value="#ffffff"/>
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="activeTabButton" TargetType="Button" BasedOn="{StaticResource tabButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}" Padding="20 10" BorderThickness="0 0 0 2">
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="#d489ff" Offset="0"/>
<GradientStop Color="#7985ff" Offset="0.5"/>
<GradientStop Color="#6ad8fd" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="textLabel" TargetType="TextBlock">
<Setter Property="Foreground" Value="#fcfcfc"/>
</Style>
<Style TargetType="TextBox">
<Setter Property="Background" Value="#3f375f"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Padding" Value="15 12"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="Foreground" Value="#fcfcfc"/>
<Style.Resources>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="15"/>
</Style>
</Style.Resources>
</Style>
<Style x:Key="sendButton" TargetType="Button">
<Setter Property="Height" Value="50"/>
<Setter Property="Foreground" Value="#f0f0f0"/>
<Setter Property="Margin" Value="0 15 0 0"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Padding="20 0" BorderThickness="0" CornerRadius="20">
<Border.Background>
<LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
<GradientStop Color="#7985ff" Offset="0"/>
<GradientStop Color="#6ad8fd" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="White"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Padding="20 0" CornerRadius="20" BorderThickness="0">
<Border.Background>
<LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
<GradientStop Color="#7985ff" Offset="0.5"/>
<GradientStop Color="#6ad8fd" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="whiteIcon" TargetType="fa:ImageAwesome">
<Setter Property="Height" Value="15"/>
<Setter Property="Width" Value="15"/>
<Setter Property="Foreground" Value="#f0f0f0"/>
</Style>
<Style x:Key="cardBorder" TargetType="Border">
<Setter Property="Height" Value="150"/>
<Setter Property="Padding" Value="10"/>
<Setter Property="CornerRadius" Value="25"/>
<Setter Property="VerticalAlignment" Value="Top"/>
</Style>
<Style x:Key="bankCardNumber" TargetType="TextBlock">
<Setter Property="Margin" Value="17 0"/>
<Setter Property="FontSize" Value="16"/>
<Setter Property="Foreground" Value="#fcfcfc"/>
</Style>
<!--信息面板-->
<Style x:Key="topMenuIcon" TargetType="fa:ImageAwesome">
<Setter Property="Margin" Value="4"/>
<Setter Property="Height" Value="14"/>
<Setter Property="Width" Value="16"/>
<Setter Property="Foreground" Value="#f0f0f0"/>
</Style>
<Style x:Key="button" TargetType="Button">
<Setter Property="Foreground" Value="#f0f0f0"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}" Padding="10 8" BorderThickness="1" CornerRadius="10" BorderBrush="#504373">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#504373"/>
<Setter Property="Foreground" Value="#f0f0f0"/>
</Trigger>
<Trigger Property="IsMouseCaptured" Value="True">
<Setter Property="Background" Value="#2f2745"/>
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="purpleIcon" TargetType="fa:ImageAwesome">
<Setter Property="Height" Value="15"/>
<Setter Property="Width" Value="15"/>
<Setter Property="Foreground" Value="#c77aff"/>
</Style>
<Style x:Key="sysButton" TargetType="Button" BasedOn="{StaticResource button}">
<Setter Property="Height" Value="35"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}" Padding="15 0" BorderThickness="0">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#504373"/>
</Trigger>
<Trigger Property="IsMouseCaptured" Value="True">
<Setter Property="Background" Value="#2f2745"/>
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="topMenuButton" TargetType="Button" BasedOn="{StaticResource button}">
<Setter Property="Background" Value="#3c315b"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}" Padding="10 8" BorderThickness="1" CornerRadius="15" BorderBrush="#504373">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="fillButton" TargetType="Button" BasedOn="{StaticResource button}">
<Setter Property="Background" Value="#6b5a96"/>
</Style>
</Application.Resources>
</Application>
5 总结
以上内容均属于个人学习到的一种方法，不代表绝对的唯一性，实现无边窗体的方法有很多种，这里也只是个人学到的一种，欢迎大家一起交流学习。
源代码下载 https://download.csdn.net/download/qq_21419015/87090483
或者加入 QQ群 733530469 领取源码
1046
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
