1.效果
1.1 效果1
1.2 效果2
2.代码
<Color x:Key="PrimaryFourthColorStyle">#4AB6A7</Color>
<SolidColorBrush x:Key="PrimaryFourthSolidColorBrushStyle" Color="{StaticResource PrimaryFourthColorStyle}" />
<Color x:Key="AssistFourthColorStyle">#757575</Color>
<SolidColorBrush x:Key="AssistFourthSolidColorBrushStyle" Color="{StaticResource AssistFourthColorStyle}" />
<Style x:Key="TextBlockBaseStyle"
TargetType="TextBlock">
<Setter Property="HorizontalAlignment"
Value="Center" />
<Setter Property="VerticalAlignment"
Value="Center" />
<Setter Property="TextAlignment"
Value="Center" />
<Setter Property="TextWrapping"
Value="Wrap" />
</Style>
2.1 效果1代码
2.1.1 引入命名空间
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
2.1.2 xaml
<Style x:Key="PJDIconFontBaseStyle"
TargetType="TextBlock">
<Setter Property="FontFamily"
Value="/Resources/#iconfont" />
</Style>
<Style x:Key="HomeTextBlockStyle"
BasedOn="{StaticResource PJDIconFontBaseStyle}"
TargetType="TextBlock">
<Setter Property="Text"
Value="" />
</Style>
<materialDesign:Card Grid.Row="1"
Grid.Column="1"
Margin="20"
Padding="32"
materialDesign:ShadowAssist.ShadowDepth="Depth1">
<StackPanel x:Name="Home"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Cursor="Hand"
Orientation="Vertical"
ToolTip="跳转到主页面">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonUp">
<i:InvokeCommandAction Command="{Binding SwitchCmd}"
CommandParameter="{x:Static model:ENavigationItem.Home}" />
</i:EventTrigger>
</i:Interaction.Triggers>
<TextBlock>
<TextBlock.Style>
<Style BasedOn="{StaticResource HomeTextBlockStyle}"
TargetType="TextBlock">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type StackPanel}}, Path=IsMouseOver}"
Value="True">
<Setter Property="FontSize"
Value="102" />
<Setter Property="Foreground"
Value="{StaticResource PrimaryFourthSolidColorBrushStyle}" />
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type StackPanel}}, Path=IsMouseOver}"
Value="False">
<Setter Property="Foreground"
Value="{StaticResource AssistFourthSolidColorBrushStyle}" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style></TextBlock>
<TextBlock HorizontalAlignment="Center"
Text="主页面">
<TextBlock.Style>
<Style BasedOn="{StaticResource TextBlockBaseStyle}"
TargetType="TextBlock">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type StackPanel}}, Path=IsMouseOver}"
Value="True">
<Setter Property="FontSize"
Value="29" />
<Setter Property="Foreground"
Value="{StaticResource PrimaryFourthSolidColorBrushStyle}" />
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type StackPanel}}, Path=IsMouseOver}"
Value="False">
<Setter Property="FontSize"
Value="28" />
<Setter Property="Foreground"
Value="{StaticResource AssistFourthSolidColorBrushStyle}" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style></TextBlock>
</StackPanel>
</materialDesign:Card>
2.2 效果2代码
2.2.1 引入命名空间
xmlns:hc="https://handyorg.github.io/handycontrol"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
2.2.2 xaml
<Style x:Key="DividerStyle"
BasedOn="{StaticResource DividerBaseStyle}"
TargetType="{x:Type hc:Divider}">
<Setter Property="Width"
Value="240" />
<Setter Property="FontSize"
Value="28" />
<Setter Property="HorizontalAlignment"
Value="Center" />
</Style>
<converter:NavigationColorConverter x:Key="navigationColorConverter"
Assist="{StaticResource AssistFourthSolidColorBrushStyle}"
Primary="{StaticResource PrimaryFourthSolidColorBrushStyle}" />
public class NavigationColorConverter : IMultiValueConverter
{
/// <summary>
/// 鼠标经过时的颜色
/// </summary>
public SolidColorBrush Primary { get; set; }
/// <summary>
/// 鼠标未经过时的颜色
/// </summary>
public SolidColorBrush Assist { get; set; }
public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
{
if (values is null)
{
return Assist;
}
else
{
if ((bool)values[0] || (bool)values[1])
{
return Primary;
}
else
{
return Assist;
}
}
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
<materialDesign:Card Grid.Row="2"
Grid.Column="1"
Margin="20"
materialDesign:ShadowAssist.ShadowDepth="Depth1">
<StackPanel HorizontalAlignment="Stretch"
VerticalAlignment="Center"
Orientation="Vertical">
<TextBlock x:Name="Statistics"
FontSize="100"
Style="{StaticResource ColumnStatisticsTextBlockStyle}">
<TextBlock.Foreground>
<MultiBinding Converter="{StaticResource navigationColorConverter}">
<Binding ElementName="Product"
Path="IsMouseOver" />
<Binding ElementName="Part"
Path="IsMouseOver" />
</MultiBinding>
</TextBlock.Foreground></TextBlock>
<hc:Divider Content="统计信息"
Foreground="{Binding ElementName=Statistics, Path=Foreground}"
Style="{StaticResource DividerStyle}" />
<StackPanel HorizontalAlignment="Center"
Orientation="Horizontal">
<Grid x:Name="Product"
Width="145"
Height="35"
Cursor="Hand">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="5*" />
</Grid.ColumnDefinitions>
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonUp">
<i:InvokeCommandAction Command="{Binding SwitchCmd}"
CommandParameter="{x:Static model:EStatistics.Product}" />
</i:EventTrigger>
</i:Interaction.Triggers>
<TextBlock Grid.Column="0">
<TextBlock.Style>
<Style BasedOn="{StaticResource FinishedProductTextBlockStyle}"
TargetType="TextBlock">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}, Path=IsMouseOver}"
Value="True">
<Setter Property="FontSize"
Value="20" />
<Setter Property="Foreground"
Value="{StaticResource PrimaryFourthSolidColorBrushStyle}" />
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}, Path=IsMouseOver}"
Value="False">
<Setter Property="FontSize"
Value="19" />
<Setter Property="Foreground"
Value="{StaticResource AssistFourthSolidColorBrushStyle}" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style></TextBlock>
<TextBlock Grid.Column="1"
Text="产品生产统计">
<TextBlock.Style>
<Style BasedOn="{StaticResource TextBlockBaseStyle}"
TargetType="TextBlock">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}, Path=IsMouseOver}"
Value="True">
<Setter Property="FontSize"
Value="20" />
<Setter Property="Foreground"
Value="{StaticResource PrimaryFourthSolidColorBrushStyle}" />
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}, Path=IsMouseOver}"
Value="False">
<Setter Property="FontSize"
Value="19" />
<Setter Property="Foreground"
Value="{StaticResource AssistFourthSolidColorBrushStyle}" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style></TextBlock>
</Grid>
<hc:Divider Height="20"
LineStroke="{StaticResource AssistFourthSolidColorBrushStyle}"
Orientation="Vertical" />
<Grid x:Name="Part"
Width="145"
Height="35"
Cursor="Hand">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="5*" />
</Grid.ColumnDefinitions>
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonUp">
<i:InvokeCommandAction Command="{Binding SwitchCmd}"
CommandParameter="{x:Static model:EStatistics.Part}" />
</i:EventTrigger>
</i:Interaction.Triggers>
<TextBlock Grid.Column="0">
<TextBlock.Style>
<Style BasedOn="{StaticResource PartTextBlockStyle}"
TargetType="TextBlock">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}, Path=IsMouseOver}"
Value="True">
<Setter Property="FontSize"
Value="20" />
<Setter Property="Foreground"
Value="{StaticResource PrimaryFourthSolidColorBrushStyle}" />
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}, Path=IsMouseOver}"
Value="False">
<Setter Property="FontSize"
Value="19" />
<Setter Property="Foreground"
Value="{StaticResource AssistFourthSolidColorBrushStyle}" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style></TextBlock>
<TextBlock Grid.Column="1"
Text="零件使用统计">
<TextBlock.Style>
<Style BasedOn="{StaticResource TextBlockBaseStyle}"
TargetType="TextBlock">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}, Path=IsMouseOver}"
Value="True">
<Setter Property="FontSize"
Value="20" />
<Setter Property="Foreground"
Value="{StaticResource PrimaryFourthSolidColorBrushStyle}" />
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}, Path=IsMouseOver}"
Value="False">
<Setter Property="FontSize"
Value="19" />
<Setter Property="Foreground"
Value="{StaticResource AssistFourthSolidColorBrushStyle}" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style></TextBlock>
</Grid>
</StackPanel>
</StackPanel>
</materialDesign:Card>