我试图在鼠标悬停期间更改网格内部路径的颜色。为此,我使用Visual状态管理器和故事板。 下面是我的网格
<Grid Name="PART_icondisp" Grid.Column="2" Grid.Row="1">
<Path Name="IconSave" Data="F1M18.199,16.145C18.199,16.885,17.597,17.489,16.855,17.489L15.646,17.489 15.646,10.793C15.646,9.84,14.871,9.063,13.916,9.063L5.283,9.063C4.33,9.063,3.555,9.84,3.555,10.793L3.555,17.487 2.345,17.489C1.603,17.489,1,16.885,1,16.145L1,2.344C1,1.604,1.603,1,2.345,1L3.555,1 3.555,4.715C3.549,5.883,4.163,6.5,5.324,6.5L13.877,6.5C15.037,6.5,15.65,5.883,15.65,4.715L15.648,1 16.855,1C17.597,1,18.199,1.604,18.199,2.344z M14.646,17.489L4.555,17.487 4.555,10.793C4.555,10.391,4.882,10.063,5.283,10.063L13.916,10.063C14.32,10.063,14.646,10.391,14.646,10.793z M4.554,1L10.611,1 10.611,3.344C10.611,3.688,10.89,3.969,11.236,3.969L12.392,3.969C12.736,3.969,13.015,3.688,13.015,3.344L13.015,1 14.646,1 14.646,4.715C14.65,5.325,14.476,5.5,13.877,5.5L5.324,5.5C4.723,5.5,4.549,5.325,4.549,4.715z M16.855,0L2.345,0C1.052,0,0,1.051,0,2.344L0,16.145C0,17.438,1.052,18.489,2.345,18.489L15.285,18.487 16.855,18.489C18.148,18.489,19.199,17.438,19.199,16.145L19.199,2.344C19.199,1.051,18.148,0,16.855,0" Fill="Black" /> </Grid>
以下是我的故事板
<VisualState x:Name="Hover">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="PART_icondisp">
<EasingColorKeyFrame KeyTime="0" Value="Gold" />
</ColorAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetName="PART_Customization" Storyboard.TargetProperty="Opacity" Duration="0" To="0.0" />
<DoubleAnimation Storyboard.TargetName="PART_Hover" Storyboard.TargetProperty="Opacity" Duration="0" To="1.0" />
<DoubleAnimation Storyboard.TargetName="PART_Pressed" Storyboard.TargetProperty="Opacity" Duration="0" To="0.0" />
</Storyboard>
</VisualState>
当我尝试将鼠标悬停在该按钮上时,它会显示System.InvalidOperationException,并且在'System.Windows.Controls.Grid'的名称范围内找不到'PART_icondisp'名称。
请帮我解决这个问题。
我正在添加下面的完整模板。
<ControlTemplate x:Key="{dxbt:BarItemBorderThemeKey ResourceKey=Normal,IsThemeIndependent=true}" TargetType="{x:Type dxb:ItemBorderControl}">
<Grid>
<Grid x:Name="PART_Customization" Opacity="0.0">
<Border x:Name="customization" Background="#3F9BBAE3 " BorderBrush="#FF9BBAE3 " BorderThickness="1" SnapsToDevicePixels="True" />
</Grid>
<Grid x:Name="PART_Hover" Opacity="0.0">
<Border x:Name="hover" BorderBrush="#FFFFBD69 " Background="Red" BorderThickness="1" SnapsToDevicePixels="True">
</Border>
</Grid>
<Grid x:Name="PART_Pressed" Opacity="0.0">
<Border x:Name="pressed" BorderBrush="#FFFB8C3C " BorderThickness="1" SnapsToDevicePixels="True">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFC973D " Offset="0" />
<GradientStop Color="#FFFFB85E " Offset="1" />
</LinearGradientBrush>
</Border.Background>
</Border>
</Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="State">
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="PART_Customization" Storyboard.TargetProperty="Opacity" Duration="0" To="0.0" />
<DoubleAnimation Storyboard.TargetName="PART_Hover" Storyboard.TargetProperty="Opacity" Duration="0" To="0.0" />
<DoubleAnimation Storyboard.TargetName="PART_Pressed" Storyboard.TargetProperty="Opacity" Duration="0" To="0.0" />
</Storyboard>
</VisualState>
<VisualState x:Name="Normal">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="PART_Customization" Storyboard.TargetProperty="Opacity" Duration="0" To="0.0" />
<DoubleAnimation Storyboard.TargetName="PART_Hover" Storyboard.TargetProperty="Opacity" Duration="0" To="0.0" />
<DoubleAnimation Storyboard.TargetName="PART_Pressed" Storyboard.TargetProperty="Opacity" Duration="0" To="0.0" />
</Storyboard>
</VisualState>
<VisualState x:Name="Hover">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="IconSave">
<EasingColorKeyFrame KeyTime="0" Value="Gold" />
</ColorAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetName="PART_Customization" Storyboard.TargetProperty="Opacity" Duration="0" To="0.0" />
<DoubleAnimation Storyboard.TargetName="PART_Hover" Storyboard.TargetProperty="Opacity" Duration="0" To="1.0" />
<DoubleAnimation Storyboard.TargetName="PART_Pressed" Storyboard.TargetProperty="Opacity" Duration="0" To="0.0" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="PART_Customization" Storyboard.TargetProperty="Opacity" Duration="0" To="0.0" />
<DoubleAnimation Storyboard.TargetName="PART_Hover" Storyboard.TargetProperty="Opacity" Duration="0" To="0.0" />
<DoubleAnimation Storyboard.TargetName="PART_Pressed" Storyboard.TargetProperty="Opacity" Duration="0" To="1.0" />
</Storyboard>
</VisualState>
<VisualState x:Name="Checked" />
<VisualState x:Name="HoverChecked" />
<VisualState x:Name="Focused" />
<VisualState x:Name="Customization">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="PART_Customization" Storyboard.TargetProperty="Opacity" Duration="0" To="1.0" />
<DoubleAnimation Storyboard.TargetName="PART_Hover" Storyboard.TargetProperty="Opacity" Duration="0" To="0.0" />
<DoubleAnimation Storyboard.TargetName="PART_Pressed" Storyboard.TargetProperty="Opacity" Duration="0" To="0.0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
<Style x:Key="Save" TargetType="{x:Type dxb:BarButtonItem}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="1" Width="Auto" />
<ColumnDefinition MinWidth="10" Width="Auto"/>
<ColumnDefinition MinWidth="22" Width="Auto"/>
<ColumnDefinition MinWidth="5" Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition MinWidth="10" Width="Auto"/>
<ColumnDefinition MinWidth="1" Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition MinHeight="8" Height="Auto"/>
<RowDefinition MinHeight="21" Height="Auto"/>
<RowDefinition MinHeight="8" Height="Auto"/>
</Grid.RowDefinitions>
<Path Data="M74,37L0,37 0,0 74,0z" Grid.Column="1" Grid.Row="0" Stretch="Fill" Grid.RowSpan="3" Grid.ColumnSpan="5">
<Path.Fill>
<LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
<GradientStop Color="#FFF9F9F9" Offset="0"/>
<GradientStop Color="#FFD7D7D7" Offset="1"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
<Path Data="F1M0,37L1,37 1,0 0,0z" Grid.Column="7" Grid.Row="0" Grid.RowSpan="3" Fill="#FF7D7D7D" />
<Path Data="F1M0,37L1,37 1,0 0,0z" Grid.Column="0" Grid.Row="0" Grid.RowSpan="3" Fill="White"/>
<Grid Name="PART_icondisp" Grid.Column="2" Grid.Row="1">
<Path Name="IconSave" Data="F1M18.199,16.145C18.199,16.885,17.597,17.489,16.855,17.489L15.646,17.489 15.646,10.793C15.646,9.84,14.871,9.063,13.916,9.063L5.283,9.063C4.33,9.063,3.555,9.84,3.555,10.793L3.555,17.487 2.345,17.489C1.603,17.489,1,16.885,1,16.145L1,2.344C1,1.604,1.603,1,2.345,1L3.555,1 3.555,4.715C3.549,5.883,4.163,6.5,5.324,6.5L13.877,6.5C15.037,6.5,15.65,5.883,15.65,4.715L15.648,1 16.855,1C17.597,1,18.199,1.604,18.199,2.344z M14.646,17.489L4.555,17.487 4.555,10.793C4.555,10.391,4.882,10.063,5.283,10.063L13.916,10.063C14.32,10.063,14.646,10.391,14.646,10.793z M4.554,1L10.611,1 10.611,3.344C10.611,3.688,10.89,3.969,11.236,3.969L12.392,3.969C12.736,3.969,13.015,3.688,13.015,3.344L13.015,1 14.646,1 14.646,4.715C14.65,5.325,14.476,5.5,13.877,5.5L5.324,5.5C4.723,5.5,4.549,5.325,4.549,4.715z M16.855,0L2.345,0C1.052,0,0,1.051,0,2.344L0,16.145C0,17.438,1.052,18.489,2.345,18.489L15.285,18.487 16.855,18.489C18.148,18.489,19.199,17.438,19.199,16.145L19.199,2.344C19.199,1.051,18.148,0,16.855,0" Fill="Black" />
</Grid>
<WrapPanel Grid.Column="4" Width="Auto" Grid.Row="1">
<TextBlock Text="{Binding}"/>
</WrapPanel>
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
答案 0 :(得分:0)
您正尝试更改动画中的Path.Fill
属性,但Storyboard.TargetName
设置为PART_icondisp
。但是,该元素是Grid
,因此您似乎感到困惑。另外,我不会使用VisualStateManager
来执行简单的鼠标移动动画,而是更喜欢使用简单的DataTrigger
:
<Grid Name="Grid" Background="Transparent" HorizontalAlignment="Center" VerticalAlignment="Center">
<Path Data="F1M18.199,16.145C18.199,16.885,17.597,17.489,16.855,17.489L15.646,17.489 15.646,10.793C15.646,9.84,14.871,9.063,13.916,9.063L5.283,9.063C4.33,9.063,3.555,9.84,3.555,10.793L3.555,17.487 2.345,17.489C1.603,17.489,1,16.885,1,16.145L1,2.344C1,1.604,1.603,1,2.345,1L3.555,1 3.555,4.715C3.549,5.883,4.163,6.5,5.324,6.5L13.877,6.5C15.037,6.5,15.65,5.883,15.65,4.715L15.648,1 16.855,1C17.597,1,18.199,1.604,18.199,2.344z M14.646,17.489L4.555,17.487 4.555,10.793C4.555,10.391,4.882,10.063,5.283,10.063L13.916,10.063C14.32,10.063,14.646,10.391,14.646,10.793z M4.554,1L10.611,1 10.611,3.344C10.611,3.688,10.89,3.969,11.236,3.969L12.392,3.969C12.736,3.969,13.015,3.688,13.015,3.344L13.015,1 14.646,1 14.646,4.715C14.65,5.325,14.476,5.5,13.877,5.5L5.324,5.5C4.723,5.5,4.549,5.325,4.549,4.715z M16.855,0L2.345,0C1.052,0,0,1.051,0,2.344L0,16.145C0,17.438,1.052,18.489,2.345,18.489L15.285,18.487 16.855,18.489C18.148,18.489,19.199,17.438,19.199,16.145L19.199,2.344C19.199,1.051,18.148,0,16.855,0">
<Path.Style>
<Style>
<Setter Property="Path.Fill" Value="Black" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, ElementName=Grid}" Value="True">
<Setter Property="Path.Fill" Value="Gold" />
</DataTrigger>
</Style.Triggers>
</Style>
</Path.Style>
</Path>
</Grid>
答案 1 :(得分:0)
试试这个:
<Grid Name="PART_icondisp" Grid.Column="2" Grid.Row="1">
<Path Name="IconSave" Data="F1M18.199,16.145C18.199,16.885,17.597,17.489,16.855,17.489L15.646,17.489 15.646,10.793C15.646,9.84,14.871,9.063,13.916,9.063L5.283,9.063C4.33,9.063,3.555,9.84,3.555,10.793L3.555,17.487 2.345,17.489C1.603,17.489,1,16.885,1,16.145L1,2.344C1,1.604,1.603,1,2.345,1L3.555,1 3.555,4.715C3.549,5.883,4.163,6.5,5.324,6.5L13.877,6.5C15.037,6.5,15.65,5.883,15.65,4.715L15.648,1 16.855,1C17.597,1,18.199,1.604,18.199,2.344z M14.646,17.489L4.555,17.487 4.555,10.793C4.555,10.391,4.882,10.063,5.283,10.063L13.916,10.063C14.32,10.063,14.646,10.391,14.646,10.793z M4.554,1L10.611,1 10.611,3.344C10.611,3.688,10.89,3.969,11.236,3.969L12.392,3.969C12.736,3.969,13.015,3.688,13.015,3.344L13.015,1 14.646,1 14.646,4.715C14.65,5.325,14.476,5.5,13.877,5.5L5.324,5.5C4.723,5.5,4.549,5.325,4.549,4.715z M16.855,0L2.345,0C1.052,0,0,1.051,0,2.344L0,16.145C0,17.438,1.052,18.489,2.345,18.489L15.285,18.487 16.855,18.489C18.148,18.489,19.199,17.438,19.199,16.145L19.199,2.344C19.199,1.051,18.148,0,16.855,0">
<Path.Fill>
<SolidColorBrush x:Name="pathColor" Color="Black"/>
</Path.Fill>
</Path>
<Grid.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimation To="Gold"
Storyboard.TargetName="pathColor"
Storyboard.TargetProperty="Color"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseMove">
<BeginStoryboard>
<Storyboard>
<ColorAnimation To="Gold"
Storyboard.TargetName="pathColor"
Storyboard.TargetProperty="Color"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<ColorAnimation To="Black"
Storyboard.TargetName="pathColor"
Storyboard.TargetProperty="Color"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
</Grid>