нужно добавлять изображения динамически

Question

Я хочу динамически добавлять разные изображения в мое приложение silverlight.Я хочу иметь возможность переключать изображения здесь

 <Image Margin="0,4,5,8" Source="logo.png" Stretch="Fill" HorizontalAlignment="Right" Width="96"/>

в xmal ниже.

В настоящее время у меня есть следующий 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>

Я использую следующееруководство.http://blogs.silverlight.net/blogs/msnow/archive/2008/06/06/dynamically-loading-and-display-images-in-beta-2.aspx Но я не уверен, как переименовать источник изображения здесь

<Image Margin="0,4,5,8" Source="logo.png" Stretch="Fill" HorizontalAlignment="Right" Width="96"/>

, поэтому я могу использовать add, чтобы заставить его работать.Основная идея заключается в том, что я буду переключать изображения, поэтому иногда это будет logo.png, а иногда это будет смеха. Png, а иногда что-то еще.

спасибо

Answer 1

Попробуйте:

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

Вам необходимо изменить this.ImagePaths = Directory.EnumerateFiles(@"C:\temp\imgs\", "*.*", SearchOption.TopDirectoryOnly).ToList(); в соответствии со своими потребностями.

Answer 2

Вам следует связать свойство Source вашего изображения с некоторым свойством в вашем контексте данных, которое возвращает объект ImageSource.

Например

<Image Source="{Binding ImageSrc}"/>

public ImageSource ImageSrc {
  get {
    if (something) {
      return new BitmapImage(new Uri("logo.png"));
    }
    else {
      return new BitmapImage(new Uri("laugh.png"));
    }
  }
}

Примечание: ваш объект контекста данных должен реализовать INotifyPropertyChanged (множество статей об этом) и вызывать событие PropertyChanged для свойства ImageSrc всякий раз, когда вы хотите, чтобы оно было повторно оценено.