【C#WPF】 樣式-外聯
阿新 • • 發佈：2019-02-05
1. 新建資源字典 xaml
eg：
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:CommonLib.Styles"> <Style x:Key="FIcon" TargetType="TextBlock"> <!--<Setter Property="FontFamily" Value="/MefMain;component/Resources/#iconfont"></Setter>--> <!--<Setter Property="TextElement.FontFamily" Value="pack://application:,,,/#FontAwesome" />--> <Setter Property="FontFamily" Value="/Resources/#iconfont"></Setter> <Setter Property="TextAlignment" Value="Center"/> <Setter Property="HorizontalAlignment" Value="Center"/> <Setter Property="VerticalAlignment" Value="Center"/> <Setter Property="FontSize" Value="20"/> </Style> <!--Button Start --> <Style x:Key="ButtonFocusVisual"> <Setter Property="Control.Template"> <Setter.Value> <ControlTemplate> <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/> </ControlTemplate> </Setter.Value> </Setter> </Style> <Style x:Key="ButtonStyle1" TargetType="{x:Type Button}"> <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/> <!--修改背景Background--> <!--"Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/--> <Setter Property="Background" Value="#FF8FC0E7"/> <Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/> <!--不需要邊框，設定邊框寬度為0--> <!--Setter Property="BorderThickness" Value="1"/--> <Setter Property="BorderThickness" Value="0"/> <!--修改前景Foreground--> <!--Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/--> <Setter Property="Foreground" Value="White"/> <Setter Property="HorizontalContentAlignment" Value="Center"/> <Setter Property="VerticalContentAlignment" Value="Center"/> <Setter Property="Padding" Value="1"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Button}"> <!--將Themes:ButtonChrome修改為Border控制元件--> <!--Themes:ButtonChrome x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" RenderDefaulted="{TemplateBinding IsDefaulted}" SnapsToDevicePixels="true"> <ContentPresenter HorizontalAlignment="Left" Margin="16.057,1,0,1" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> </Themes:ButtonChrome--> <Border BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true" CornerRadius="5"> <Grid Height="33"> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition Width="2*"/> </Grid.ColumnDefinitions> <ContentPresenter Grid.Column="1" HorizontalAlignment="Center" Margin="5.057,8.88,0,8.88" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> <Path Grid.Column="0" Data="M5,15 L17.5,15" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="2.5" Margin="5,13.5,0,0" Stretch="Fill" Stroke="White" VerticalAlignment="Top" Width="13.5" StrokeThickness="5"/> <Path Grid.Column="0" Data="M11,7 L11,21.5" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="15.5" Margin="10.5,7,0,0" Stretch="Fill" Stroke="White" VerticalAlignment="Top" Width="1.5" StrokeThickness="5"/> </Grid> </Border> <!--取消原生的Themes:ButtonChrome觸發器效果，如需要一些選擇效果，根據自己需要加上--> <!--ControlTemplate.Triggers> <Trigger Property="IsKeyboardFocused" Value="true"> <Setter Property="RenderDefaulted" TargetName="Chrome" Value="true"/> </Trigger> <Trigger Property="ToggleButton.IsChecked" Value="true"> <Setter Property="RenderPressed" TargetName="Chrome" Value="true"/> </Trigger> <Trigger Property="IsEnabled" Value="false"> <Setter Property="Foreground" Value="#ADADAD"/> </Trigger> </ControlTemplate.Triggers--> </ControlTemplate> </Setter.Value> </Setter> </Style> <!--<LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0"> <GradientStop Color="#F3F3F3" Offset="0"/> <GradientStop Color="#EBEBEB" Offset="0.5"/> <GradientStop Color="#DDDDDD" Offset="0.5"/> <GradientStop Color="#CDCDCD" Offset="1"/> </LinearGradientBrush>--> <LinearGradientBrush x:Key="ButtonNormalBackground" StartPoint="0,0" EndPoint="1,1" Opacity="0.8"> <GradientStop Color="Yellow" Offset="0.0"/> <GradientStop Color="Red" Offset="0.25"/> <GradientStop Color="Blue" Offset="0.75"/> <GradientStop Color="LimeGreen" Offset="1.0"/> </LinearGradientBrush> <SolidColorBrush x:Key="ButtonNormalBorder" Color="#FF707070"/> <!--Button End--> </ResourceDictionary>
引用資源：
在WPF介面的設計介面：
<Window x:Class="Van.CommonLib.BaseForm" 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:Van.CommonLib" mc:Ignorable="d" Title="BaseForm" Height="300" Width="300"> <Window.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="Styles/FButton.xaml"/> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Window.Resources> <Grid> <StackPanel Margin="-10,0,10,0"> <TextBlock Text="" Style="{StaticResource FIcon}" FontSize="50" Margin="3" Foreground="Black"></TextBlock> <!--<TextBlock Text="" Style="{StaticResource FIcon}" FontSize="50" Margin="3" Foreground="Black"></TextBlock> <TextBlock Text="" Style="{StaticResource FIcon}" FontSize="50" Margin="3" Foreground="Black"></TextBlock> <TextBlock Text="" Style="{StaticResource FIcon}" FontSize="50" Margin="3" Foreground="Black"></TextBlock>--> </StackPanel> <Button Content="好友" HorizontalAlignment="Left" Margin="223,123,0,0" VerticalAlignment="Top" Width="75" Style="{DynamicResource ButtonStyle1}" /> </Grid> </Window>