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

Question

我最近开始使用 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>

初始图像是一个“播放”图标和一个表示播放的文本。这可以正常工作并呈现。但是我想在单击按钮时将该图像更改为“暂停”图标和显示暂停的文本。

到目前为止，这是我的 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 是媒体元素对象。当前，当您单击按钮时，文本会发生变化，但按钮中的图像不会消失

到目前为止我尝试了什么:

我在 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 missing BeginInit() and EndInit() function?答案说该类的实现方式与 Windows Phone 不同。检查类的 Windows Phone 文档 ( http://msdn.microsoft.com/en-us/library/windowsphone/develop/system.windows.media.imaging.bitmapimage%28v=vs.105%29.aspx ) 没有显示任何明确的方法来实现我想要的。

注意:我正在为 Windows Phone 8.1 开发。请任何帮助，将不胜感激。谢谢

Answer 1

在 Windows Phone 运行时应用程序中，事情只是表现得很奇怪，这可能是因为我们还没有对其进行过多探索。但会做到。

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

解决方案:-

更新您的 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，我没有删除此信息，因为它很有用。

这里我使用了 Windows phone 8.1 Silverlight 应用程序模板

您可以检查 ImageFailed EventHandler ExceptionRoutedEventArgs e 参数然后您将在银光。你可以用谷歌搜索 AG_E_NETWORK_ERROR 然后你会得到很多与之相关的东西。

解决方案代码:-

改变图片

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

希望对您有所帮助。