WPF Button Change Image When Background Event Fires

Question

Very new to WPF and .NET in general. Previously I worked with winforms and VBA, very basic stuff.

I'm trying to learn how to utilize XAML and events. I know there are better ways to handle the following scenario, but I just want to understand the basics.

Imagine I have 2 buttons, connect and disconnect. When the window loads, Connect Has imgConnect, Disconnect has imgDisconnect. All the images are static resources

xaml

<Button x:Name="btnToolbarConnect" Content ="{StaticResource imgConnect}" ToolTip="Connect" Foreground="#FFF0F0F0" IsEnabled="True"/>
<Button x:Name="btnToolbarDisconnect" Content ="{StaticResource imgDisabledDisconnect}" ToolTip="Disconnect" Foreground="#FFF0F0F0" IsEnabled="False"/>

When a user presses connect (and successfully connects), the image on connect changes to imgDisabledConnect, and Disconnect changes to imgDisabledDisconnect (vice versa)

cs

 private void SystemSrv_ConnectionStateChanged(object sender, ConnectionStateChangedEventArgs e)
        {
            CheckServiceState();
        }

        
        private bool CheckServiceState()
        {
            try
            {
                
                switch (service.ReadState().State.ToString())
                {
                    case "Connected":
                       
                        return true;

                    case "Disconnected":
                        
                        return false;
                    default:
                        return true;
                }
            }
            catch (Exception err)
            {
                MessageBox.Show(err.Message);
                return false;
            }
        }

In the past, I would have addressed the UI elements (text1.text.disable) of a winform in the CheckServiceState switch statement, but to my knowledge, this isnt best practice with XAML/WPF (nor do I think it's possible for the button content image).

I have searched around here and other sites, but the only thing I can find is buttons firing their own events and changing their own images through XAML triggers/styles.

Basically im asking, in the most basic way, how do I change the image on one button when an event happens that isnt an event of it's own creation?

Once I get this figured out, I will play with styles and enable/disable many UI elements when this event fires.

==============Edit 1=============

Ive tried this, but the button Content doesnt change. Do I have to associate the binding TriggerTest somewhere else?

<Button x:Name="btnToolbarTcStart" Content = "New" ToolTip="Re/Start TwinCAT System" IsEnabled="False" Click="btnToolbarTcStart_Click">
                        <Button.Style>
                                <Style TargetType="{x:Type Button}">
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding TriggerTest}" Value="True">
                                            <Setter Property="Content" Value="{StaticResource TcStart}"/>
                                        </DataTrigger>
                                    <DataTrigger Binding="{Binding TriggerTest}" Value="False">
                                            <Setter Property="Content" Value="{StaticResource TcGrey}"/>
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </Button.Style>
                        </Button>

CS

  private bool TriggerTest(bool value)
        {
            Debug.WriteLine(value);
            return value;
        }

This one looks promising to me https://stackoverflow.com/questions/21788855/binding-an-image-in-wpf-mvvm — Stefan Wuebbe, Feb 18 '22 at 07:12
1. you can't bind to method (`TriggerTest`), only to properties. make a property 2. if you have local value (`Content="New"`), then style setter won't be able to change it. so remove local value. recent example: https://stackoverflow.com/questions/71155514/how-to-dynamically-switch-staticresource-from-viewmodel — ASh, Feb 18 '22 at 08:28
Do you have the option of loading the images in your ViewModel and binding them? — FR24601, Feb 18 '22 at 09:22

score 0 · Answer 1 · answered Feb 21 '22 at 10:11

Basically im asking, in the most basic way, how do I change the image on one button when an event happens that isnt an event of it's own creation?

Just set the Content property more or less exactly like you did before:

btnToolbarConnect.Content = FindResource("imgDisabledDisconnect");

If you follow the recommended MVVM design pattern, you typically bind to a property of a view model and use a DataTrigger to set the Content based on its value like you have done in your edit. Just note that TriggerTest must be a public property of the current DataContext of the Button for your XAML markup to work as expected.

@GeneParmesan: Did you try this or what happended? – mm8 Feb 28 '22 at 15:46 — mm8, Feb 28 '22 at 15:46

WPF Button Change Image When Background Event Fires

1 Answers1