1. ホーム
  2. 質問と答え
  3. ボタンをクリックしたときにWPFアニメーションを切り替えます

ボタンをクリックしたときにWPFアニメーションを切り替えます

2016-12-02 10 views
0

ボタン拡大アニメーションを実装したい場合、ユーザーがトップボタンの上を移動すると、それぞれのボタンを持つ他の機能のスニークピークが、そのトップボタンの下に表示されます最初は私はそれを達成するために以下のXAMLを書いて、それは期待どおりに働いています。ボタンをクリックしたときにWPFアニメーションを切り替えます

XAML：

<Button Name="panel" Margin="0,40,0,0"> 
     <Button.Template> 
      <ControlTemplate x:Name="abc"> 
       <Grid> 
        <Button Width="150" Name="addButton" Height="30" Grid.Column="1" VerticalAlignment="Top" FontSize="20" Margin="0,5,10,0" Foreground="White" VerticalContentAlignment="Stretch" Content="+" Click="Button_Click"> 
         <Button.Template> 
          <ControlTemplate x:Name="addBtn" TargetType="Button"> 
           <StackPanel Orientation="Horizontal" > 
            <TextBlock Name="addFavTxtBlock" Foreground="LightGray" FontWeight="SemiBold" VerticalAlignment="Center" HorizontalAlignment="Left" Text="Add new task" Opacity="0" FontSize="14" Width="90" Visibility="Hidden"> 
            </TextBlock> 
            <Grid> 
             <Ellipse Width="30" Stroke="#00a1f1" Name="btnEllipse" 
        StrokeThickness="2" Fill="#00a1f1"> 
             </Ellipse> 
             <ContentPresenter HorizontalAlignment="Center" 
           VerticalAlignment="Top"/> 
             <Grid.Effect> 
              <DropShadowEffect BlurRadius="5" ShadowDepth="1"/> 
             </Grid.Effect> 
            </Grid> 
           </StackPanel> 
           <ControlTemplate.Triggers> 
            <Trigger Property="IsMouseOver" Value="True"> 
             <Setter Property="Width" TargetName="btnEllipse" Value="28"></Setter> 
             <Setter Property="Height" TargetName="btnEllipse" Value="28"></Setter> 
             <Trigger.EnterActions> 
              <BeginStoryboard> 
               <Storyboard> 
                <DoubleAnimation Storyboard.TargetName="addFavTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/> 
               </Storyboard> 
              </BeginStoryboard> 
             </Trigger.EnterActions> 
            </Trigger> 
            <!--Trigger Property="IsMouseOver" Value="False"> 
             <Setter Property="Visibility" TargetName="addFavTxtBlock" Value="Hidden"></Setter> 
            </--> 
            <Trigger Property="Margin" Value="0,45,10,0"> 
             <Setter Property="Visibility" TargetName="addFavTxtBlock" Value="Visible"></Setter> 
             <Trigger.EnterActions> 
              <BeginStoryboard> 
               <Storyboard> 
                <DoubleAnimation Storyboard.TargetName="addFavTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/> 
               </Storyboard> 
              </BeginStoryboard> 
             </Trigger.EnterActions> 
             <Trigger.ExitActions> 
              <BeginStoryboard> 
               <Storyboard> 
                <DoubleAnimation Storyboard.TargetName="addFavTxtBlock" Storyboard.TargetProperty="Opacity" From="50" To="0" Duration="00:00:00.03"/> 
               </Storyboard> 
              </BeginStoryboard> 
             </Trigger.ExitActions> 
            </Trigger> 
           </ControlTemplate.Triggers> 
          </ControlTemplate> 
         </Button.Template> 
        </Button> 
        <Button Width="150" Name="remButton" Height="30" Grid.Column="1" VerticalAlignment="Top" FontSize="20" Margin="0,5,10,0" Foreground="White" VerticalContentAlignment="Stretch" Content="-" Click="Button_Click"> 
         <Button.Template> 
          <ControlTemplate x:Name="addBtn" TargetType="Button"> 
           <StackPanel Orientation="Horizontal" > 
            <TextBlock Name="remFavTxtBlock" Foreground="LightGray" FontWeight="SemiBold" VerticalAlignment="Center" HorizontalAlignment="Left" Text="Remove task" Opacity="0" FontSize="14" Width="90" Visibility="Hidden"> 
            </TextBlock> 
            <Grid> 
             <Ellipse Width="30" Stroke="#00a1f1" Name="btnEllipse" 
        StrokeThickness="2" Fill="#00a1f1"> 
             </Ellipse> 
             <ContentPresenter HorizontalAlignment="Center" 
           VerticalAlignment="Top"/> 
             <Grid.Effect> 
              <DropShadowEffect BlurRadius="5" ShadowDepth="1"/> 
             </Grid.Effect> 
            </Grid> 
           </StackPanel> 
           <ControlTemplate.Triggers> 
            <Trigger Property="IsMouseOver" Value="True"> 
             <Setter Property="Width" TargetName="btnEllipse" Value="28"></Setter> 
             <Setter Property="Height" TargetName="btnEllipse" Value="28"></Setter> 
             <Trigger.EnterActions> 
              <BeginStoryboard> 
               <Storyboard> 
                <DoubleAnimation Storyboard.TargetName="remFavTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/> 
               </Storyboard> 
              </BeginStoryboard> 
             </Trigger.EnterActions> 
             <Trigger.ExitActions> 
              <BeginStoryboard> 
               <Storyboard> 
                <DoubleAnimation Storyboard.TargetName="remFavTxtBlock" Storyboard.TargetProperty="Opacity" From="50" To="0" Duration="00:00:00.03"/> 
               </Storyboard> 
              </BeginStoryboard> 
             </Trigger.ExitActions> 
            </Trigger> 
            <Trigger Property="Margin" Value="0,85,10,0"> 
             <Setter Property="Visibility" TargetName="remFavTxtBlock" Value="Visible"></Setter> 
             <Trigger.EnterActions> 
              <BeginStoryboard> 
               <Storyboard> 
                <DoubleAnimation Storyboard.TargetName="remFavTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/> 
               </Storyboard> 
              </BeginStoryboard> 
             </Trigger.EnterActions> 
             <Trigger.ExitActions> 
              <BeginStoryboard> 
               <Storyboard> 
                <DoubleAnimation Storyboard.TargetName="remFavTxtBlock" Storyboard.TargetProperty="Opacity" From="50" To="0" Duration="00:00:00.03"/> 
               </Storyboard> 
              </BeginStoryboard> 
             </Trigger.ExitActions> 
            </Trigger> 
           </ControlTemplate.Triggers> 
          </ControlTemplate> 
         </Button.Template> 
        </Button> 
        <Button Width="150" Name="editButton" Height="30" Grid.Column="1" VerticalAlignment="Top" FontSize="20" Margin="0,5,10,0" Foreground="White" VerticalContentAlignment="Stretch" Content="..." Click="Button_Click"> 
         <Button.Template> 
          <ControlTemplate x:Name="editBtn" TargetType="Button"> 
           <StackPanel Orientation="Horizontal" > 
            <TextBlock Name="editTxtBlock" Foreground="LightGray" FontWeight="SemiBold" VerticalAlignment="Center" HorizontalAlignment="Left" Opacity="0" FontSize="14" Width="90"> 
            </TextBlock> 
            <Grid> 
             <Ellipse Width="30" Stroke="#00a1f1" Name="btnEllipse" 
        StrokeThickness="2" Fill="#00a1f1"> 
             </Ellipse> 
             <ContentPresenter HorizontalAlignment="Center" 
           VerticalAlignment="Top"/> 
             <Grid.Effect> 
              <DropShadowEffect BlurRadius="5" ShadowDepth="1"/> 
             </Grid.Effect> 
            </Grid> 
           </StackPanel> 
           <ControlTemplate.Triggers> 
            <Trigger Property="IsMouseOver" Value="True"> 
             <Setter Property="Width" TargetName="btnEllipse" Value="28"></Setter> 
             <Setter Property="Height" TargetName="btnEllipse" Value="28"></Setter> 
             <Trigger.EnterActions> 
              <BeginStoryboard> 
               <Storyboard> 
                <DoubleAnimation Storyboard.TargetName="editTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/> 
               </Storyboard> 
              </BeginStoryboard> 
             </Trigger.EnterActions> 
            </Trigger> 
            <Trigger Property="IsMouseOver" Value="False"> 
             <Setter Property="Visibility" TargetName="editTxtBlock" Value="Hidden"></Setter> 
            </Trigger> 
           </ControlTemplate.Triggers> 
          </ControlTemplate> 
         </Button.Template> 
        </Button> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <DataTrigger Binding="{Binding IsMouseOver, ElementName=editButton}" Value="True"> 
         <DataTrigger.EnterActions> 
          <BeginStoryboard Name="enterBoard"> 
           <Storyboard> 
            <ThicknessAnimationUsingKeyFrames Storyboard.TargetName="remButton" Storyboard.TargetProperty="Margin" BeginTime="00:00:00"> 
             <SplineThicknessKeyFrame KeyTime="00:00:00" Value="0,5,10,0" /> 
             <SplineThicknessKeyFrame KeyTime="00:00:00.05" Value="0,85,10,0" /> 
            </ThicknessAnimationUsingKeyFrames> 
            <ThicknessAnimationUsingKeyFrames Storyboard.TargetName="addButton" Storyboard.TargetProperty="Margin" BeginTime="00:00:00"> 
             <SplineThicknessKeyFrame KeyTime="00:00:00" Value="0,5,10,0" /> 
             <SplineThicknessKeyFrame KeyTime="00:00:00.05" Value="0,45,10,0" /> 
            </ThicknessAnimationUsingKeyFrames> 
           </Storyboard> 
          </BeginStoryboard> 
         </DataTrigger.EnterActions> 
         <DataTrigger.ExitActions> 
          <BeginStoryboard Name="exitBoard"> 
           <Storyboard> 
            <ThicknessAnimationUsingKeyFrames Storyboard.TargetName="remButton" Storyboard.TargetProperty="Margin" BeginTime="00:00:00"> 
             <SplineThicknessKeyFrame KeyTime="00:00:00.05" Value="0,5,10,0" /> 
             <SplineThicknessKeyFrame KeyTime="00:00:00" Value="0,85,10,0" /> 
            </ThicknessAnimationUsingKeyFrames> 
            <ThicknessAnimationUsingKeyFrames Storyboard.TargetName="addButton" Storyboard.TargetProperty="Margin" BeginTime="00:00:00"> 
             <SplineThicknessKeyFrame KeyTime="00:00:00.05" Value="0,5,10,0" /> 
             <SplineThicknessKeyFrame KeyTime="00:00:00" Value="0,45,10,0" /> 
            </ThicknessAnimationUsingKeyFrames> 
           </Storyboard> 
          </BeginStoryboard> 
         </DataTrigger.ExitActions> 
        </DataTrigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Button.Template> 
    </Button>

初期スクリーンショット：

enter image description here

ユーザーが青色のボタンの上に置いたときに、二つの追加ボタンは、この青いボタンの後ろからドロップされます。これらの2つのボタンは、ユーザーが青色のボタンをクリックするまで表示されるため、スクリーンショットをとるのは難しいです。これはまさに私の問題です。

ユーザーが2つの追加ボタンをクリックしたい場合、ユーザーは青いボタンからカーソルを離す必要があり、すぐにこれらの2つの追加ボタンが消えて青いボタンの背後に隠れてエスケープしますユーザーのクリックどうすればこれを克服できますか？

とにかく、ユーザーが青いボタンをクリックするのではなく、クリックするとTrigger.ExitActionsを上書きできますか？またはExitActionsをしばらく無効にするために起動できる他のイベントですか？

私は青いボタンのクリックイベントを作成し、コードビハインドで必要な動作を処理しようとしていますが、それ以外の方法がある場合はお知らせください。

出典

2016-12-02 karun_r

+0

このようなシナリオは、最良 'VisualStates'を使用して処理されます。 「Normal」には1つの状態を使用し、「Expanded」にはもう1つの状態を使用します。 – AnjumSKhan

答えて

0

  1. いずれNormalとExpanded状態のための別のためVisualStatesいずれかを使用します。

  2. それとも、あなたのコードは次のようになります。その場合には、Buttonの代わりにToggleButtonを使用します。

    <Button Name="panel" Margin="0,40,10,31"> 
    <Button.Template> 
    <ControlTemplate x:Name="abc"> 
     <Grid> 
      <Button Width="150" Name="addButton" Height="30" Grid.Column="1" VerticalAlignment="Top" FontSize="20" Margin="0,5,10,0" Foreground="White" VerticalContentAlignment="Stretch" Content="+" > 
       <Button.Template> 
        <ControlTemplate x:Name="addBtn" TargetType="Button"> 
         <StackPanel Orientation="Horizontal" > 
          <TextBlock Name="addFavTxtBlock" Foreground="LightGray" FontWeight="SemiBold" VerticalAlignment="Center" HorizontalAlignment="Left" Text="Add new task" Opacity="0" FontSize="14" Width="90" Visibility="Hidden"> 
          </TextBlock> 
          <Grid> 
           <Ellipse Width="30" Stroke="#00a1f1" Name="btnEllipse" 
      StrokeThickness="2" Fill="#00a1f1"> 
           </Ellipse> 
           <ContentPresenter HorizontalAlignment="Center" 
        VerticalAlignment="Top"/> 
           <Grid.Effect> 
            <DropShadowEffect BlurRadius="5" ShadowDepth="1"/> 
           </Grid.Effect> 
          </Grid> 
         </StackPanel> 
         <ControlTemplate.Triggers> 
          <Trigger Property="IsMouseOver" Value="True"> 
           <Setter Property="Width" TargetName="btnEllipse" Value="28"></Setter> 
           <Setter Property="Height" TargetName="btnEllipse" Value="28"></Setter> 
           <Trigger.EnterActions> 
            <BeginStoryboard> 
             <Storyboard> 
              <DoubleAnimation Storyboard.TargetName="addFavTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/> 
             </Storyboard> 
            </BeginStoryboard> 
           </Trigger.EnterActions> 
          </Trigger> 
          <!--Trigger Property="IsMouseOver" Value="False"> 
          <Setter Property="Visibility" TargetName="addFavTxtBlock" Value="Hidden"></Setter> 
         </--> 
          <Trigger Property="Margin" Value="0,45,10,0"> 
           <Setter Property="Visibility" TargetName="addFavTxtBlock" Value="Visible"></Setter> 
           <Trigger.EnterActions> 
            <BeginStoryboard> 
             <Storyboard> 
              <DoubleAnimation Storyboard.TargetName="addFavTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/> 
             </Storyboard> 
            </BeginStoryboard> 
           </Trigger.EnterActions> 
           <Trigger.ExitActions> 
            <BeginStoryboard> 
             <Storyboard> 
              <DoubleAnimation Storyboard.TargetName="addFavTxtBlock" Storyboard.TargetProperty="Opacity" From="50" To="0" Duration="00:00:00.03"/> 
             </Storyboard> 
            </BeginStoryboard> 
           </Trigger.ExitActions> 
          </Trigger> 
         </ControlTemplate.Triggers> 
        </ControlTemplate> 
       </Button.Template> 
      </Button> 
      <Button Width="150" Name="remButton" Height="30" Grid.Column="1" VerticalAlignment="Top" FontSize="20" Margin="0,5,10,0" Foreground="White" VerticalContentAlignment="Stretch" Content="-"> 
       <Button.Template> 
        <ControlTemplate x:Name="addBtn" TargetType="Button"> 
         <StackPanel Orientation="Horizontal" > 
          <TextBlock Name="remFavTxtBlock" Foreground="LightGray" FontWeight="SemiBold" VerticalAlignment="Center" HorizontalAlignment="Left" Text="Remove task" Opacity="0" FontSize="14" Width="90" Visibility="Hidden"> 
          </TextBlock> 
          <Grid> 
           <Ellipse Width="30" Stroke="#00a1f1" Name="btnEllipse" 
      StrokeThickness="2" Fill="#00a1f1"> 
           </Ellipse> 
           <ContentPresenter HorizontalAlignment="Center" 
        VerticalAlignment="Top"/> 
           <Grid.Effect> 
            <DropShadowEffect BlurRadius="5" ShadowDepth="1"/> 
           </Grid.Effect> 
          </Grid> 
         </StackPanel> 
         <ControlTemplate.Triggers> 
          <Trigger Property="IsMouseOver" Value="True"> 
           <Setter Property="Width" TargetName="btnEllipse" Value="28"></Setter> 
           <Setter Property="Height" TargetName="btnEllipse" Value="28"></Setter> 
           <Trigger.EnterActions> 
            <BeginStoryboard> 
             <Storyboard> 
              <DoubleAnimation Storyboard.TargetName="remFavTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/> 
             </Storyboard> 
            </BeginStoryboard> 
           </Trigger.EnterActions> 
           <Trigger.ExitActions> 
            <BeginStoryboard> 
             <Storyboard> 
              <DoubleAnimation Storyboard.TargetName="remFavTxtBlock" Storyboard.TargetProperty="Opacity" From="50" To="0" Duration="00:00:00.03"/> 
             </Storyboard> 
            </BeginStoryboard> 
           </Trigger.ExitActions> 
          </Trigger> 
          <Trigger Property="Margin" Value="0,85,10,0"> 
           <Setter Property="Visibility" TargetName="remFavTxtBlock" Value="Visible"></Setter> 
           <Trigger.EnterActions> 
            <BeginStoryboard> 
             <Storyboard> 
              <DoubleAnimation Storyboard.TargetName="remFavTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/> 
             </Storyboard> 
            </BeginStoryboard> 
           </Trigger.EnterActions> 
           <Trigger.ExitActions> 
            <BeginStoryboard> 
             <Storyboard> 
              <DoubleAnimation Storyboard.TargetName="remFavTxtBlock" Storyboard.TargetProperty="Opacity" From="50" To="0" Duration="00:00:00.03"/> 
             </Storyboard> 
            </BeginStoryboard> 
           </Trigger.ExitActions> 
          </Trigger> 
         </ControlTemplate.Triggers> 
        </ControlTemplate> 
       </Button.Template> 
      </Button> 
      <ToggleButton Width="150" Name="editButton" Height="30" Grid.Column="1" VerticalAlignment="Top" FontSize="20" Margin="0,5,10,0" Foreground="White" VerticalContentAlignment="Stretch" Content="..."> 
       <ToggleButton.Template> 
        <ControlTemplate x:Name="editBtn" TargetType="ToggleButton"> 
         <StackPanel Orientation="Horizontal" > 
          <TextBlock Name="editTxtBlock" Foreground="LightGray" FontWeight="SemiBold" VerticalAlignment="Center" HorizontalAlignment="Left" Opacity="0" FontSize="14" Width="90"> 
          </TextBlock> 
          <Grid> 
           <Ellipse Width="30" Stroke="#00a1f1" Name="btnEllipse" 
      StrokeThickness="2" Fill="#00a1f1"> 
           </Ellipse> 
           <ContentPresenter HorizontalAlignment="Center" 
        VerticalAlignment="Top"/> 
           <Grid.Effect> 
            <DropShadowEffect BlurRadius="5" ShadowDepth="1"/> 
           </Grid.Effect> 
          </Grid> 
         </StackPanel> 
         <ControlTemplate.Triggers> 
          <Trigger Property="IsMouseOver" Value="True"> 
           <Setter Property="Width" TargetName="btnEllipse" Value="28"></Setter> 
           <Setter Property="Height" TargetName="btnEllipse" Value="28"></Setter> 
           <Trigger.EnterActions> 
            <BeginStoryboard> 
             <Storyboard> 
              <DoubleAnimation Storyboard.TargetName="editTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/> 
             </Storyboard> 
            </BeginStoryboard> 
           </Trigger.EnterActions> 
          </Trigger> 
          <Trigger Property="IsMouseOver" Value="False"> 
           <Setter Property="Visibility" TargetName="editTxtBlock" Value="Hidden"></Setter> 
          </Trigger> 
         </ControlTemplate.Triggers> 
        </ControlTemplate> 
       </ToggleButton.Template> 
      </ToggleButton> 
     </Grid> 
     <ControlTemplate.Triggers>          

      <DataTrigger Binding="{Binding IsChecked, ElementName=editButton}" Value="True"> 
       <DataTrigger.EnterActions> 
        <BeginStoryboard Name="enterBoard"> 
         <Storyboard FillBehavior="HoldEnd"> 
          <ThicknessAnimationUsingKeyFrames Storyboard.TargetName="remButton" Storyboard.TargetProperty="Margin" BeginTime="00:00:00"> 
           <SplineThicknessKeyFrame KeyTime="00:00:00" Value="0,5,10,0" /> 
           <SplineThicknessKeyFrame KeyTime="00:00:00.05" Value="0,85,10,0" /> 
          </ThicknessAnimationUsingKeyFrames> 
          <ThicknessAnimationUsingKeyFrames Storyboard.TargetName="addButton" Storyboard.TargetProperty="Margin" BeginTime="00:00:00"> 
           <SplineThicknessKeyFrame KeyTime="00:00:00" Value="0,5,10,0" /> 
           <SplineThicknessKeyFrame KeyTime="00:00:00.05" Value="0,45,10,0" /> 
          </ThicknessAnimationUsingKeyFrames> 
         </Storyboard> 
        </BeginStoryboard> 
       </DataTrigger.EnterActions> 
       <DataTrigger.ExitActions> 
        <BeginStoryboard Name="exitBoard"> 
         <Storyboard> 
          <ThicknessAnimationUsingKeyFrames Storyboard.TargetName="remButton" Storyboard.TargetProperty="Margin" BeginTime="00:00:00"> 
           <SplineThicknessKeyFrame KeyTime="00:00:00.05" Value="0,5,10,0" /> 
           <SplineThicknessKeyFrame KeyTime="00:00:00" Value="0,85,10,0" /> 
          </ThicknessAnimationUsingKeyFrames> 
          <ThicknessAnimationUsingKeyFrames Storyboard.TargetName="addButton" Storyboard.TargetProperty="Margin" BeginTime="00:00:00"> 
           <SplineThicknessKeyFrame KeyTime="00:00:00.05" Value="0,5,10,0" /> 
           <SplineThicknessKeyFrame KeyTime="00:00:00" Value="0,45,10,0" /> 
          </ThicknessAnimationUsingKeyFrames> 
         </Storyboard> 
        </BeginStoryboard> 
       </DataTrigger.ExitActions> 
      </DataTrigger> 

     </ControlTemplate.Triggers> 
    </ControlTemplate> 
    </Button.Template> 
</Button>

出典

2016-12-03 07:14:04 AnjumSKhan

+0

これはあなたのために機能しましたか？私は各ボタンのクリック方法を入れて、彼らは期待どおりに動作していません。まだ同じように動作しています –

+0

@ karun10投稿する前に確認します – AnjumSKhan

関連する問題

 関連する問題