クリックすると 'アニメーション'付きのWindows 10ユニバーサルアプリラウンドボタン

Question

現在、私は、デフォルトのボタンがクリックと同じように反応する円の形の単純なボタンを作成しようとしています（反応を視覚的に見ることができますデフォルトのボタンをクリックすると、色が他のものに変更されます）。

Ellipse属性を使用して円形のボタンを作成しました。これにより、ボタンがクリックされたときの反応（ビジュアル面での反応）が取り除かれました。 これを元に戻すために、ビジュアルマネージャを使用しました。 私の問題は、2つをうまく組み合わせることができないことです。

どうすればいいですか？

クリックに反応する丸いボタンを作成する簡単な方法はありますか？

理想的には、これをコードで行い、いくつかの場所で述べたBlendの使用を避けることが理想です。

以下は、XAMLの2つのコードスニペットです。

だけのシンプルな丸いボタン：

<Button Name="bottomCircle" Width="100" Height="100" HorizontalAlignment="Center" VerticalAlignment="Top" Grid.Row="2"> 
    <Button.Template> 
     <ControlTemplate TargetType="Button"> 
      <Grid> 
       <Ellipse Fill="Blue"> 
       </Ellipse> 
       <ContentPresenter HorizontalAlignment="Center" 
          VerticalAlignment="Center"/> 
      </Grid> 
     </ControlTemplate> 
    </Button.Template> 
</Button> 

ボタン「アニメーション」と：

<Button Content="Click Me" x:Name="ClickMe" Background="Blue" Grid.Row="2" Width="100" Height="100" > 
    <Button.Template> 
     <ControlTemplate TargetType="Button"> 
      <Grid Background="Transparent"> 
       <VisualStateManager.VisualStateGroups> 
        <VisualStateGroup x:Name="CommonStates"> 
         <VisualState x:Name="Normal"/> 
         <VisualState x:Name="MouseOver"/> 
         <VisualState x:Name="Pressed"> 
          <Storyboard> 
           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentContainer" Storyboard.TargetProperty="Foreground"> 
            <DiscreteObjectKeyFrame KeyTime="0" Value="Black" /> 
           </ObjectAnimationUsingKeyFrames> 
           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedHighlightBackground" Storyboard.TargetProperty="Background"> 
            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppBarBackgroundThemeBrush}" /> 
           </ObjectAnimationUsingKeyFrames> 
           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="BorderBrush"> 
            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppBarBackgroundThemeBrush}" /> 
           </ObjectAnimationUsingKeyFrames> 
          </Storyboard> 
         </VisualState> 
         <VisualState x:Name="Disabled"> 
          <Storyboard> 
           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentContainer" Storyboard.TargetProperty="Foreground"> 
            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonBackgroundThemeBrush}" /> 
           </ObjectAnimationUsingKeyFrames> 
           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="BorderBrush"> 
            <DiscreteObjectKeyFrame KeyTime="0" Value="Green" /> 
           </ObjectAnimationUsingKeyFrames> 
           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="Background"> 
            <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" /> 
           </ObjectAnimationUsingKeyFrames> 
          </Storyboard> 
         </VisualState> 
        </VisualStateGroup> 
       </VisualStateManager.VisualStateGroups> 
       <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0" Background="{TemplateBinding Background}"> 
        <Border x:Name="PressedHighlightBackground" Background="Transparent"> 
         <ContentControl x:Name="ContentContainer" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Padding="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/> 
        </Border> 
       </Border> 
      </Grid> 
     </ControlTemplate> 
    </Button.Template> 
</Button> 

Answer 1

あなたには、いくつかの大規模な数にあなたの境界要素のCornerRadiusを変更した場合は、取得しますサークル：

<Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" 
     BorderThickness="{TemplateBinding BorderThickness}" 
     CornerRadius="100" Background="{TemplateBinding Background}"> 
    <Border x:Name="PressedHighlightBackground" Background="Transparent" 
      CornerRadius="100"> 
     <ContentControl x:Name="ContentContainer" 
         Foreground="{TemplateBinding Foreground}" 
         HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
         VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
         Padding="{TemplateBinding Padding}" 
         Content="{TemplateBinding Content}" 
         ContentTemplate="{TemplateBinding ContentTemplate}"/> 
    </Border> 
</Border> 

（私はあなたがただ一つのしかし、

また、StoryboardとObjectAnimationUsingKeyFramesを使用すると、煩雑です。代わりにVisualState.Settersを使用すると、保守が容易になります。

クリック数と応答時間に応じて円内ののみに反応するには、外側には何も指定されていないGridを削除します。さらに、名前をPointerOverに変更すると、視覚状態MouseOverがうまく機能することに注意してください。

これは、あなたが望むように動作します。これは有望と思われる

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <Button Content="Click Me" x:Name="ClickMe" Background="Blue" Grid.Row="2" Width="100" Height="100" Foreground="White"> 
     <Button.Template> 
      <ControlTemplate TargetType="Button"> 
       <Border 
        x:Name="ButtonBackground" 
        BorderBrush="{TemplateBinding BorderBrush}" 
        BorderThickness="{TemplateBinding BorderThickness}" 
        CornerRadius="100" Background="{TemplateBinding Background}"> 
        <Border 
         x:Name="PressedHighlightBackground" 
         Background="Transparent" 
         CornerRadius="100"> 
         <ContentControl x:Name="ContentContainer" 
          Foreground="{TemplateBinding Foreground}" 
          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
          VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
          Padding="{TemplateBinding Padding}" 
          Content="{TemplateBinding Content}" 
          ContentTemplate="{TemplateBinding ContentTemplate}"/> 
        </Border> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="CommonStates"> 
          <VisualState x:Name="Normal"/> 
          <VisualState x:Name="PointerOver"> 
           <VisualState.Setters> 
            <Setter 
             Target="ContentContainer.Foreground" 
             Value="Pink" /> 
            <Setter 
             Target="PressedHighlightBackground.Background" 
             Value="Blue" /> 
            <Setter 
             Target="ButtonBackground.BorderBrush" 
             Value="{StaticResource AppBarBackgroundThemeBrush}" /> 
           </VisualState.Setters> 
          </VisualState> 
          <VisualState x:Name="Pressed"> 
           <VisualState.Setters> 
            <Setter 
             Target="ContentContainer.Foreground" 
             Value="Black" /> 
            <Setter 
             Target="PressedHighlightBackground.Background" 
             Value="{StaticResource AppBarBackgroundThemeBrush}" /> 
            <Setter 
             Target="ButtonBackground.BorderBrush" 
             Value="{StaticResource AppBarBackgroundThemeBrush}" /> 
           </VisualState.Setters> 
          </VisualState> 
          <VisualState x:Name="Disabled"> 

          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
       </Border> 
      </ControlTemplate> 
     </Button.Template> 
    </Button> 
</Grid>