半透明の画像ボタンの作成方法

Question

画像に操作を行うボタンがいくつかあります。これらのボタンを画像の上に置く必要があります。ボタンは画像そのものでなければなりません。

• ボタンは半透明である必要があります。

• 画像/色はクリックで変更する必要があります。これにより、ユーザーはどのコントロールがアクティブかを知ることができます。

• ボタンの上にマウスを置くと、不透明度が高くなります。

どうすればよいですか？どのような方法でカスタムコントロールを作成するか、またどのコントロールを使用するかについてのガイドラインは非常に役に立ちます。

Answer 1

私があなたの要件を正しく理解していれば、ToggleButtonはあなたに必要なものを与えるはずです。

マウスオーバービジュアルの場合は半透明のBorderを作成し、未チェックのビジュアルの場合はもう半透明のBorderを作成する必要があります。 VisualStateMangerでは、MouseOverの状態がアクティブな場合は、MouseOverVisualと表示されます。 Unchecked状態がアクティブな場合は、UncheckedVisualと表示されます。

私はすぐにExpression Blendであなたのためにスタイルをモックアップしました。完璧ではありませんが、ほんの少しのアイデアがあります。 :)

<Style x:Key="SemiTransparentImageToggleButtonStyle" TargetType="ToggleButton"> 
     <Setter Property="HorizontalAlignment" Value="Center"/> 
     <Setter Property="VerticalAlignment" Value="Center"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="ToggleButton"> 
        <Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualState x:Name="Normal"/> 
           <VisualState x:Name="MouseOver"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="MouseOverVisual"> 
              <DiscreteObjectKeyFrame KeyTime="0"> 
               <DiscreteObjectKeyFrame.Value> 
                <Visibility>Visible</Visibility> 
               </DiscreteObjectKeyFrame.Value> 
              </DiscreteObjectKeyFrame> 
             </ObjectAnimationUsingKeyFrames> 
             <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="UncheckedVisual" d:IsOptimized="True"/> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Pressed"/> 
           <VisualState x:Name="Disabled"/> 
          </VisualStateGroup> 
          <VisualStateGroup x:Name="CheckStates"> 
           <VisualState x:Name="Checked"/> 
           <VisualState x:Name="Unchecked"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="UncheckedVisual"> 
              <DiscreteObjectKeyFrame KeyTime="0"> 
               <DiscreteObjectKeyFrame.Value> 
                <Visibility>Visible</Visibility> 
               </DiscreteObjectKeyFrame.Value> 
              </DiscreteObjectKeyFrame> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
          <VisualStateGroup x:Name="FocusStates"> 
           <VisualState x:Name="Focused"/> 
           <VisualState x:Name="Unfocused"/> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
         <Border x:Name="MouseOverVisual" Background="White" Opacity="0.5" Visibility="Collapsed" OpacityMask="Black"/> 
         <Border x:Name="UncheckedVisual" Background="White" Opacity="0.7" Visibility="Collapsed"/> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style>