在懸停或點擊更改按鈕圖像

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只是創建和更改邊框。但它也可以用來改變圖像。

<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張圖像在3個<Image>標籤和自ContentPresenter在頂部，當你使用<Button Template="{StaticResource MyButton}">的模板，你仍然可以放入內容，它會出現在你的背景圖片的頂部。或者您也可以擁有帶圖像的完全圖形按鈕。

Answer 4

PointerPressed/PointerReleased + =的原因在您的原始代碼中不起作用，因爲Button（實際上ButtonBase）類處理這些事件。這是因爲它們被合併到Click事件中（在發佈中）。如果您在第一個參數PointerPressedEvent中使用skillButton.AddHandler，則第二個參數指向一個指定處理程序的新處理程序引用，第三個參數爲true，則可以使用PointerPressed而不是Entered/Exited作爲事件。

Answer 5

這是一種可以在Blend中添加一些額外圖像的可見性打開和關閉的樣式。圖像是透明的，並通過使用「發送到後面」來進入按鈕背景圖像。換句話說，您可以繼續爲每個按鈕使用不同的背景圖像刷子，以及交換的正常，指針和按下的圖像。所以兩個背景圖像重疊。

<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用戶界面工具包XAML現在有這個功能：在Visual Studio 2012

Image Button and Toggle Image Button

使用軟件包管理器控制檯命令 「安裝，包winrtxamltoolkit」 安裝該工具包...這是對很多事情都很有用。