마우스 위로 단추를 투명하게 만듭니다.

Question

Microsoft Visual Studio Express 2012를 사용하여 대도시 스타일 응용 프로그램을 구축하고 있습니다.이 응용 프로그램에 매우 익숙하며 도움이 필요합니다. 버튼 배경이 이미지에서 설정되어있는 XAML에서 버튼을 정의했습니다. 버튼 위로 마우스를 가져 가면 배경이 공백으로 바뀝니다. 마우스를 올려 놓을 때 이미지가 약 50 % 투명하게 보이도록 변경하고 싶습니다. 그게 가능하니? 어떤 도움이 필요합니까? 고맙습니다. 다음과 같이 I 버튼을 선언 한

:

<Button Height="100" Width="100" Margin="0,0,0,0"> 
    <Button.Background> 
    <ImageBrush ImageSource="../Images/home.png"></ImageBrush> 
    </Button.Background> 
</Button> 

Answer 1

상호 작용 dll을 윈도우 스토어의 앱에 존재하지 않습니다. 대신 Visual States를 사용해야합니다. Blend를 사용하면 쉽게 달성 할 수 있습니다.

블렌드에서 앱을 열고 버튼의 템플릿 사본을 편집하면 xaml에 완전한 기본 버튼 스타일이 생깁니다. 원하는 것을 얻기 위해 PointerOver 비주얼 상태를 편집하면됩니다.

귀하의 버튼을 다음과 같이 표시됩니다

<Button Height="100" Width="100" Margin="0,0,0,0" Style="{StaticResource ButtonStyle1}"> 
    <Button.Background> 
     <ImageBrush ImageSource="/Assets/Images/home.png"></ImageBrush> 
    </Button.Background> 
</Button> 

당신은 당신이 모든 곳에서 사용할 수 있도록 앱의 자원의 스타일을 정의해야합니다.

아래 코드에서 PointerOver 시각적 상태를 확인하십시오. 버튼이 해당 상태로 들어갈 때 버튼이 어떻게 변경되어야 하는지를 정의합니다. 여기, 우리는 (배경 이미지를 표시하는 내용입니다) 경계의 불투명도가 0.5되어야한다고 말 : 여기

<DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Border" d:IsOptimized="True"/> 

가 전체 스타일 :

<Style x:Key="ButtonStyle1" 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="12,4,12,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> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="CommonStates"> 
          <VisualState x:Name="Normal"/> 
          <VisualState x:Name="PointerOver"> 
           <Storyboard> 
            <DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Border" d:IsOptimized="True"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Pressed"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPressedBackgroundThemeBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPressedForegroundThemeBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Disabled"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledBackgroundThemeBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Border"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledBorderThemeBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledForegroundThemeBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
           </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> 
        <Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" 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>