如何在运行时更改按钮的背景图像

本文关键字:按钮 背景 图像 运行时 | 更新日期: 2023-09-27 17:58:55

我遇到了一个问题。我想在运行时更改按钮的背景图像。我得到了改变颜色的解决方案,但我想改变图像。

代码如下

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;
        }
    }
}  

如何在运行时更改按钮的背景图像

类似的东西?

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

[Edit]我制作了一个带有两个图像的测试应用程序。我在点击按钮时切换图像,它就工作了。

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)) };
}
private void button_Click(object sender, EventArgs e)
        {
           button.Image=System.Drawing.Image.FromFile("image.png");
        }

试试这个

利用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>

我写的代码是为了回答这里的一个类似问题:切换按钮与不同的图像

我知道定义VisualStates可能看起来很麻烦,但最终您可以保持代码的整洁,避免切换所有ui的视觉外观。