378 lines
20 KiB
XML
378 lines
20 KiB
XML
<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.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>
|
||
</Window.Resources>
|
||
<lu:WindowAssist.TitleBar>
|
||
<Menu>
|
||
<MenuItem Header="Help">
|
||
<MenuItem Header="About" />
|
||
</MenuItem>
|
||
</Menu>
|
||
</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里的内容，直接作为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.ItemTemplate>
|
||
<DataTemplate>
|
||
<TextBlock Text="{Binding ItemName}" />
|
||
</DataTemplate>
|
||
</TreeView.ItemTemplate>
|
||
</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>
|
||
</ScrollViewer>
|
||
</Grid>
|
||
</Window> |