WPF-填充网格内路径的颜色

时间:2014-12-23 09:43:00

标签: c# wpf xaml

我试图在鼠标悬停期间更改网格内部路径的颜色。为此,我使用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>

2 个答案:

答案 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>