how can i change the image in button inside in datatemplate wpf

[paul]

how i say in title, i have a datatemplate for a Telerik RadTileView, in the large content i have a toolbar with a play button, the idea is that when a user click this button, the images in the tile view change automatically, i already do that but i need change the image inside the play button with a stop icon, this is my data template:

<DataTemplate x:Key="contentTemplate">
            <telerik:RadFluidContentControl>
                <telerik:RadFluidContentControl.Content>
                    <Border>
                        <Image Source="{Binding Frame}" />
                    </Border>
                </telerik:RadFluidContentControl.Content>
                <telerik:RadFluidContentControl.LargeContent>
                    <Grid>
                        <Grid>
                            <Image Source="{Binding Frame}" />
                        </Grid>
                        <Border BorderBrush="Black" BorderThickness="1" Background="#80000000" Height="80" VerticalAlignment="Bottom">
                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
                                <Button Style="{StaticResource BotonGrande}" Name="BotonImagenAtras" Click="BotonImagenAtras_Click">
                                    <Image Style="{StaticResource ImagenGrande}" Source="/VisorSeproban;component/Imagenes/izquierda.png" />
                                </Button>
                                <Button Style="{StaticResource BotonGrande}" Name="BotonImagenesPlay" Click="BotonImagenesPlay_Click">
                                    <Image Style="{StaticResource ImagenGrande}" Source="/VisorSeproban;component/Imagenes/play_on.png" />
                                </Button>
                                <Button Style="{StaticResource BotonGrande}" Name="BotonCaputarImagen" Click="BotonCaputarImagen_Click">
                                    <Image Style="{StaticResource ImagenGrande}" Source="/VisorSeproban;component/Imagenes/captura_img_on.png" />
                                </Button>
                                <Button Style="{StaticResource BotonGrande}" Name="BotonImagenAdelante" Click="BotonImagenAdelante_Click">
                                    <Image Style="{StaticResource ImagenGrande}" Source="/VisorSeproban;component/Imagenes/derecha.png" />
                                </Button>
                            </StackPanel>
                        </Border>
                    </Grid>
                </telerik:RadFluidContentControl.LargeContent>
            </telerik:RadFluidContentControl>
        </DataTemplate>

Thanks for your help! Regards

[Martin Ivanov]

Hello Paul,

In order to change the play button's icon you can try the following approaches:

• If the DataTemplate with your play button is located in the user's control (or window) page you can directly subscribe for the Click event of the button and change the icon. For example you can have a property in your view model that holds the path to the icon and bind it to the Source of the Image. When you click the button you can change the value of this property.
  

  <Button Style="{StaticResource BotonGrande}" Name="BotonImagenesPlay" Click="BotonImagenesPlay_Click">
      <Image Style="{StaticResource ImagenGrande}" Source="{Binding PlayIconPath}" />
  </Button>

  The event handler implementation could look something like this:
  

  private void BotonImagenesPlay_Click(object sender, RoutedEventArgs e)
  {
      Button btn = (Button)sender;
      var dataItem = (DataItem)btn.DataContext;
      if (dataItem.PlayIconPath == "play.png")
      {
          dataItem.PlayIconPath = "stop.png";
          //Play the video
      }
      else if (dataItem.PlayIconPath == "stop.png")
      {
          dataItem.PlayIconPath = "play.png";
          //Stop the video
      }
  }

• If the DataTemplate is located in a ResourceDictionary and it doesn't have access to the code-behind of the view that uses it you won't be able to use the Click event. In this case you can bind a Command to the button and implement its behavior in your view model.

  <Button Name="BotonImagenAtras" Command="{Binding PlayCommand}" CommandParameter="{Binding}">

For your convenience I prepared a project with your code snippet and the approach with the Command. Please take a look at it and let me know if it works for you.

Regards,
Martin
Telerik

 

 

[paul]

Hi Martin, Thank you so much for your awnswer, works perfectly.

Other promblem that i have actually is when i try to replace items in the tileview, in my code have an event that fire when i need change an item for another one. This is the function for make the change: 

01.private void ArchivoModificado(string ruta)
02.        {
03.            try
04.            {
05.                RadTileViewItem item = (from RadTileViewItem x in TileViewImagenes.Items
06.                                        where x.Tag.ToString()==ruta
07.                                        select x).SingleOrDefault() ;
08.                if (item != null)
09.                {
10.                    Image imagen = ObtenerImagen(ruta);
11.                    if (imagen != null)
12.                    {
13.                        int pos = item.Position;
14.                        TileViewImagenes.Items.Remove(item);
15.                        TileViewImagenes.Items.Insert(pos, new RadTileViewItem
16.                        {
17.                            Header = ((Path.GetFileNameWithoutExtension(ruta).IndexOf("A") != -1) ? "Previo al evento" : "Luego del evento"),
18.                            Content = imagen,
19.                            Tag = ruta
20.                        });
21.
22.                    }
23.                }
24.            }
25.            catch { }
26.        }

I search the radtileviewitem that i need replace in the tileview by using linq with the Tag property help, then i get the image with the function "ObtenerImagen" with the path, finally i remove the item of the tileview and insert the new radtileviewitem using the new image obtained like content.

The problem is that the item keeps the previous image and dont show´s the new, the event works correctly and i see when the items changes on the tileviewscollection, but image is don't updating, how can i refresh the tileview for display the proper images.

I apologize for the bad English, and thanks again for your help

Regards

[paul]

PD. This is the function that i use to get the images

private Image ObtenerImagen(string ruta)
        {
            try
            {
                BitmapImage bi = new BitmapImage();
                bi.BeginInit();
                bi.CacheOption = BitmapCacheOption.OnLoad;
                bi.UriSource = new Uri(ruta);
                bi.EndInit();

                Image AuxImagen = new Image();
                AuxImagen.Source = bi;

                AuxImagen.Stretch = Stretch.Uniform;
                AuxImagen.Uid = ruta;
                return AuxImagen;
            }
            catch
            {
                return null;
            }
        }

[Martin Ivanov]

Hello Paul,

Thank your for the code snippets.

Without the rest of your implementation I cannot be completely sure what is causing the issue. As I can see from the code snippets, you are using the Tag property of the RadTileViewItem to store the Image source's path. Then you are using the tag to get a specific item and then create a new Image element which source is based on the "ruta" variable passed as an argument to the ObtenerImagen() method. Can you confirm I am right? If so, then it looks like the new image uses the source's path of the old one (stored in the Tag property) and the picture is actually the same as the one from the removed item.

However, this is only a guess and this is why I would ask you to send me a sample project with the reported behavior, if this is possible for you, or simplified code snippets with your implementation. This will allow me to test it on my side and further investigate the issue.

In addition I prepared a sample project with your code. Can you please take a look at it and let me know if I am missing something?

Thank you in advance for the cooperation.

Regards,
Martin
Telerik