I want to add different images in my silverlight application dynamically. I want to be able to switch the images here
<Image Margin="0,4,5,8" Source="logo.png" Stretch="Fill" HorizontalAlignment="Right" Width="96"/>
in the xmal below .
Currently I have the following xml
<Grid x:Name="ControlPanelGrid" Margin="8,-26,8,13" Grid.Row="1" Grid.RowSpan="4" Opacity="0">
<Rectangle x:Name="ControlPanel" Margin="2,3,3,5" Stroke="#FF474747" RadiusY="4" RadiusX="4" Opacity="0.9" StrokeThickness="0.5">
<Rectangle.Effect>
<DropShadowEffect Opacity="0.26" BlurRadius="7" Direction="319"/>
</Rectangle.Effect>
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF191919" Offset="0.936"/>
<GradientStop Color="#FF454545" Offset="0.187"/>
<GradientStop Color="#FF191919"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Grid x:Name="timelinecontrols" Grid.ColumnSpan="1" Margin="0,0,165,13" d:LayoutOverrides="GridBox" d:IsHidden="True">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<smf:Timeline x:Name="TimelineElement" Cursor="Hand" Chapters="{TemplateBinding Chapters}" EndPosition="{TemplateBinding EndPosition}" Foreground="{x:Null}" HorizontalContentAlignment="Stretch" IsLive="{TemplateBinding IsMediaLive}" LivePosition="{TemplateBinding LivePosition}" Margin="80,0,170,-10" StartPosition="{TemplateBinding StartPosition}" TimelineMarkers="{TemplateBinding TimelineMarkers}" VerticalAlignment="Center" Style="{StaticResource TimelineStyle1}" />
<Border x:Name="TimeContainer" BorderThickness="1" Grid.Column="1" HorizontalAlignment="Left" Margin="0" Opacity="0">
<Grid Height="28" MaxHeight="28" MinWidth="60" MinHeight="28" UseLayoutRounding="True">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.25*"/>
<ColumnDefinition Width="0.367*"/>
<ColumnDefinition Width="0.383*"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="CurrentPositionElement" Foreground="#FFC1C1C1" FontSize="9" HorizontalAlignment="Left" Padding="8,0,0,0" TextAlignment="Center" Text="{Binding PlaybackPosition, Converter={StaticResource TimeSpanValueConverter}, RelativeSource={RelativeSource TemplatedParent}}" VerticalAlignment="Center"/>
<TextBlock x:Name="TimeSeparatorElement" Grid.Column="1" Foreground="#FFFDFAFA" FontSize="9" HorizontalAlignment="Center" Margin="3,0" Opacity="0.4" Text="|" VerticalAlignment="Center"/>
<TextBlock x:Name="CurrentDurationElement" Grid.Column="2" Foreground="#FFFDFDFD" FontSize="9" HorizontalAlignment="Left" Opacity="0.4" Padding="0,0,8,0" Text="{Binding EndPosition, Converter={StaticResource TimeSpanValueConverter}, RelativeSource={RelativeSource TemplatedParent}}" VerticalAlignment="Center"/>
</Grid>
</Grid>
</Border>
</Grid>
<Image x:Name="btnVloume" Margin="0,-1,383,5" Source="volume.png" Stretch="Fill" Height="49" d:LayoutOverrides="Width, GridBox" Width="53" HorizontalAlignment="Right" d:IsHidden="True"/>
<smf:VolumeControl x:Name="VolumeElement" VolumeLevel=".5" RenderTransformOrigin="0.5,0.5" Margin="0,-46.5,326.074,-50.5" UseLayoutRounding="False" d:LayoutRounding="Auto" HorizontalAlignment="Right" Width="36" Style="{StaticResource VolumeControlStyle1}" d:IsHidden="True" >
<smf:VolumeControl.RenderTransform>
<CompositeTransform Rotation="90.02"/>
</smf:VolumeControl.RenderTransform>
</smf:VolumeControl>
<ToggleButton x:Name="FullScreenToggleElement" BorderThickness="0" Cursor="Hand" HorizontalAlignment="Right" HorizontalContentAlignment="Stretch" Height="28" Margin="0,14,153,11" Padding="0" Style="{StaticResource FullScreenElementStyle}" VerticalContentAlignment="Stretch" Width="29" d:LayoutOverrides="HorizontalAlignment" Opacity="0"/>
<Image x:Name="_3D" HorizontalAlignment="Right" Margin="0,1,180,3" Source="3D.png" Stretch="Fill" Width="53" Height="49" Cursor="Hand" Opacity="0.8" MouseLeftButtonUp="_3D_MouseLeftButtonUp">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseEnter">
<ei:ChangePropertyAction x:Name="_3d_100_Opacity" PropertyName="Opacity" Value="1"/>
</i:EventTrigger>
<i:EventTrigger EventName="MouseLeave">
<ei:ChangePropertyAction x:Name="_3d_80_Opacity" PropertyName="Opacity" Value="0.8"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Image>
<Image x:Name="analytics" HorizontalAlignment="Left" Margin="980,3,0,-1" Source="analytics.png" Stretch="Fill" Width="53" Cursor="Hand" Opacity="0.7">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseEnter">
<ei:ChangePropertyAction x:Name="analytics_MouseEnter" PropertyName="Opacity" Value="1"/>
</i:EventTrigger>
<i:EventTrigger EventName="MouseLeave">
<ei:ChangePropertyAction x:Name="analytics_MouseLeave" PropertyName="Opacity" Value="0.7"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Image>
<Image x:Name="btn_fullscreen" HorizontalAlignment="Right" Margin="0,0,140,4" Source="full_screen.png" Stretch="Fill" Width="53" Height="49" Opacity="0.8" Cursor="Hand">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseEnter">
<ei:ChangePropertyAction x:Name="btn_fullscreen_mouseOver" PropertyName="Opacity" Value="1"/>
</i:EventTrigger>
<i:EventTrigger EventName="MouseLeave">
<ei:ChangePropertyAction x:Name="btn_fullscreen_mouseOut" PropertyName="Opacity" Value="0.8"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Image>
<smf:PlayElement x:Name="PlayElement" Content="PlayElement" PlayState="{TemplateBinding PlayState}" HorizontalAlignment="Left" Height="51" Margin="9,2,0,0" Style="{StaticResource PlayElementStyle1}" Width="53" Cursor="Hand" />
<Image Margin="0,4,5,8" Source="logo.png" Stretch="Fill" HorizontalAlignment="Right" Width="96"/>
</Grid>
I am using the following tutorial. http://blogs.silverlight.net/blogs/msnow/archive/2008/06/06/dynamically-loading-and-display-images-in-beta-2.aspx But I am not sure how to rename the image source here
<Image Margin="0,4,5,8" Source="logo.png" Stretch="Fill" HorizontalAlignment="Right" Width="96"/>
so I can use add to get it working. Whole idea is that I will be switching images so some times it will be logo.png, and sometimes it will be laugh.png and sometimes something else.
thanks
Try this:
XAML:
<Window x:Class="FlipImages.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" Name="mainWindow">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Slider Grid.Row="0" Width="Auto" Value="{Binding Index, Mode=TwoWay}" Minimum="0" Maximum="{Binding ImagePaths.Count}" TickFrequency="1" />
<TextBlock Grid.Row="1" Text="{Binding CurrentPath}" />
<Image Grid.Row="2" Margin="5" Source="{Binding ImageSource}" Stretch="None" HorizontalAlignment="Left" />
</Grid>
</Window>
CodeBehind:
// -----------------------------------------------------------------------
// <copyright file="MainWindow.xaml.cs" company="-.-">
// TODO: Update copyright text.
// </copyright>
// -----------------------------------------------------------------------
namespace FlipImages
{
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.IO;
using System.Linq;
using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using Image = System.Windows.Controls.Image;
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window, INotifyPropertyChanged
{
/// <summary>
/// backing <see cref="Index"/>
/// </summary>
private int index = 0;
/// <summary>
/// Initializes a new instance of the MainWindow class.
/// </summary>
public MainWindow()
{
InitializeComponent();
this.ImagePaths = Directory.EnumerateFiles(@"C:\temp\imgs\", "*.*", SearchOption.TopDirectoryOnly).ToList();
this.mainWindow.DataContext = this;
}
/// <summary>
/// used to notify ui about changes
/// </summary>
public event PropertyChangedEventHandler PropertyChanged;
/// <summary>
/// Gets or sets paths to available images
/// </summary>
public List<string> ImagePaths { get; set; }
/// <summary>
/// Gets path of current image
/// </summary>
public string CurrentPath
{
get
{
return this.ImagePaths[this.Index];
}
}
/// <summary>
/// Gets or sets value currently selected with slider
/// </summary>
public int Index
{
get
{
return this.index;
}
set
{
this.index = value;
this.OnPropertyChanged("Index");
this.OnPropertyChanged("CurrentPath");
this.OnPropertyChanged("ImageSource");
}
}
/// <summary>
/// Gets imagesource
/// </summary>
public ImageSource ImageSource
{
get
{
BitmapImage bi = new BitmapImage();
bi.BeginInit();
bi.UriSource = new Uri(this.ImagePaths[this.Index]);
bi.DecodePixelWidth = 200;
bi.EndInit();
return bi;
}
}
/// <summary>
/// Raise PropertyChangedEvent
/// </summary>
/// <param name="propertyName">Name of property changed</param>
protected virtual void OnPropertyChanged(string propertyName)
{
PropertyChangedEventHandler tmp = this.PropertyChanged;
if (null != tmp)
{
tmp(this, new PropertyChangedEventArgs(propertyName));
}
}
}
}
You need to change this.ImagePaths = Directory.EnumerateFiles(@"C:\temp\imgs\", "*.*", SearchOption.TopDirectoryOnly).ToList(); to suit your needs.