整合自定义控件
This commit is contained in:
GG Z
@@ -1,348 +1,51 @@
|
||||
<Window x:Class="NeuWPFTest.ControlTestWindow"
|
||||
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:lu="https://github.com/ShrlAlgo/NeuWPF"
|
||||
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
||||
Width="800"
|
||||
d:SizeToContent="WidthAndHeight"
|
||||
Height="600"
|
||||
d:Height="1200"
|
||||
mc:Ignorable="d"
|
||||
Icon="/Resources/Images/SyminUI.png"
|
||||
Style="{StaticResource Window.Normal}"
|
||||
Title="Custom Control Test">
|
||||
<!-- 主窗口背景色，这是拟态风格的基础 -->
|
||||
<Window
|
||||
Height="600"
|
||||
Icon="/Resources/Images/SyminUI.png"
|
||||
Title="Custom Control Test"
|
||||
Width="800"
|
||||
d:Height="1200"
|
||||
d:SizeToContent="WidthAndHeight"
|
||||
mc:Ignorable="d"
|
||||
x:Class="NeuWPFTest.ControlTestWindow"
|
||||
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
||||
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
||||
xmlns:lu="https://github.com/ShrlAlgo/NeuWPF"
|
||||
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
|
||||
<!-- 主窗口背景色，这是拟态风格的基础 -->
|
||||
<Window.Resources>
|
||||
<!-- 定义拟态按钮样式 -->
|
||||
<Style x:Key="NeumorphicButtonStyle" TargetType="Button">
|
||||
<Setter Property="Background" Value="#e0e5ec" />
|
||||
<Setter Property="Foreground" Value="#707070" />
|
||||
<Setter Property="BorderThickness" Value="0" />
|
||||
<Setter Property="Padding" Value="20,10" />
|
||||
<Setter Property="FontWeight" Value="SemiBold" />
|
||||
<Setter Property="Template">
|
||||
<Setter.Value>
|
||||
<ControlTemplate TargetType="Button">
|
||||
<Grid>
|
||||
<!-- 控件主体，包含两个阴影效果 -->
|
||||
<Border x:Name="shadowDark"
|
||||
Background="{TemplateBinding Background}"
|
||||
CornerRadius="12">
|
||||
<Border.Effect>
|
||||
<DropShadowEffect ShadowDepth="4" Direction="315" Color="#a3b1c6" Opacity="0.7" BlurRadius="5"/>
|
||||
</Border.Effect>
|
||||
</Border>
|
||||
<Border Background="{TemplateBinding Background}" CornerRadius="12" x:Name="shadowLight">
|
||||
<Border.Effect>
|
||||
<DropShadowEffect ShadowDepth="-4" Direction="135" Color="#ffffff" Opacity="1" BlurRadius="5"/>
|
||||
</Border.Effect>
|
||||
</Border>
|
||||
|
||||
<!-- 按钮内容 -->
|
||||
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
|
||||
|
||||
<!-- 按下时的内阴影效果 (通过渐变模拟) -->
|
||||
<Border x:Name="insetBorder" CornerRadius="12" Opacity="0">
|
||||
<Border.Background>
|
||||
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
|
||||
<GradientStop Color="#a3b1c6" Offset="0"/>
|
||||
<GradientStop Color="#ffffff" Offset="1"/>
|
||||
</LinearGradientBrush>
|
||||
</Border.Background>
|
||||
</Border>
|
||||
</Grid>
|
||||
<ControlTemplate.Triggers>
|
||||
<!-- 鼠标按下时的触发器 -->
|
||||
<Trigger Property="IsPressed" Value="True">
|
||||
<!-- 隐藏外阴影 -->
|
||||
<Setter TargetName="shadowDark" Property="Opacity" Value="0" />
|
||||
<Setter TargetName="shadowLight" Property="Opacity" Value="0" />
|
||||
<!-- 显示内阴影 -->
|
||||
<Setter TargetName="insetBorder" Property="Opacity" Value="0.3" />
|
||||
<!-- 轻微移动内容，模拟按压感 -->
|
||||
<Setter Property="RenderTransform">
|
||||
<Setter.Value>
|
||||
<TranslateTransform X="1" Y="1"/>
|
||||
</Setter.Value>
|
||||
</Setter>
|
||||
</Trigger>
|
||||
</ControlTemplate.Triggers>
|
||||
</ControlTemplate>
|
||||
</Setter.Value>
|
||||
</Setter>
|
||||
</Style>
|
||||
<!-- 基础颜色定义 -->
|
||||
<!-- 修正点：将 Color 改为 SolidColorBrush -->
|
||||
<SolidColorBrush x:Key="BackgroundColor" Color="#e0e5ec" />
|
||||
<SolidColorBrush x:Key="TextColor" Color="#7a7e85" />
|
||||
|
||||
<!-- 以下定义为 Color 是正确的，因为它们被用于 DropShadowEffect 和 GradientStop -->
|
||||
<Color x:Key="DarkShadowColor">#a3b1c6</Color>
|
||||
<Color x:Key="LightShadowColor">#ffffff</Color>
|
||||
<Color x:Key="LightGradientColor">#ebeff5</Color>
|
||||
<Color x:Key="DarkGradientColor">#d1d9e6</Color>
|
||||
|
||||
<!-- 优化后的拟态按钮样式 -->
|
||||
<Style x:Key="AdvancedNeumorphicButtonStyle" TargetType="Button">
|
||||
<Setter Property="Width" Value="180" />
|
||||
<Setter Property="Height" Value="60" />
|
||||
<!-- 修正点：现在可以正确引用 TextColor 这个 Brush 了 -->
|
||||
<Setter Property="Foreground" Value="{StaticResource TextColor}" />
|
||||
<Setter Property="BorderThickness" Value="0" />
|
||||
<Setter Property="FontSize" Value="18" />
|
||||
<Setter Property="FontWeight" Value="SemiBold" />
|
||||
<Setter Property="Cursor" Value="Hand" />
|
||||
<Setter Property="Template">
|
||||
<Setter.Value>
|
||||
<ControlTemplate TargetType="Button">
|
||||
<Grid>
|
||||
<!-- 暗阴影 (右下方) -->
|
||||
<Border CornerRadius="20" Background="{StaticResource BackgroundColor}">
|
||||
<Border.Effect>
|
||||
<DropShadowEffect ShadowDepth="4" Direction="315" Color="{StaticResource DarkShadowColor}" Opacity="0.5" BlurRadius="8" />
|
||||
</Border.Effect>
|
||||
</Border>
|
||||
|
||||
<!-- 亮阴影 (左上方) -->
|
||||
<Border CornerRadius="20" Background="{StaticResource BackgroundColor}">
|
||||
<Border.Effect>
|
||||
<DropShadowEffect ShadowDepth="-4" Direction="135" Color="{StaticResource LightShadowColor}" Opacity="0.9" BlurRadius="8" />
|
||||
</Border.Effect>
|
||||
</Border>
|
||||
|
||||
<!-- 按钮内容层 -->
|
||||
<Border x:Name="ContentBorder" CornerRadius="20">
|
||||
<!-- 使用渐变背景来营造立体感 -->
|
||||
<Border.Background>
|
||||
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
|
||||
<GradientStop Color="{StaticResource LightGradientColor}" Offset="0" />
|
||||
<GradientStop Color="{StaticResource DarkGradientColor}" Offset="1" />
|
||||
</LinearGradientBrush>
|
||||
</Border.Background>
|
||||
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
|
||||
</Border>
|
||||
</Grid>
|
||||
<ControlTemplate.Triggers>
|
||||
<Trigger Property="IsMouseOver" Value="True">
|
||||
<!-- 这里也可以直接用颜色字符串，WPF会自动转换 -->
|
||||
<Setter Property="Foreground" Value="#3498db" />
|
||||
</Trigger>
|
||||
|
||||
<Trigger Property="IsPressed" Value="True">
|
||||
<Setter TargetName="ContentBorder" Property="Background">
|
||||
<Setter.Value>
|
||||
<!-- 反向渐变模拟凹陷 -->
|
||||
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
|
||||
<GradientStop Color="{StaticResource DarkGradientColor}" Offset="0" />
|
||||
<GradientStop Color="{StaticResource LightGradientColor}" Offset="1" />
|
||||
</LinearGradientBrush>
|
||||
</Setter.Value>
|
||||
</Setter>
|
||||
<!-- 按下时清除外部阴影，让凹陷效果更纯粹 -->
|
||||
<Setter Property="Effect">
|
||||
<Setter.Value>
|
||||
<DropShadowEffect ShadowDepth="0" BlurRadius="0" Opacity="0" Color="Transparent"/>
|
||||
</Setter.Value>
|
||||
</Setter>
|
||||
</Trigger>
|
||||
</ControlTemplate.Triggers>
|
||||
</ControlTemplate>
|
||||
</Setter.Value>
|
||||
</Setter>
|
||||
</Style>
|
||||
|
||||
<!-- 定义画刷和颜色资源 -->
|
||||
<SolidColorBrush x:Key="ButtonBackground" Color="#ebebeb" />
|
||||
<SolidColorBrush x:Key="ButtonForeground" Color="#4181f098" />
|
||||
<SolidColorBrush x:Key="ButtonForegroundHover" Color="#357af0" />
|
||||
<SolidColorBrush x:Key="ButtonBorderBrush" Color="#1fffffff" />
|
||||
|
||||
<!-- Hover 状态的渐变背景 -->
|
||||
<LinearGradientBrush x:Key="ButtonBackgroundHover" StartPoint="0,0" EndPoint="1,1">
|
||||
<GradientStop Color="#d4d4d4" Offset="0.0" />
|
||||
<GradientStop Color="#fbfbfb" Offset="1.0" />
|
||||
</LinearGradientBrush>
|
||||
|
||||
<!-- 从 CSS 转换的按钮样式 -->
|
||||
<Style x:Key="CssInspiredButtonStyle" TargetType="Button">
|
||||
<Setter Property="FontSize" Value="17" />
|
||||
<Setter Property="FontWeight" Value="Bold" />
|
||||
<Setter Property="Padding" Value="16,8" />
|
||||
<Setter Property="Foreground" Value="{StaticResource ButtonForeground}" />
|
||||
<!-- 错误已移除: CharacterSpacing Setter 不能在这里 -->
|
||||
|
||||
<Setter Property="Template">
|
||||
<Setter.Value>
|
||||
<ControlTemplate TargetType="Button">
|
||||
<Grid x:Name="RootGrid">
|
||||
<!-- 暗阴影 (右下方) -->
|
||||
<Border x:Name="DarkShadow" CornerRadius="20" Background="{StaticResource ButtonBackground}">
|
||||
<Border.Effect>
|
||||
<DropShadowEffect ShadowDepth="5" Direction="315" Color="{StaticResource DarkShadowColor}" Opacity="1" BlurRadius="15"/>
|
||||
</Border.Effect>
|
||||
</Border>
|
||||
|
||||
<!-- 亮阴影 (左上方) -->
|
||||
<Border x:Name="LightShadow" CornerRadius="20" Background="{StaticResource ButtonBackground}">
|
||||
<Border.Effect>
|
||||
<DropShadowEffect ShadowDepth="5" Direction="135" Color="{StaticResource LightShadowColor}" Opacity="1" BlurRadius="15"/>
|
||||
</Border.Effect>
|
||||
</Border>
|
||||
|
||||
<!-- 按钮主体和内容 -->
|
||||
<Border x:Name="ContentBorder"
|
||||
CornerRadius="20"
|
||||
Background="{TemplateBinding Background}"
|
||||
BorderBrush="{StaticResource ButtonBorderBrush}"
|
||||
BorderThickness="1">
|
||||
<!--
|
||||
修正点：将 CharacterSpacing 直接设置在 ContentPresenter 上
|
||||
同时移除了 Converter
|
||||
-->
|
||||
<ContentPresenter HorizontalAlignment="Center"
|
||||
VerticalAlignment="Center"
|
||||
Content="{TemplateBinding Content}" />
|
||||
</Border>
|
||||
</Grid>
|
||||
<ControlTemplate.Triggers>
|
||||
<!-- Hover 状态 -->
|
||||
<Trigger Property="IsMouseOver" Value="True">
|
||||
<Setter Property="Foreground" Value="{StaticResource ButtonForegroundHover}" />
|
||||
<Setter TargetName="ContentBorder" Property="Background" Value="{StaticResource ButtonBackgroundHover}" />
|
||||
</Trigger>
|
||||
|
||||
<!-- Active (Pressed) 状态 -->
|
||||
<Trigger Property="IsPressed" Value="True">
|
||||
<Setter Property="Foreground" Value="{StaticResource ButtonForegroundHover}" />
|
||||
<Setter TargetName="ContentBorder" Property="Background" Value="{StaticResource ButtonBackground}" />
|
||||
|
||||
<!-- 模拟 inset shadow -->
|
||||
<Setter TargetName="DarkShadow" Property="Effect">
|
||||
<Setter.Value>
|
||||
<DropShadowEffect ShadowDepth="4" Direction="135" Color="{StaticResource DarkShadowColor}" Opacity="1" BlurRadius="15"/>
|
||||
</Setter.Value>
|
||||
</Setter>
|
||||
<Setter TargetName="LightShadow" Property="Effect">
|
||||
<Setter.Value>
|
||||
<DropShadowEffect ShadowDepth="4" Direction="315" Color="{StaticResource LightShadowColor}" Opacity="1" BlurRadius="15"/>
|
||||
</Setter.Value>
|
||||
</Setter>
|
||||
</Trigger>
|
||||
</ControlTemplate.Triggers>
|
||||
</ControlTemplate>
|
||||
</Setter.Value>
|
||||
</Setter>
|
||||
<Setter Property="Background" Value="{StaticResource ButtonBackground}" />
|
||||
</Style>
|
||||
<!--<ResourceDictionary>
|
||||
<ResourceDictionary.MergedDictionaries>
|
||||
<ResourceDictionary Source="pack://application:,,,/NeuWPFTest;component/ButtonStyles.xaml" />
|
||||
</ResourceDictionary.MergedDictionaries>
|
||||
</ResourceDictionary>-->
|
||||
</Window.Resources>
|
||||
<lu:WindowAssist.TitleBar>
|
||||
<!--<lu:WindowAssist.TitleBar>
|
||||
<Menu>
|
||||
<MenuItem Header="Help">
|
||||
<MenuItem Header="About" />
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</lu:WindowAssist.TitleBar>
|
||||
</lu:WindowAssist.TitleBar>-->
|
||||
<Grid>
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="Auto" />
|
||||
<ColumnDefinition />
|
||||
</Grid.ColumnDefinitions>
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition />
|
||||
<RowDefinition Height="*" />
|
||||
</Grid.RowDefinitions>
|
||||
<!-- 直接使用 Anchor 作为容器 -->
|
||||
<lu:Anchor Grid.ColumnSpan="2">
|
||||
<ScrollViewer
|
||||
Grid.Column="0"
|
||||
Grid.ColumnSpan="2"
|
||||
Grid.Row="1">
|
||||
<lu:StackPanel Background="{DynamicResource BackgroundLayoutBrush}" Spacing="10">
|
||||
<lu:PropertyField
|
||||
Grid.Row="0"
|
||||
Margin="6,0"
|
||||
PropertyName="属性"
|
||||
PropertyValue="123" />
|
||||
<lu:PropertyField
|
||||
Grid.Row="1"
|
||||
Margin="6,0"
|
||||
PropertyName="属性x"
|
||||
PropertyValue="154" />
|
||||
|
||||
<!-- 将您之前放在ScrollViewer里的内容，直接作为Anchor的内容 -->
|
||||
<StackPanel Margin="20">
|
||||
<!-- 第一个锚点 -->
|
||||
<Grid Height="400"
|
||||
Margin="10"
|
||||
Background="#C7CEE0"
|
||||
lu:AnchorAssist.AnchorName="简介">
|
||||
<TextBlock HorizontalAlignment="Center"
|
||||
VerticalAlignment="Center"
|
||||
FontSize="24"
|
||||
FontWeight="Bold"
|
||||
Text="简介部分" />
|
||||
</Grid>
|
||||
|
||||
<!-- 第二个锚点 -->
|
||||
<Grid Height="500"
|
||||
Margin="10"
|
||||
Background="#B8C0D0"
|
||||
lu:AnchorAssist.AnchorName="功能特性">
|
||||
<TextBlock HorizontalAlignment="Center"
|
||||
VerticalAlignment="Center"
|
||||
FontSize="24"
|
||||
FontWeight="Bold"
|
||||
Text="功能特性部分" />
|
||||
</Grid>
|
||||
|
||||
<!-- 第三个锚点 -->
|
||||
<Border Height="600"
|
||||
Margin="10"
|
||||
Background="#A9B2C0"
|
||||
CornerRadius="10"
|
||||
lu:AnchorAssist.AnchorName="API文档">
|
||||
<TextBlock HorizontalAlignment="Center"
|
||||
VerticalAlignment="Center"
|
||||
FontSize="24"
|
||||
FontWeight="Bold"
|
||||
Text="API文档部分" />
|
||||
</Border>
|
||||
|
||||
<!-- 第四个锚点 -->
|
||||
<Border Height="300"
|
||||
Margin="10"
|
||||
Background="#9FA8B6"
|
||||
CornerRadius="10"
|
||||
lu:AnchorAssist.AnchorName="联系我们">
|
||||
<TextBlock HorizontalAlignment="Center"
|
||||
VerticalAlignment="Center"
|
||||
FontSize="24"
|
||||
FontWeight="Bold"
|
||||
Text="联系我们部分" />
|
||||
</Border>
|
||||
</StackPanel>
|
||||
|
||||
</lu:Anchor>
|
||||
|
||||
<ScrollViewer Grid.Row="1"
|
||||
Grid.Column="0"
|
||||
Grid.ColumnSpan="2">
|
||||
<Grid Background="{StaticResource Background.Main}">
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="Auto" />
|
||||
</Grid.RowDefinitions>
|
||||
<lu:PropertyField Grid.Row="0"
|
||||
Margin="6,0"
|
||||
PropertyName="属性"
|
||||
PropertyValue="123" />
|
||||
<lu:PropertyField Grid.Row="1"
|
||||
Margin="6,0"
|
||||
PropertyName="属性x"
|
||||
PropertyValue="154" />
|
||||
|
||||
<lu:EditableTreeView x:Name="myTreeView" Grid.Row="2">
|
||||
<lu:EditableTreeView.ItemTemplate>
|
||||
<HierarchicalDataTemplate ItemsSource="{Binding Children}">
|
||||
<StackPanel Orientation="Vertical">
|
||||
<TextBlock Text="{Binding ItemName}" />
|
||||
<Button Content="按钮" />
|
||||
</StackPanel>
|
||||
</HierarchicalDataTemplate>
|
||||
</lu:EditableTreeView.ItemTemplate>
|
||||
</lu:EditableTreeView>
|
||||
|
||||
<TreeView x:Name="OldTreeView" Grid.Row="3">
|
||||
|
||||
<TreeView Grid.Row="3" x:Name="OldTreeView">
|
||||
<TreeView.ItemTemplate>
|
||||
<DataTemplate>
|
||||
<TextBlock Text="{Binding ItemName}" />
|
||||
@@ -351,28 +54,19 @@
|
||||
</TreeView>
|
||||
|
||||
<TreeViewItem Grid.Row="4" Header="TreeItem" />
|
||||
<ItemsControl x:Name="testItemsControl" Grid.Row="5" />
|
||||
<UniformGrid Grid.Row="6" Margin="30">
|
||||
<Button
|
||||
Content="Button"
|
||||
Style="{StaticResource NeumorphicButtonStyle}" />
|
||||
<Button
|
||||
Content="Button"
|
||||
Style="{StaticResource AdvancedNeumorphicButtonStyle}" />
|
||||
<Button
|
||||
Content="Button"
|
||||
Style="{StaticResource CssInspiredButtonStyle}" />
|
||||
<Button
|
||||
Content="Button"
|
||||
Style="{StaticResource NeumorphismStyle_light}" />
|
||||
<Button
|
||||
Content="Button"
|
||||
Style="{StaticResource NeumorphismStyle_light2}" />
|
||||
<Button
|
||||
Content="Button"
|
||||
Style="{StaticResource NeumorphismStyle_dark}" />
|
||||
</UniformGrid>
|
||||
</Grid>
|
||||
<ItemsControl Grid.Row="5" x:Name="testItemsControl" />
|
||||
<lu:StackPanel
|
||||
Grid.Row="6"
|
||||
HorizontalAlignment="Center"
|
||||
Margin="20"
|
||||
Spacing="100">
|
||||
<Button
|
||||
Content="Button"
|
||||
Height="100"
|
||||
Style="{StaticResource NeuMorphicButtonStyle}"
|
||||
Width="200" />
|
||||
</lu:StackPanel>
|
||||
</lu:StackPanel>
|
||||
</ScrollViewer>
|
||||
</Grid>
|
||||
</Window>
|
||||
Reference in New Issue
Block a user