0

こんにちは、私はGridこのようなものを持っていました:

<Grid Margin="0,1,0,0" Height="35" VerticalAlignment="Top" HorizontalAlignment="Left" Width="158">
    <Grid x:Name="MainGrid" Height="35" Background="#00FFFFFF" Margin="0,1.5,0,-1.5" d:LayoutOverrides="VerticalMargin">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="35" />
            <ColumnDefinition Width="1" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <Rectangle Fill="#FFFFFFFF" StrokeThickness="0" />
        <Image Height="35" Width="35" VerticalAlignment="Stretch" Style="{StaticResource GithHubImage}" HorizontalAlignment="Stretch" Margin="0" Source="/Images/computer.png" />

        <Rectangle Fill="#FFFFFFFF" Grid.Column="1" StrokeThickness="0" />

        <Grid x:Name="Wrapper" Visibility="Visible" Grid.Column="3">
            <Rectangle x:Name="Fill" Visibility="Collapsed" Width="12" Fill="#FFDDDDDD" HorizontalAlignment="Left" Margin="40,0,0,0" d:LayoutOverrides="Width" />
                <Grid x:Name="Arrow" Visibility="Collapsed" Margin="0,0,27,0">
                    <Image Width="10" Height="20" HorizontalAlignment="Right" RenderTransformOrigin="0.5,0.5">
                        <Image.RenderTransform>
                            <TransformGroup>
                                <RotateTransform Angle="180" />
                            </TransformGroup>
                        </Image.RenderTransform>

                        <Image.Source>
                            <DrawingImage>
                                <DrawingImage.Drawing>
                                    <GeometryDrawing Brush="{DynamicResource GitHubAccentBrush}" Geometry="M897.41,613.924L887.08,624.255 887.08,603.594 897.41,613.924z" />
                                </DrawingImage.Drawing>
                            </DrawingImage>
                        </Image.Source>
                    </Image>
              </Grid>
         </Grid>

         <TextBlock x:Name="Login" Grid.Column="3" Margin="7,0,0,0" VerticalAlignment="Center"  Text="swethapilli"  Height="25.976" />
    </Grid>
    <Rectangle Height="1" VerticalAlignment="Bottom" Fill="#FFFFFFFF" StrokeThickness="0" />
</Grid>

今では次のように表示されますここに画像の説明を入力

またはが次のように表示MouseOverされる場合:ImageTextBlock

ここに画像の説明を入力

私のプロジェクトには、同じスタイルを実装する必要があるすべてのグリッドを含むImage、このような非常に多くの個々のグリッドがあります。TextBlock

しかし、マウスが画像（猫の画像）またはTextBlock. スタイルでやりたい。私はすでにこのような絵コンテを持っていました。

<Storyboard x:Key="ShowFillStoryBoard">
    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Fill">
        <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
    </ObjectAnimationUsingKeyFrames>

    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Arrow">
        <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
    </ObjectAnimationUsingKeyFrames>
</Storyboard>

<Storyboard x:Key="HideFillStoryBoard">
    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Fill">
        <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />

        <DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="{x:Static Visibility.Collapsed}" />
    </ObjectAnimationUsingKeyFrames>

    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Arrow">
        <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />

        <DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="{x:Static Visibility.Collapsed}" />
    </ObjectAnimationUsingKeyFrames>
</Storyboard>

しかし、このストーリーボードを実装する場所がわかりません。誰でも解決策を見つけるのを手伝ってくれませんか。

4

2 に答える 2

0

私は個人的にこれまでスタイルにストーリーボードを実装したことはありませんが、他の投稿を読んで、自分のスタイルを使用してストーリーボードにforを<Triggers>設定する必要があることは間違いありません。TriggerIsMouseOver

于 2012-12-18T10:51:16.877 に答える
0

これは DataTriggers を使用して実現できますがStoryboard.TargetName=something、ShowFillStoryBoard.

DataTriggers を使用して Storyboard を開始します。

    <Style x:Key="MouseOverImageStyle" TargetType="Image">
        <Style.Triggers>
            <DataTrigger Binding="{Binding Path=IsMouseOver, ElementName=textBlockName}" Value="True">
                <DataTrigger.EnterActions>
                    <BeginStoryboard x:Name="StartStoryboardBegin" Storyboard="{StaticResource ResourceKey=ShowFillStoryBoard}"></BeginStoryboard>
                </DataTrigger.EnterActions>
                <DataTrigger.ExitActions>
                    <RemoveStoryboard BeginStoryboardName="StartStoryboardBegin"></RemoveStoryboard>
                </DataTrigger.ExitActions>
            </DataTrigger>
        </Style.Triggers>
    </Style>

アニメーション化する画像にこのスタイルを適用します。Style="{DynamicResource ResourceKey=MouseOverImageStyle}"

于 2012-12-18T12:21:02.160 に答える