Windows Vista Forums

How to implement databinding like this?
  1. #1


    Leo Xue Guest

    How to implement databinding like this?

    I store the file name of images in "PIC" field.
    Then I bind the filed to Source property of an Image.
    <Image Source="{Binding PIC}"/>
    But since only file name is stored, so the path of the
    image files should also be added to the Source.
    What should I do to binding this correctly?
    I have tried in this way,
    <Image Source="Images/"+"{Binding PIC}"/>
    But it seems to be a wrong syntax.



    Any suggestion?



      My System SpecsSystem Spec

  2. #2


    Bob Guest

    Re: How to implement databinding like this? (long)

    In article <e074h7yBHHA.3928@TK2MSFTNGP03.phx.gbl>, xueting_cn@sohu.com
    says...
    > I store the file name of images in "PIC" field.
    > Then I bind the filed to Source property of an Image.
    > <Image Source="{Binding PIC}"/>
    > But since only file name is stored, so the path of the
    > image files should also be added to the Source.
    > What should I do to binding this correctly?
    > I have tried in this way,
    > <Image Source="Images/"+"{Binding PIC}"/>
    > But it seems to be a wrong syntax.
    >
    > Any suggestion?
    >

    I think you have a picture name stored in an "old fashioned" .NET
    property (or public field). I also think you would like to dynamically
    change the value of that fieldd and have your Image automagically
    updated as a result. I messed around with this (and got a bit smarter)
    so I'll share. (sorry if too long).

    You can bind the Source property of an Image to the .NET property but
    the Image will not be updated when the underlying data changes. To get
    that functionality you need to implement INotifyPropertyChanged
    interface.
    The example below displays 2 Images and a button. Both Images are set to
    the same jpg and then in the Button's click handler the underlying
    sources are both changed. The result is the first image remains the same
    and the second image changes as desired.
    (You will need two images in a directory named 'Images' to run the
    sample.)

    Watch for wordwrap!

    Bob

    ------------ XAML -------------------------

    <Window x:Class="databind4Image.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:databind4Image"
    Title="databind4Image"
    SizeToContent="WidthAndHeight"
    >

    <Window.Resources>
    <localemoData x:Key="Demo"/>
    <Style TargetType="{x:Type Image}">
    <Setter Property="Width" Value="200"/>
    <Setter Property="Height" Value="200"/>
    </Style>
    </Window.Resources>
    <StackPanel DataContext="{Binding Source={StaticResource Demo}}">
    <Button Name="button1" Click="button1_Click">Change
    Images' Source Value</Button>
    <Image Name ="image1" Source="{Binding
    Path=Picture_filename, Mode=OneWay}" />
    <Image Name ="image2" Source="{Binding Path=Pic_name,
    Mode=OneWay}" />
    </StackPanel>
    </Window>

    -------- codebehind --------

    using System;
    using System.Windows;
    namespace databind4Image
    {
    public partial class Window1 : System.Windows.Window
    {
    private string picture_filename;

    public string Picture_filename
    {
    get { return picture_filename; }
    set { picture_filename = value; }
    }

    public Window1()
    {
    InitializeComponent();
    this.Picture_filename = @"/Images/wpaflag.jpg";
    image1.DataContext = this;
    button1.Click += new RoutedEventHandler(button1_Click);
    }

    void button1_Click(object sender, RoutedEventArgs e)
    {
    Picture_filename = @"/Images/wpaflag2.jpg";
    DemoData demodata = (DemoData)this.FindResource("Demo");
    demodata.Pic_name = @"/Images/wpaflag2.jpg";
    }
    }
    }

    ------- Data Object -----------------

    using System;
    using System.ComponentModel; // for INotifyPropertyChanged

    namespace databind4Image
    {
    public class DemoData : INotifyPropertyChanged
    {
    private string pic_name;
    public event PropertyChangedEventHandler PropertyChanged;

    public DemoData()
    {
    Pic_name = @"/Images/wpaflag.jpg";
    }

    private void NotifyPropertyChanged(String info)
    {
    if (PropertyChanged != null)
    {
    PropertyChanged(this, new PropertyChangedEventArgs
    (info));
    }
    }

    public string Pic_name
    {
    get{return this.pic_name;}
    set{
    if (value != this.pic_name)
    {
    this.pic_name = value;
    NotifyPropertyChanged("Pic_name");
    }
    }
    }
    }
    }

      My System SpecsSystem Spec

How to implement databinding like this? problems?

Similar Threads
Thread Thread Starter Forum Replies Last Post
Headphones setting? Where is it? Please implement! bagnon Vista General 4 01 Mar 2009
How to implement OnDraw() and Serialize() Learning WinFX General 0 13 Nov 2007
Implement ICommandSource Sample in VB Horst Klein Avalon 0 12 Jan 2007
how to implement a CheckedListbox (or something similar) Sam Jost Avalon 1 25 Sep 2006
How to implement customized TriggerAction HolaMan Avalon 0 08 Sep 2006