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

我知道定义VisualStates看起来非常繁琐，但最终你可以保持你的代码非常干净，从而切换所有ui碎片的视觉外观。

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

3 个答案: