2014-03-29 127 views
0

下午好,按钮按下 - 更改图片来源

我试图找出如何按下按钮时更改图像的图像源。然后当按钮不处于按下状态时,图像源应该返回到其原始图像。换句话说,只要用户按下按钮,图像就会被简单地替换。

我想类似下面的伪代码:

while(Button.Pressed() == True){ 

    Uri uri = new Uri("Assets/media/newImage.png", UriKind.Relative); 
      BitmapImage imageSource = new BitmapImage(uri); 
      image1.Source = imageSource; 

} 

任何的帮助深表感谢。

+0

的[我的形象是不会改变的按钮点击]可能重复(http://stackoverflow.com/questions/22732554/my-image-is-not-changing -on-button-click) – loyalpenguin

回答

0

最简单的方法是将图像添加到按钮模板,改变用的VisualState的图像源的按钮(按下)。

下面是一个例子:

  <Button Content="Test" 
       Foreground="{StaticResource PhoneAccentBrush}" 
       VerticalAlignment="Top"> 
      <Button.Style> 
       <Style TargetType="Button"> 
        <Setter Property="Background" 
          Value="Transparent" /> 
        <Setter Property="BorderBrush" 
          Value="{StaticResource PhoneForegroundBrush}" /> 
        <Setter Property="Foreground" 
          Value="{StaticResource PhoneForegroundBrush}" /> 
        <Setter Property="BorderThickness" 
          Value="{StaticResource PhoneBorderThickness}" /> 
        <Setter Property="FontFamily" 
          Value="{StaticResource PhoneFontFamilySemiBold}" /> 
        <Setter Property="FontSize" 
          Value="{StaticResource PhoneFontSizeMedium}" /> 
        <Setter Property="Padding" 
          Value="10,5,10,6" /> 
        <Setter Property="Template"> 
         <Setter.Value> 
          <ControlTemplate TargetType="Button"> 
           <Grid Background="Transparent"> 
            <VisualStateManager.VisualStateGroups> 
             <VisualStateGroup x:Name="CommonStates"> 
              <VisualState x:Name="Normal" /> 
              <VisualState x:Name="MouseOver" /> 
              <VisualState x:Name="Pressed"> 
               <Storyboard> 
                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Source" 
                        Storyboard.TargetName="Img"> 
                 <!-- Path to image that you want to show when button is pressed. --> 
                 <DiscreteObjectKeyFrame KeyTime="0" 
                       Value="Assets/..." /> 
                </ObjectAnimationUsingKeyFrames> 
                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" 
                        Storyboard.TargetName="ContentContainer"> 
                 <DiscreteObjectKeyFrame KeyTime="0" 
                       Value="{StaticResource PhoneButtonBasePressedForegroundBrush}" /> 
                </ObjectAnimationUsingKeyFrames> 
                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" 
                        Storyboard.TargetName="ButtonBackground"> 
                 <DiscreteObjectKeyFrame KeyTime="0" 
                       Value="{StaticResource TransparentBrush}" /> 
                </ObjectAnimationUsingKeyFrames> 
               </Storyboard> 
              </VisualState> 
              <VisualState x:Name="Disabled"> 
               <Storyboard> 
                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" 
                        Storyboard.TargetName="ContentContainer"> 
                 <DiscreteObjectKeyFrame KeyTime="0" 
                       Value="{StaticResource PhoneDisabledBrush}" /> 
                </ObjectAnimationUsingKeyFrames> 
                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" 
                        Storyboard.TargetName="ButtonBackground"> 
                 <DiscreteObjectKeyFrame KeyTime="0" 
                       Value="{StaticResource PhoneDisabledBrush}" /> 
                </ObjectAnimationUsingKeyFrames> 
                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" 
                        Storyboard.TargetName="ButtonBackground"> 
                 <DiscreteObjectKeyFrame KeyTime="0" 
                       Value="Transparent" /> 
                </ObjectAnimationUsingKeyFrames> 
               </Storyboard> 
              </VisualState> 
             </VisualStateGroup> 
            </VisualStateManager.VisualStateGroups> 

            <Border x:Name="ButtonBackground" 
              BorderBrush="{TemplateBinding BorderBrush}" 
              BorderThickness="{TemplateBinding BorderThickness}" 
              Background="{TemplateBinding Background}" 
              CornerRadius="0" 
              Margin="{StaticResource PhoneTouchTargetOverhang}"> 

             <StackPanel Orientation="Horizontal"> 

              <!-- Added Image to the Button Template. Specify image that you 
              want to show when button is in normal state. --> 
              <Image x:Name="Img" 
                Source="Assets/..." 
                Height="64" 
                Width="64" /> 

              <ContentControl x:Name="ContentContainer" 
                  ContentTemplate="{TemplateBinding ContentTemplate}" 
                  Content="{TemplateBinding Content}" 
                  Foreground="{TemplateBinding Foreground}" 
                  HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
                  Padding="{TemplateBinding Padding}" 
                  VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" /> 

             </StackPanel> 
            </Border> 
           </Grid> 
          </ControlTemplate> 
         </Setter.Value> 
        </Setter> 
       </Style> 
      </Button.Style> 
     </Button> 
+0

感谢所有 - 罗马人,我会试试这个。谢谢。 – user3460731