ボタンイメージをホバーまたはクリックで変更する

Question

ホバー上のボタンの背景イメージを変更するにはどうしたらいいですか？ Visual StudioのUIは簡単な操作方法を提供していないようです。現在のところ、デフォルトの動作は、私のイメージを単調な色に置き換えているようです。

私がこれまでにボタンの拠点となっているすべて：私はイベントを処理し、それを手動で設定しようとした

<Button Content="" Height="75" VerticalAlignment="Center" Width="75" HorizontalAlignment="Center" ClickMode="Press"> 
     <Button.Background> 
      <ImageBrush ImageSource="../data/images/icons/skill_icon_0.png"/> 
     </Button.Background> 
    </Button> 

が、それはプレス/リリースのために動作しません：

 Button skillButton = new Button(); 
     skillButton.Width = 75; 
     skillButton.Height = 75; 
     skillButton.ClickMode = ClickMode.Press; 
     skillButton.Background = GetIconImage(iconIndex, 0); 
     skillButton.PointerEntered += 
      (object sender, Windows.UI.Xaml.Input.PointerEventArgs e) => { 
       skillButton.Background = GetIconImage(iconIndex, 1); 
      }; 
     skillButton.PointerExited += 
      (object sender, Windows.UI.Xaml.Input.PointerEventArgs e) => { 
       skillButton.Background = GetIconImage(iconIndex, 0); 
      }; 
     skillButton.PointerPressed += 
      (object sender, Windows.UI.Xaml.Input.PointerEventArgs e) => { 
       skillButton.Background = GetIconImage(iconIndex, 2); 
      }; 
     skillButton.PointerReleased += 
      (object sender, Windows.UI.Xaml.Input.PointerEventArgs e) => { 
       if (skillButton.FocusState == FocusState.Pointer) 
        skillButton.Background = GetIconImage(iconIndex, 1); 
       else skillButton.Background = GetIconImage(iconIndex, 0); 
      }; 

Answer 1

私はControlTemplateの編集を終了しましたBorderを作成して変更します。しかし、画像を変更するためにも使用できます。

<Button Width="75" Height="75" ClickMode="Press"> 
     <Button.Template> 
      <ControlTemplate TargetType="Button"> 
       <Border x:Name="RootElement" CornerRadius="10" BorderThickness="2"> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="CommonStates"> 
          <VisualStateGroup.Transitions> 
           <VisualTransition To="MouseOver" GeneratedDuration="0:0:0.1"/> 
           <VisualTransition To="Pressed" GeneratedDuration="0:0:0.1"/> 
          </VisualStateGroup.Transitions> 
          <VisualState x:Name="Normal" /> 
          <VisualState x:Name="MouseOver"> 
           <Storyboard> 
            <ColorAnimation Storyboard.TargetName="BorderBrush" 
                Storyboard.TargetProperty="Color" 
                To="Yellow" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Pressed"> 
           <Storyboard> 
            <ColorAnimation Storyboard.TargetName="BorderBrush" 
                Storyboard.TargetProperty="Color" 
                To="Black"/> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
        <Border.BorderBrush> 
         <SolidColorBrush x:Name="BorderBrush" Color="White"/> 
        </Border.BorderBrush> 
        <Border.Background> 
         <ImageBrush ImageSource="ms-appx:/data/images/icons/skill_icon_0.png"/> 
        </Border.Background> 
       </Border> 
      </ControlTemplate> 
     </Button.Template> 
    </Button> 

Answer 2

使用このコードはボタンのPointer_Enteredイベントで動作します:)

private void Button_PointerEntered_1(object sender, PointerEventArgs e) 
    { 
     BitmapImage bmp = new BitmapImage(); 
     Uri u = new Uri("ms-appx:/Images/Shapes/blueball.png", UriKind.RelativeOrAbsolute); 
     bmp.UriSource = u; 
     ImageBrush i = new ImageBrush(); 
     i.ImageSource=bmp; 
     button.Background= i; 

    } 

Answer 3

あなたはかなりあります。テキスト/コンテンツの下に写真の上に半透明のカラーを適用することはできますが、画像全体を変更するように頼んだので、ここでできることは次のとおりです。

Visual Studio 2012では、主にスタイル/設定したものを右クリックし、テンプレートの編集 - >コピーの編集を行います。新しいスタイル/テンプレートを配置する場所を選択します。それは、CSSを置く場所を選ぶようなものです。グローバルファイル（App.xamlまたはStandardStyle.xaml）またはヘッダー（ページリソース）またはインライン（コントロールリソース）に存在する可能性があります。

XAML下記のザ・オーバーは、簡略化され、動作していないが、それはそれのアイデアだことがあります：今

<ControlTemplate x:Key="MyButton" TargetType="Button"> 
    <Grid> 
     <VisualStateManager.VisualStateGroups> 
      <VisualStateGroup x:Name="CommonStates"> 
       <VisualState x:Name="Normal" /> 
       <VisualState x:Name="PointerOver"> 
        <Storyboard> 
         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverBackground" 
          Storyboard.TargetProperty="Visibility"> 
          <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" /> 
         </ObjectAnimationUsingKeyFrames> 
        </Storyboard> 
       </VisualState> 
       <VisualState x:Name="Pressed"> 
        <Storyboard> 
         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBackground" 
          Storyboard.TargetProperty="Visibility"> 
          <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" /> 
         </ObjectAnimationUsingKeyFrames> 
        </Storyboard> 
       </VisualState> 
       [...] 
      </VisualStateGroup> 
      <VisualStateGroup x:Name="FocusStates"> 
       [...] 
      </VisualStateGroup> 
     </VisualStateManager.VisualStateGroups> 
     <Border x:Name="Border" [...]> 
      <Grid> 
       <Image Source="[...]" Stretch="None" /> 
       <Image x:Name="HoverBackground" Source="[...]" Visibility="Collapsed" /> 
       <Image x:Name="PressedBackground" Source="[...]" Visibility="Collapsed" /> 
       <ContentPresenter x:Name="ContentPresenter" 
       Content="{TemplateBinding Content}" 
       ContentTransitions="{TemplateBinding ContentTransitions}" 
       ContentTemplate="{TemplateBinding ContentTemplate}" 
       Margin="{TemplateBinding Padding}" 
       HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
       VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
        [...]/> 
      </Grid> 
     </Border> 
     [...] 
    </Grid> 
</ControlTemplate> 

あなたは3つの<Image>タグにとのContentPresenterが上にあるので、あなたの3枚の画像を配置することができ、あなたは<Button Template="{StaticResource MyButton}">でテンプレートを使用しますが、あなたはまだコンテンツを入れることができ、それはあなたの背景イメージの上に現れます。または、画像とともに完全にグラフィカルなボタンを持つこともできます。

Answer 4

PointerPressed/PointerReleasedの+ =が元のコードで機能しない理由は、Button（実際にはButtonBase）がこれらのイベントをクラス処理するためです。 Clickイベント（リリース時）に統合されているためです。最初のparam PointerPressedEventでskillButton.AddHandlerを使用し、2番目のparamで名前付きハンドラへの新しいハンドラ参照を、3番目のパラメータがtrueの場合、イベントとしてEntered/ExitedではなくPointerPressedを使用できます。

Answer 5

ここでは、ブレンドで追加するいくつかの余分な画像の表示/非表示を切り替えるスタイルがあります。画像は透明でボタンバックグラウンド画像の背後にある「Send to Back」を使用して移動します。つまり、ボタンごとに別の背景画像ブラシとスワップされた標準、ポインタ、および押し込まれた画像を使用し続けます。 2つの背景画像が重ね合わされている。

<Style x:Key="qButtonStyle" TargetType="Button"> 
    <Setter Property="Background" Value="{StaticResource ButtonBackgroundThemeBrush}" /> 
    <Setter Property="Foreground" Value="{StaticResource ButtonForegroundThemeBrush}" /> 
    <Setter Property="BorderBrush" Value="{StaticResource ButtonBorderThemeBrush}" /> 
    <Setter Property="BorderThickness" Value="{StaticResource ButtonBorderThemeThickness}" /> 
    <Setter Property="Padding" Value="4" /> 
    <Setter Property="HorizontalAlignment" Value="Left" /> 
    <Setter Property="VerticalAlignment" Value="Center" /> 
    <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}" /> 
    <Setter Property="FontWeight" Value="SemiBold" /> 
    <Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="Button"> 
       <Grid x:Name="grid"> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="CommonStates"> 
          <VisualState x:Name="Normal" > 
           <Storyboard> 
            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="imageNormal" d:IsOptimized="True"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="PointerOver"> 

           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush)" Storyboard.TargetName="Border"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Null}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="Border"> 
             <DiscreteObjectKeyFrame KeyTime="0"> 
              <DiscreteObjectKeyFrame.Value> 
               <Thickness>0</Thickness> 
              </DiscreteObjectKeyFrame.Value> 
             </DiscreteObjectKeyFrame> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="imageNormal"> 
             <DiscreteObjectKeyFrame KeyTime="0"> 
              <DiscreteObjectKeyFrame.Value> 
               <Visibility>Collapsed</Visibility> 
              </DiscreteObjectKeyFrame.Value> 
             </DiscreteObjectKeyFrame> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="imagePressed"> 
             <DiscreteObjectKeyFrame KeyTime="0"> 
              <DiscreteObjectKeyFrame.Value> 
               <Visibility>Collapsed</Visibility> 
              </DiscreteObjectKeyFrame.Value> 
             </DiscreteObjectKeyFrame> 
            </ObjectAnimationUsingKeyFrames> 
            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="imagePointer" d:IsOptimized="True"/> 
           </Storyboard> 

          </VisualState> 
          <VisualState x:Name="Pressed"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" 
             Storyboard.TargetName="Border"/> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" 
             Storyboard.TargetName="ContentPresenter"/> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush)" Storyboard.TargetName="Border"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Null}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill)" Storyboard.TargetName="FocusVisualWhite"> 
             <DiscreteObjectKeyFrame KeyTime="0"> 
              <DiscreteObjectKeyFrame.Value> 
               <SolidColorBrush Color="#7F006400"/> 
              </DiscreteObjectKeyFrame.Value> 
             </DiscreteObjectKeyFrame> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill)" Storyboard.TargetName="FocusVisualBlack"> 
             <DiscreteObjectKeyFrame KeyTime="0"> 
              <DiscreteObjectKeyFrame.Value> 
               <SolidColorBrush Color="#7F006400"/> 
              </DiscreteObjectKeyFrame.Value> 
             </DiscreteObjectKeyFrame> 
            </ObjectAnimationUsingKeyFrames> 
            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="imagePressed" d:IsOptimized="True"/> 
            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="imagePointer" d:IsOptimized="True"/> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="imageNormal"> 
             <DiscreteObjectKeyFrame KeyTime="0"> 
              <DiscreteObjectKeyFrame.Value> 
               <Visibility>Collapsed</Visibility> 
              </DiscreteObjectKeyFrame.Value> 
             </DiscreteObjectKeyFrame> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="imagePointer"> 
             <DiscreteObjectKeyFrame KeyTime="0"> 
              <DiscreteObjectKeyFrame.Value> 
               <Visibility>Collapsed</Visibility> 
              </DiscreteObjectKeyFrame.Value> 
             </DiscreteObjectKeyFrame> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Disabled"> 
           <Storyboard> 
            <DoubleAnimation Duration="0" To="0.25" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid" d:IsOptimized="True"/> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
         <VisualStateGroup x:Name="FocusStates"> 
          <VisualState x:Name="Focused"> 
           <Storyboard> 
            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" 
             Storyboard.TargetName="FocusVisualWhite" /> 
            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" 
             Storyboard.TargetName="FocusVisualBlack" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Unfocused" /> 
          <VisualState x:Name="PointerFocused" /> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
        <Image x:Name="imagePointer" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Source="ms-appx:///Assets/btnBGPointer.png" Opacity="0"/> 
        <Image x:Name="imagePressed" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Source="ms-appx:///Assets/btnBGPressed.png" Opacity="0"/> 
        <Image x:Name="imageNormal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Source="ms-appx:///Assets/bgButtonBase.png"/> 
        <Border x:Name="Border" 
         Background="{TemplateBinding Background}" Margin="3"> 
         <ContentPresenter x:Name="ContentPresenter" 
          ContentTemplate="{TemplateBinding ContentTemplate}" 
          ContentTransitions="{TemplateBinding ContentTransitions}" 
          Content="{TemplateBinding Content}" 
          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
          Margin="{TemplateBinding Padding}" 
          VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /> 
        </Border> 
        <Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Opacity="0" 
         StrokeDashOffset="1.5" StrokeEndLineCap="Square" 
         Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1" /> 
        <Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Opacity="0" 
         StrokeDashOffset="0.5" StrokeEndLineCap="Square" 
         Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1" /> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Answer 6

WindowsのUIのXAMLツールキットは現在、この機能を持っています

Image Button and Toggle Image Button

使用ツールキットをインストールするには、Visual Studioの2012年のパッケージマネージャコンソールコマンド "インストール・パッケージをwinrtxamltoolkit" ...それはさ多くのことに本当に便利です。