使用c#在XAML中更改按钮的图像

本文关键字：按钮 图像 XAML 使用 | 更新日期: 2023-09-27 18:11:26

我最近开始学习使用c#开发windows phone 8.1。直到上周我才有c#或XAML的经验。

我想改变一个按钮的图像，如下所示(XAML)

<Button x:Name="playButton"
                    VerticalAlignment="Stretch"
                    Click="Button_Click">
                <StackPanel Orientation="Horizontal">
                    <Image x:Name="controlImg" Source="/Assets/Media-Play.png" />
                    <TextBlock Text=" Play" />
                </StackPanel>
            </Button>

初始图像是一个"play"图标和一个表示play的文本。这工作和渲染正确。但我想改变图像，当按钮被点击到一个"暂停"图标和文本说暂停。

这是我到目前为止的c#代码

    private mediaState medState = mediaState.Stopped;
    public BitmapImage iconStop = new BitmapImage(new Uri("ms-appx:///Assets/Media-Stop.png", UriKind.RelativeOrAbsolute));
    public BitmapImage iconPause = new BitmapImage(new Uri("ms-appx:///Assets/Media-Pause.png", UriKind.RelativeOrAbsolute));
    public BitmapImage iconPlay = new BitmapImage(new Uri("ms-appx:///Assets/Media-Play.png", UriKind.RelativeOrAbsolute));

    private void Button_Click(object sender, RoutedEventArgs e)
    {

        switch (medState)
        {
            case mediaState.Playing:
                medState = mediaState.Paused;
                mediaE.Pause();
                playButton.Content = " Play";
                controlImg.Source = this.iconPlay;
                break;
            case mediaState.Paused:
                medState = mediaState.Playing;
                mediaE.Play();
                playButton.Content = " Pause";
                controlImg.Source = this.iconPause;
                break;
            case mediaState.Stopped:                    
                medState = mediaState.Playing;
                mediaE.Play();
                playButton.Content = " Pause";
                controlImg.Source = this.iconPause;
                break;
            default:
                break;
        }

    }
    public enum mediaState
    {
        Playing,
        Paused,
        Stopped
    }

mediaE是mediaElement对象。当前，当你点击按钮时，文本会改变，但按钮中的图像不会消失

我已经试过了:

我检查了MSDN文章是否使用BitmapImage和其他一些问题，这里通常是这样说的

// Create source
BitmapImage myBitmapImage = new BitmapImage();
// BitmapImage.UriSource must be in a BeginInit/EndInit block
myBitmapImage.BeginInit();
myBitmapImage.UriSource = new Uri(@"C:'Documents and Settings'All Users'Documents'My Pictures'Sample Pictures'Water Lilies.jpg");

但是我的visual studio甚至不承认BitmapImage.BeginInit()是一个有效的函数。

我也检查了这个问题:BitmapImage缺少BeginInit()和EndInit()函数?答案说Class在windows phone上的实现方式不一样。查看windowsphone文档(http://msdn.microsoft.com/en-us/library/windowsphone/develop/system.windows.media.imaging.bitmapimage%28v=vs.105%29.aspx)的类没有显示任何明确的方法来实现我想要的。

注意:我正在开发windows phone 8.1。请任何帮助将不胜感激。由于

使用c#在XAML中更改按钮的图像

Windows phone运行时应用程序的行为很奇怪，可能是因为我们还没有对此进行过多的研究。但我一定会的。

我也尝试过使用绑定的东西，这也显示了更新中的一些问题，所以我提出的不是一个好的解决方案，而是一个工作的。当我完成这项工作后，我会在这里更新一个好的解决方案。

<<p> 解决方案/strong>: -

更新你的xaml，因为它不是正确的方式，你应该使用ContentTemplate来改变任何控件的显示。并检查控件和内容模板的区别。

Xaml: - 

    <Button x:Name="PlayButton" Grid.Row="1"
                Click="PlayButton_OnClick" >
        <Button.ContentTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <Image x:Name="ControlImg" 
                   Stretch="Fill" Width="100"
                   />
                    <TextBlock Text=" Play" />
                </StackPanel>
            </DataTemplate>
        </Button.ContentTemplate>
    </Button>

更改按钮单击事件添加一些代码:- 

 private async void PlayButton_OnClick(object sender, RoutedEventArgs e)
    {
        var btn = sender as Button;
        // For TextBlock change the children collection index to 1
        var img = (Image)(btn.ContentTemplateRoot as StackPanel).Children[0];
        switch (medState)
        {
            case mediaState.Playing:
                medState = mediaState.Paused;
             //   mediaE.Pause();
                PlayButton.Content = " Play";
                img.Source = this.iconPlay;
                break;
            case mediaState.Paused:
                medState = mediaState.Stopped;
               // mediaE.Play();
                PlayButton.Content = " Pause";
                img.Source = this.iconPause;
                break;
            case mediaState.Stopped:
                medState = mediaState.Playing;
               // mediaE.Play();
                PlayButton.Content = " Stop";
                img.Source = this.iconStop;
                break;
            default:
                break;
        }
    }

对于Windows phone SilverLight，我没有删除这个信息，因为它是有用的。

Here I used the Windows phone 8.1 Silverlight app template

您可以检查ImageFailed EventHandler ExceptionRoutedEventArgs e参数，然后您将看到" age_network_error "，这与Silverlight中的cross-scheme security问题有关。你可以谷歌AG_E_NETWORK_ERROR，然后你会得到很多与它相关的东西。

解决方案代码:-

Change images 

public BitmapImage iconStop = new BitmapImage();
public BitmapImage iconPause = new BitmapImage();
public BitmapImage iconPlay = new BitmapImage();
private void PlayButton_OnClick(object sender, RoutedEventArgs e)
{
    switch (medState)
    {
        case mediaState.Playing:
            medState = mediaState.Paused;
            //  mediaE.Pause();
            playButton.Content = " Play";
            var sri = Application.GetResourceStream(new Uri("Assets/download(1).jpg", UriKind.Relative));
            iconStop.SetSource(sri.Stream);
            ControlImg.Source = iconStop;
            break;
        case mediaState.Paused:
            medState = mediaState.Stopped;
            //  mediaE.Play();
            playButton.Content = " Pause";
            var sri1 = Application.GetResourceStream(new Uri("Assets/download(2).jpg", UriKind.Relative));
            iconPlay.SetSource(sri1.Stream);
            ControlImg.Source = iconPlay;
            break;
        case mediaState.Stopped:
            medState = mediaState.Playing;
            // mediaE.Play();
            playButton.Content = " stopped";
            var sri2 = Application.GetResourceStream(new Uri("Assets/download(1).jpg", UriKind.Relative));
            iconStop.SetSource(sri2.Stream);
            ControlImg.Source = iconStop;
            break;
        default:
            break;
    }

希望对你有帮助。

相关文章：