如何在運行時更改按鈕的背景圖像？

Question

我米卡住了一個問題。我想在運行時更改按鈕的背景圖像。我得到了改變顏色的解決方案，但我想改變圖像。

的代碼如下

public void buttonCase(object sender, RoutedEventArgs e) 
{ 
    Uri uri = null; 
    var image = new ImageBrush(); 
    if (((App)App.Current).appControler.m_Mode == Controller.textMode.Letters) 
    { 
     ((App)App.Current).appControler.buttonCase(sender, e); 
     switch (((App)App.Current).appControler.m_case) 
     { 
     case Controller.caseMode.Upper: 
      b0.FontSize = b1.FontSize = b2.FontSize = b3.FontSize = b4.FontSize = b5.FontSize = b6.FontSize = b7.FontSize 
      = b8.FontSize = b9.FontSize = bCornerLower.FontSize = 30.0; 
      uri = new Uri(@"/SourceCode;component/Images/Lower_Case_p.png", UriKind.Relative); 
      image.ImageSource = new BitmapImage(uri); 
      btnCase.Background = image; 
      break; 
     case Controller.caseMode.Lower: 
      b0.FontSize = b1.FontSize = b2.FontSize = b3.FontSize = b4.FontSize = b5.FontSize = b6.FontSize = b7.FontSize 
      = b8.FontSize = b9.FontSize = bCornerLower.FontSize = 40.0; 
      uri = new Uri(@"/SourceCode;component/Images/Case_p.png", UriKind.Relative); 
      image.ImageSource = new BitmapImage(uri); 
      btnCase.Background = image; 
      break; 
     } 
    } 
} 

Answer 1

像這樣的事情？

var brush = new ImageBrush(); 
brush.ImageSource = new BitmapImage(new Uri(@"Images/myImage.png", UriKind.Relative)); 
myButton.Background = brush; 

[編輯]我與兩個圖像的測試應用。我點擊按鈕上的圖像，它的作品。

private bool flag; 

private void button1_Click(object sender, RoutedEventArgs e) 
{ 
    flag = !flag; 

    var uriString = flag ? @"Images/logo.png" : @"Images/icon.png"; 
    myButton.Background = new ImageBrush 
     { ImageSource = new BitmapImage(new Uri(uriString, UriKind.Relative)) }; 
} 

Answer 2

private void button_Click(object sender, EventArgs e) 
     { 
      button.Image=System.Drawing.Image.FromFile("image.png"); 
     } 

試試這個..

Answer 3

利用VisualStates對於這種UI狀態切換。 背後的代碼是這樣的：

public void buttonCase(object sender, RoutedEventArgs e) 
{ 
    if (((App)App.Current).appControler.m_Mode == Controller.textMode.Letters) 
    { 
     ((App)App.Current).appControler.buttonCase(sender, e); 
     switch (((App)App.Current).appControler.m_case) 
     { 
     case Controller.caseMode.Upper: 
      VisualStateManager.GoToState(this, "UpperCase", true); 
      break; 
     case Controller.caseMode.Lower: 
      VisualStateManager.GoToState(this, "LowerCase", true); 
      break; 
     } 
    } 
} 

和你的XAML應該是這樣的：

<UserControl 
x:Class="SilverlightApplication2.MainPage" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:system="clr-namespace:System;assembly=mscorlib"> 
<UserControl.Resources> 
    <ControlTemplate x:Key="MySpecialToggleButton" TargetType="ToggleButton"> 
     <Grid> 
      <VisualStateManager.VisualStateGroups> 
       <VisualStateGroup x:Name="CheckStates"> 
        <VisualState x:Name="Checked"> 
         <Storyboard> 
          <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="LowerCaseIcon"> 
           <DiscreteObjectKeyFrame KeyTime="0"> 
            <DiscreteObjectKeyFrame.Value> 
             <Visibility>Visible</Visibility> 
            </DiscreteObjectKeyFrame.Value> 
           </DiscreteObjectKeyFrame> 
          </ObjectAnimationUsingKeyFrames> 
          <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="UpperCaseIcon"> 
           <DiscreteObjectKeyFrame KeyTime="0"> 
            <DiscreteObjectKeyFrame.Value> 
             <Visibility>Collapsed</Visibility> 
            </DiscreteObjectKeyFrame.Value> 
           </DiscreteObjectKeyFrame> 
          </ObjectAnimationUsingKeyFrames> 
         </Storyboard> 
        </VisualState> 
        <VisualState x:Name="Unchecked"/> 
       </VisualStateGroup> 
      </VisualStateManager.VisualStateGroups> 
      <Image x:Name="UpperCaseIcon" Source="/SilverlightApplication2;component/Images/Lower_Case_p.png" Visibility="Visible"/> 
      <Image x:Name="LowerCaseIcon" Source="/SilverlightApplication2;component/Images/Case_p.png" Visibility="Collapsed"/> 
     </Grid> 
    </ControlTemplate> 
</UserControl.Resources> 

<StackPanel> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup x:Name="LetterCaseStates"> 
      <VisualState x:Name="UpperCase"/> 
      <VisualState x:Name="LowerCase"> 
       <Storyboard> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="FontSize" Storyboard.TargetName="bCornerLower"> 
         <DiscreteObjectKeyFrame KeyTime="0"> 
          <DiscreteObjectKeyFrame.Value> 
           <system:Double>40</system:Double> 
          </DiscreteObjectKeyFrame.Value> 
         </DiscreteObjectKeyFrame> 
        </ObjectAnimationUsingKeyFrames> 
       </Storyboard> 
      </VisualState> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 

    <ToggleButton x:Name="btnCase" Click="buttonCase" Template="{StaticResource MySpecialToggleButton}"/> 
    <Button x:Name="bCornerLower" FontSize="30"/><!-- this one is the styling master, all other buttons follow its styling --> 
    <Button x:Name="b0" FontSize="{Binding ElementName=bCornerLower, Path=FontSize}"/> 
    <Button x:Name="b1" FontSize="{Binding ElementName=bCornerLower, Path=FontSize}"/> 
    <Button x:Name="b2" FontSize="{Binding ElementName=bCornerLower, Path=FontSize}"/> 
    <Button x:Name="b3" FontSize="{Binding ElementName=bCornerLower, Path=FontSize}"/> 
    <Button x:Name="b4" FontSize="{Binding ElementName=bCornerLower, Path=FontSize}"/> 
    <Button x:Name="b5" FontSize="{Binding ElementName=bCornerLower, Path=FontSize}"/> 
    <Button x:Name="b6" FontSize="{Binding ElementName=bCornerLower, Path=FontSize}"/> 
    <Button x:Name="b7" FontSize="{Binding ElementName=bCornerLower, Path=FontSize}"/> 
    <Button x:Name="b8" FontSize="{Binding ElementName=bCornerLower, Path=FontSize}"/> 
    <Button x:Name="b9" FontSize="{Binding ElementName=bCornerLower, Path=FontSize}"/> 
</StackPanel> 

我寫的代碼作爲一個答案在這裏一個類似的問題：toggle button with different images

我知道定義VisualState看起來很麻煩，但最終你可以保持你的代碼在切換後很乾淨所有UI零件的視覺外觀。