1

ユーザーコントロールを作成しました。ユーザーがマウスでこのコントロールに入ると、特定のパネルを非表示にして別のパネルに置き換えたいと思います。

SlideIn トランジションも必要ですが、正しく動作しません。

コード：

<UserControl x:Name="UserControl">

<UserControl.Resources>

    <i:Interaction.Triggers>
        <i:EventTrigger EventName="MouseEnter">
            <ei:GoToStateAction TargetObject="{Binding ElementName=UserControl}" StateName="UsercontrolMouseEnter"/>
        </i:EventTrigger>
        <i:EventTrigger EventName="MouseLeave">
            <ei:GoToStateAction TargetObject="{Binding ElementName=UserControl}" StateName="UsercontrolMouseLeave"/>
        </i:EventTrigger>
    </i:Interaction.Triggers>

    <UserControl.Background>
        <StaticResource ResourceKey="DarkGrey"/>
    </UserControl.Background>

    <Grid x:Name="LayoutRoot" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Transparent">

        <VisualStateManager.CustomVisualStateManager>
            <ei:ExtendedVisualStateManager/>
        </VisualStateManager.CustomVisualStateManager> 

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="UsercontrolVisualStates">
                <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0:0:0.5" To="UsercontrolMouseEnter">
                        <ei:ExtendedVisualStateManager.TransitionEffect>
                            <ee:SlideInTransitionEffect/>
                        </ei:ExtendedVisualStateManager.TransitionEffect>
                    </VisualTransition>
                </VisualStateGroup.Transitions>
                <VisualState x:Name="UsercontrolMouseEnter">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="UserStatusPanel">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Collapsed}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="UserActionsPanel">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="UsercontrolMouseLeave"/>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="30"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="50"/>
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid x:Name="UserCallAlarmPanel" Grid.Column="0" Grid.RowSpan="2" 
        Background="{Binding CallStatus, Converter={StaticResource CallStatusBackgroundConverter}}" >
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <WrapPanel x:Name="ExtraCallPanel" Grid.Row="0" Style="{StaticResource SelectedAction}" VerticalAlignment="Center"
            Visibility="{Binding HasCalls, Converter={StaticResource BoolToVis}}" >
            <WrapPanel Background="Transparent" >
                <Viewbox StretchDirection="DownOnly" Stretch="Uniform" >
                    <ContentControl Content="{DynamicResource calls_icon}"/>
                </Viewbox>
            </WrapPanel>
        </WrapPanel>

         <WrapPanel x:Name="ExtraAlarmPanel" Grid.Row="1" Style="{StaticResource SelectedAction}" VerticalAlignment="Center"
            Visibility="{Binding HasCalls, Converter={StaticResource BoolToVis}}" >
            <WrapPanel Background="Transparent" >
                <Viewbox StretchDirection="DownOnly" Stretch="Uniform" >
                    <ContentControl Content="{DynamicResource alarm_icon}"/>
                </Viewbox>
            </WrapPanel>
        </WrapPanel>
    </Grid>

    <Border BorderBrush="{x:Null}" Margin="10,0,0,0" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Center">
        <TextBlock x:Name="UserNameLabel" TextWrapping="Wrap" Text="{Binding Name}" Margin="0,5,0,0" 
            FontSize="16" VerticalAlignment="Center" Style="{StaticResource WhiteSegoeText}" />
    </Border>

    <Border x:Name="UserStatusPanel" BorderBrush="{x:Null}" Margin="10,0,0,0" Grid.Column="1" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Center">
        <TextBlock x:Name="UserStatusLabel" TextWrapping="Wrap" Text="{Binding UserStatus}" 
            FontSize="13" VerticalAlignment="Center" Style="{StaticResource WhiteSegoeText}"  />
    </Border>

    <WrapPanel x:Name="UserStatusIconPanel" Grid.Column="2" Grid.RowSpan="2" Height="50" Width="50" MouseLeftButtonDown="StatusIconContainer_MouseLeftButtonDown" Style="{StaticResource SelectedAction}" 
               Visibility="{Binding Status, Converter={StaticResource StatusVisibilityConverter}}" >
        <Viewbox StretchDirection="DownOnly" Stretch="Uniform">
            <Image x:Name="UserStatusIcon" Source="{Binding Status, Converter={StaticResource StatusIconConverter}}" />
        </Viewbox>
    </WrapPanel>

    <Grid x:Name="UserActionsPanel" Grid.Column="1" Grid.Row="1" HorizontalAlignment="Center" Visibility="Collapsed" >
        <Grid.Resources>
            <Style TargetType="{x:Type WrapPanel}" BasedOn="{StaticResource SelectedAction}">
                <Setter Property="Margin" Value="5,0,5,0" />
            </Style> 
        </Grid.Resources>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <WrapPanel x:Name="MessageActionPanel" Grid.Column="0" MouseLeftButtonDown="Iconpanel1_MouseLeftButtonDown">
            <Viewbox StretchDirection="DownOnly" Stretch="Uniform" >
                <ContentControl x:Name="MessageAction" Content="{StaticResource action_message}" />
            </Viewbox>
        </WrapPanel>

        <WrapPanel x:Name="ChatActionPanel" Grid.Column="1" MouseLeftButtonDown="Iconpanel2_MouseLeftButtonDown">
            <Viewbox StretchDirection="DownOnly" Stretch="Uniform" >
                <ContentControl x:Name="ChatAction" Content="{StaticResource action_chat}" />
            </Viewbox>
        </WrapPanel>

        <WrapPanel x:Name="CallActionPanel" Grid.Column="2" MouseLeftButtonDown="Iconpanel3_MouseLeftButtonDown">
            <Viewbox StretchDirection="DownOnly" Stretch="Uniform" >
                <ContentControl x:Name="CallAction" Content="{StaticResource action_call_icon}" />
            </Viewbox>
        </WrapPanel>

        <WrapPanel x:Name="SipCallActionPanel" Grid.Column="3" MouseLeftButtonDown="Iconpanel4_MouseLeftButtonDown">
            <Viewbox StretchDirection="DownOnly" Stretch="Uniform" >
                <ContentControl x:Name="SipCallAction" Content="{StaticResource action_sipcall_icon}" />
            </Viewbox>
        </WrapPanel>
    </Grid>
</Grid>
</UserControl>

しかし、このコードは、マウス入力時にユーザーコントロール全体を左から右にスライドさせます。
UserStatusPanel と UserActionsPanel のみがアニメーション化されるようにするには、何を変更する必要がありますか?

4

0 に答える 0