Show image based on event

Question

I have two images inside a Grid>Rectangle. What I would like to do, is be able to use these images interchangably. I.E if a certain thing happens ( a button is clicked ) I would like it to change from WebCasting.PNG to OffAir.PNG and Vice Versa.PNG. I have tried using Visiblity="Hidden" without any luck.

Any recomendations on how to accomplish this?

XAML

<Grid>
        <Rectangle Margin="10,10,10,40">
            <Rectangle.Fill>Black</Rectangle.Fill>
        </Rectangle>

        <Image Source="/Images/Webcasting.png" />
        <Image Source="/Images/OffAir.png" />
     </Grid>

Button Press Code

 #region Button Play Click
     private void btnPlay_Click(object sender, RoutedEventArgs e)
     {
         //toggle UI
         CanStart = false;
         CanStop = true;
         IsRecording = true;      
    }

Answer 1

Non trivial UI items are best set using styles and triggers. This way you can focus on coding functionality of your player and let xaml take care of UI;

Thus :

1. instead using 2 images, use one, and change only its source;
2. instead of regular button use toggle button, and use style to set its content to Play/Stop according;

for example:

<Grid x:Name="LayoutRoot">
  <Image  Style="{DynamicResource RecordingStatusImage}" />
  <ToggleButton x:Name="PlayButton" Style={DynamicResource PlayToggleButton} />
</Grid>

and then add Style to your resources , for example

 <UserControl.Resources>
         <BitmapImage x:Key="Webcast"  UriSource="/Images/Webcasting.png"/>
    <BitmapImage x:Key="OffAir"  UriSource="/Images/OffAir.png"/>

<Style x:Key="RecordingStatusImage" TargetType="Image">
    <Style.Triggers>
        <DataTrigger Binding="{Binding ElementName=PlayButton, Path=IsChecked}"  Value="True">
            <Setter Property="Source" Value="{DynamicResource Webcast}" />
         </DataTrigger>
         <DataTrigger Binding="{Binding ElementName=PlayButton, Path=IsChecked}"  Value="False">
            <Setter Property="Source" Value="{DynamicResource OffAir}" />
         </DataTrigger>
    </Style.Triggers>
</Style>

 <Style TargetType="ToggleButton" x:Key="PlayToggleButton">
    <Style.Triggers>
        <Trigger Property="IsChecked" Value="True">
          <Setter Property="Content" Value="Stop" />
         </Trigger>
         <Trigger Property="IsChecked" Value="False">
         <Setter Property="Content" Value="Play" />
         </Trigger>
      </Style.Triggers>
    </Style>
</UserControl.Resources>

Hope this helps.

Answer 2

There are many ways to achieve the functionality that you need. Here is a simple way of doing it.

XAML:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid>
        <Rectangle Margin="10,10,10,40">
            <Rectangle.Fill>Black</Rectangle.Fill>
        </Rectangle>

        <Image Name="img1" Source="http://media.smashingmagazine.com/wp-content/uploads/2010/09/44_add_site_stackoverflow.jpg" Visibility="Hidden"/>
        <Image Name="img2" Source="http://www.donkersct.nl/wordpress/wp-content/uploads/2012/07/stackoverflow.png"/>
    </Grid>
    <Button Grid.Row="1" Content="Change" Click="Button_Click" Margin="5"></Button>
</Grid>

Code Behind:

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        if (this.img1.Visibility == System.Windows.Visibility.Visible)
        {
            this.img1.Visibility = System.Windows.Visibility.Hidden;
            this.img2.Visibility = System.Windows.Visibility.Visible;
        }
        else
        {
            this.img1.Visibility = System.Windows.Visibility.Visible;
            this.img2.Visibility = System.Windows.Visibility.Hidden;
        }
    }