마우스를 가져 가거나 Windows 8 용 XAML을 클릭하면 단추의 배경 이미지를 어떻게 변경할 수 있습니까?

Question

클릭했을 때 버튼의 배경 이미지를 변경하는 것에 대해 질문이 있습니다.

Google에서 검색을 시도했지만 저에게 효과가있는 것을 찾을 수 없습니다.

그럼 여기 내가이

private void btnHome_PointerEntered(object sender, PointerRoutedEventArgs e) 
    { 
     BitmapImage bmp = new BitmapImage(); 
     Uri u = new Uri("ms-appx:images/back_button_mouseover.png", UriKind.RelativeOrAbsolute); 
     bmp.UriSource = u; 
     ImageBrush i = new ImageBrush(); 
     i.ImageSource = bmp; 
     btnHome.Background = i; 
    } 

을 시도하지만 불행하게도이 WinRT Xaml Toolkit으로도

Answer 1

나는이 질문에 anwser를 발견했다.

컨트롤 템플릿을 편집해야합니다.

블렌드 또는 "손으로"할 수 있습니다.

(에 이름을 누르 확인을주고, 오른쪽 버튼, 편집 템플릿, 편집 복사를 누름)하여 버튼의 기본 템플릿을 검색 한 후 여러분의 필요에 맞게 순서를 사용자 정의

편집이 : Here입니다 RadioButton 템플릿 사용자 지정의 MSDN Ressource

Answer 2

을 일 내 코드

<Button Grid.Column="0" Grid.Row="0" x:Name="btnHome" VerticalAlignment="Stretch" BorderBrush="{x:Null}" HorizontalAlignment="Stretch" Click="btnHome_Click" PointerEntered="btnHome_PointerEntered"> 
       <Button.Template> 
        <ControlTemplate TargetType="Button"> 
         <Border x:Name="RootElement"> 
          <VisualStateManager.VisualStateGroups> 
           <VisualStateGroup x:Name="CommonStates"> 
            <VisualState x:Name="MouseOver"> 
             <Storyboard> 
              //I want my background change here 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Pressed"> 
             <Storyboard> 
              //And here 
             </Storyboard> 
            </VisualState> 
           </VisualStateGroup> 
          </VisualStateManager.VisualStateGroups> 
          <Border.Background> 
           <ImageBrush ImageSource="images/back_button.png"/> 
          </Border.Background> 
         </Border> 
        </ControlTemplate> 
       </Button.Template> 
      </Button> 

, 당신은 모든 영향을 미칠 수 있습니다. 툴킷의 참조 바이너리. 페이지에 XML 네임 스페이스를 추가

xmlns:controls="using:WinRTXamlToolkit.Controls" 

사용 버튼과 같이이 외에

<controls:ImageButton HorizonalAlignment="Center" 
    NormalStateImageSource="normal.png" 
    HoverStateImageSource="hover.png" 
    PressedStateImageSource="pressed.png" /> 

, 그것은 유용한 것들을 많이 있습니다.

Answer 3

다음은 블렌드에 추가하는 일부 추가 이미지의 표시 여부를 설정하는 스타일입니다. 이미지는 투명하고 "뒤로 보내기"를 사용하여 단추 배경 이미지 뒤에 있습니다. 즉, 각 단추에 대해 다른 배경 이미지 브러시와 교체 된 표준, 포인터 및 프레스 된 이미지를 계속 사용하게됩니다. 따라서 두 개의 배경 이미지가 중첩됩니다.

<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 4

이 코드를 사용하고 있습니다 :

<Button Style="{StaticResource anyButton}" Cursor="Hand" ClickMode="Press" Click="Button_Click_1" /> 

스타일 :

 <Style x:Key="anyButton" TargetType="Button"> 
     <Setter Property="OverridesDefaultStyle" Value="True"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Button"> 
        <Border Name="border" 
        BorderThickness="0" 
        Background="{TemplateBinding Background}"> 
         <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" /> 
        </Border> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsMouseOver" Value="False"> 
          <Setter Property="Background" TargetName="border"> 
           <Setter.Value> 
            <ImageBrush ImageSource="C:\Users\image1.png" /> 
           </Setter.Value> 
          </Setter> 
         </Trigger> 
         <Trigger Property="IsMouseOver" Value="True"> 
          <Setter Property="Background" TargetName="border"> 
           <Setter.Value> 
            <ImageBrush ImageSource="C:\Users\image2.png" /> 
           </Setter.Value> 
          </Setter> 
         </Trigger> 
         <Trigger Property="IsFocused" Value="True"> 
          <Setter Property="Background" TargetName="border"> 
           <Setter.Value> 
            <ImageBrush ImageSource="C:\Users\image3.png" /> 
           </Setter.Value> 
          </Setter> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style>